leaflet-map-sync

Description

Sync two or more maps with regard to center, zoom and pan.

• When the cursor is over one of the maps a 'shadow cursor' is shown in the other maps. The shape of the 'shadow cursor' is (almost) the same as the cursor over the main map
• When one of the maps are being dragged a 'shadow' of the dragged map are shown in the other maps, and a 'shadow' of the other maps are shown in the dragged map
• The first map added is the main map. The other maps can have a fixed zoomOffset making the different between the zoom of map and the main map constant

Based on the great Leaflet.Sync by Bjorn Sandvik

Installation

bower

bower install https://github.com/FCOO/leaflet-map-sync.git --save

Demo

http://FCOO.github.io/leaflet-map-sync/demo/

Usage

var mapSync = new L.MapSync({
        showOutline     : true, //or false
        showShadowCursor: true  //or false
        inclDisabled    : false //When true shadow-cursor and outline (if enabled) are also shown on disabled maps
        mapIsVisible: function(map{ 
            /* return true if map is visible */
            return true;
        }

    });
mapSync.add(map);
mapSync.add(map2, {zoomoffset: +2 });

Methods

MapSync.add( map, options  ); //Adds map to the sync	

MapSync.forEachMap( function( map, index ) ); //Call the function for each map
MapSync.remove( map ); 	//Remove the map from the sync

MapSync.enable( map );	//Enables the map to the sync
MapSync.disable( map );	//Disables the map from the sync

//TODO: MapSync.enableZoom( map );	//Enables the map to the sync
//TODO: MapSync.disableZoom( map );	//Disables the map from the sync

MapSync.setZoomOffset( map, zoomOffset ); //Change the offset in zoom between map and the main map

MapSync.enableShadowCursor(on); //Show the shadow-cursor
MapSync.disableShadowCursor();  //Hide the shadow-cursor

MapSync.enableOutline(on); //Show the outline of the other maps when dragging a map
MapSync.disableOutline();  //Hide the outline of the other maps when dragging a map

options

Option	Type	Default	Description
enabled	Boolean	true	If true the map will be synchronized.
zoomOffset	Number	0	The different in zoom-level between tha main map and the map. zoomOffset > 0 means that the map will be zoom more in than the main map

Events

The following events are fired on the map:

"mapsyncenabled": when MapSync.enable( map ) is called "mapsyncdisabled": when MapSync.disable( map ) is called "mapsynczoomoffsetchanged": when MapSync.setZoomOffset( map, zoomOffset ) is called

Properties

When a map is added to a MapSync it will get the following new properties

map._mapSync; //The MapSync-object
map.options.mapSync; //The options given in add( map, options )

Copyright and License

This plugin is licensed under the MIT license.

Copyright (c) 2015 FCOO

Contact information

NielsHolt nho@fcoo.dk

Credits and acknowledgements

Leaflet.Sync by Bjorn Sandvik