Leaflet Magnifying Glass

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

See it in action:

Support

The development version of the plugin (on the master branch) is targeted at the 1.* version of Leaflet.

For a version of the plugin compatible with the 0.7.* Leaflet releases, use the leaflet-0.7.2 branch.

Not tested on mobile browsers.

Screenshot

Default look of the magnifying glass, using the same tile background as the main map and a zoom level offset set to 3.

Usage

Add the style sheet and script file to your page;
Instantiate a magnifying glass and add it to the map like any other layer:

var magnifyingGlass = L.magnifyingGlass({
    layers: [ ... ]
});

map.addLayer(magnifyingGlass);

Inner layers

For it to display something, you need to pass layers to the constructor. You can simply give a L.TileLayer, but any other type of layers too.

Leaflet layer objets can't be shared between maps. So, don't re-use layer objects already in use by the main map. For example, if you want to use the same tile background on your main map and in the magnifying glass, you need to instantiate two different L.TileLayer objects:

// Share the same tile url...
var tileUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
// but use two independant TileLayer objects
var mapTiles = L.tileLayer(tileUrl),
    magnifiedTiles = L.tileLayer(tileUrl);

var map = L.map('map', {
    center: [0, 0],
    zoom: 5,
    layers: [ mapTiles ]
});

var magnifyingGlass = L.magnifyingGlass({
    layers: [ magnifiedTiles ]
}).addTo(map);

Options

Option	Type	Default	Description
`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.
`fixedPosition`	`Boolean`	`false`	If `true`, the magnifying glass will stay at the same position on the map, not following the mouse cursor.
`latLng`	`LatLng`	`[0, 0]`	The initial position of the magnifying glass, both on the main map and as the center of the magnified view. If `fixedPosition` is `true`, it will always keep this position.
`layers`	`ILayer[]`	`[]`	Set of layers to display in the magnified view. These layers shouldn't be already added to a map instance (see note above).

Methods

Method	Description
`getMap()`	Returns the `L.Map` instance used by the magnifying glass. You can use it for example to add/remove magnified layers on the fly.

License

MIT.

bbecquet/Leaflet.MagnifyingGlass

bbecquet

Reviews

Repository Details