https://github.com/404-html/modern-pan-zoom
Simple, Google Maps like, pan/zoom for the web
https://github.com/404-html/modern-pan-zoom
google maps pan zoom
Last synced: 11 months ago
JSON representation
Simple, Google Maps like, pan/zoom for the web
- Host: GitHub
- URL: https://github.com/404-html/modern-pan-zoom
- Owner: 404-html
- Created: 2022-12-17T23:17:05.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-12-21T09:55:27.000Z (over 3 years ago)
- Last Synced: 2025-07-26T16:04:57.330Z (11 months ago)
- Topics: google, maps, pan, zoom
- Language: TypeScript
- Homepage:
- Size: 6.84 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Simple, Google Maps like, pan/zoom for the web
## [Production demo](https://recordscanner.com/user/record-scanner/collection)
Cooperative Gesture Handler, makes content of any element behaving like [Embed Google Maps](https://developers.google.com/maps/documentation/embed/get-started).
on 📱 - detects single finger gesture, doesn't block the scroll
on 💻 - detects wheel, zooms when ⌘/ctrl is pressed
## Installation
```
yarn add modern-pan-zoom
```
## Example usage in React
```js
import ModernPanZoom from "modern-pan-zoom";
import { useEffect, useRef } from "react";
export default function App() {
const elRef = useRef(null);
useEffect(() => {
if (!elRef.current) return;
const panZoom = new ModernPanZoom(elRef.current, {
autoScale: true, // sets initial zoom for child(s) to fit the parent, default: false
onHint: (type, acknowledge) => {
type === "pan" && alert("Use two fingers to navigate");
type === "wheel" && alert("Use ⌘ + scroll to zoom");
// onHint() will not be called again until acknowledge() is executed
setTimeout(acknowledge, 2000);
},
});
}, []);
return (
Wooohooooo!!!
);
}
```