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

Usage example for react-leaflet v1

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='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />

  <MagnifyingGlassControl {...options} />
</Map>

Usage example for react-leaflet v2

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='&copy; <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