react-leaflet-magnifying-glass

React wrapper of Leaflet.MagnifyingGlass. 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).

Usage no npm install needed!

<script type="module">
  import reactLeafletMagnifyingGlass from 'https://cdn.skypack.dev/react-leaflet-magnifying-glass';
</script>

README

react-leaflet-magnifying-glass

version react-leaflet compatibility travis build dependencies peer dependencies issues downloads MIT License

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).

Screenshot

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