README
react-leaflet-magnifying-glass
React wrapper of Leaflet.MagnifyingGlass for react-leaflet.
This plugin allows you to add a "magnifying glass" effect to a Leaflet map, able to display a portion of the map in a different zoom (and actually display different content).
Tested with Leaflet 1.4.0 and React-Leaflet 1.9.1, React-Leaflet 2.2.0
Demos
Version | Demo |
---|---|
react-leaflet@1.9.1 | CodePen |
react-leaflet@2.x | CodePen |
Installation
Install via NPM
npm install --save react-leaflet-magnifying-glass
v1
Usage example for react-leaflet import { Map, TileLayer } from 'react-leaflet';
import MagnifyingGlassControl from 'react-leaflet-magnifying-glass';
const options = {
position: 'topleft',
radius: 100,
zoomOffset: 3
};
<Map center={[2.935403, 101.448205]} zoom={10}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
<MagnifyingGlassControl {...options} />
</Map>
v2
Usage example for react-leaflet import { Map, TileLayer, withLeaflet } from 'react-leaflet';
import MagnifyingGlassControlDefault from 'react-leaflet-magnifying-glass';
// wrap `MagnifyingGlassControl` component with `withLeaflet` HOC
const MagnifyingGlassControl = withLeaflet(MagnifyingGlassControlDefault);
const options = {
position: 'topleft',
radius: 100,
zoomOffset: 3
};
<Map center={[2.935403, 101.448205]} zoom={10}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
<MagnifyingGlassControl {...options} />
</Map>
Options
Option | Type | Default | Description |
---|---|---|---|
position |
string |
topleft |
Magnifier control position. One of (topleft ,topright ,bottomleft ,bottomright ). |
radius |
Integer |
100 |
The radius of the magnifying glass, in pixels. |
zoomOffset |
Integer |
3 |
The zoom level offset between the main map zoom and the magnifying glass. |
fixedZoom |
Integer |
-1 |
If different than -1 , defines a fixed zoom level to always use in the magnifying glass, ignoring the main map zoom and the zoomOffet value. |
TODO
- Support magnifying
Leaflet.markercluster
layer
Credits
Credits goes to bbecquet and all the contributors for the original work.
License
MIT License