React-leaflet-magnifying-glass NPM

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

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.