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 | | --- | --- | | [email protected] | CodePen | | [email protected] | 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