[GIS] Navigate two leaflet maps

leaflet
I am looking for an example where there would be multiple map divs containing leaflet maps. When one is panned I want the other one to pan or zoom with it so they are always in sync.
Best Answer

Here's a blog post that shows how to sync two leaflet maps:
Creating a synchronized view of two maps or images with Leaflet
Then, as per a question in the comments, a plugin that shows how to sync more than 2 leaflet maps:
turban/Leaflet.Sync
Related Solutions

[GIS] Styling Leaflet Maps

I don't think google maps custom styles are going to work anywhere except google maps...
Perhaps you could consider Cloudmade's styling or Mapbox styling as suggested by Scro.
[GIS] Leaflet Maps Sync problem

As posted by @Kyros the issue was resolved with the following code:
-- Not a good way to code but it works:
    <script type="text/javascript"> 
    var basemap;
    var overlaymap;
    var marker;
    var circle;
    var getText;
    var locateControl;
    var htmlStr;
    var coordStr;
    var arrOfSuggestText;
    var arrOfText;
    var arrOfLat;
    var arrOfLon;
    var draw_layer;
    var jsonObject;
    var searchBoxText;
    var currentname;
    var currentname1;
    var drawJson;    
    var center = [1.355,103.840];  
    var map2015 = L.tileLayer('http://e1.onemap.sg/arcgis/rest/services/SM256WGS84/MapServer/tile/{z}/{y}/{x}');   
    var map2007 = L.tileLayer('http://52.74.148.255/geoserver/gwc/service/tms/1.0.0/HistoricalMap:2007wgs84@EPSG:3857@png/{z}/{x}/{y}.png', {
    tms: true,
    transparent: true
    });

    var map1998 = L.tileLayer('http://52.74.148.255/geoserver/gwc/service/tms/1.0.0/HistoricalMap:1998wgs84@EPSG:3857@png/{z}/{x}/{y}.png', {
    tms: true,
    transparent: true
    });

    var map1988 = L.tileLayer('http://52.74.148.255/geoserver/gwc/service/tms/1.0.0/HistoricalMap:1988wgs84@EPSG:3857@png/{z}/{x}/{y}.png', {
    tms: true,
    transparent: true
    });

    var map1975 = L.tileLayer('http://52.74.148.255/geoserver/gwc/service/tms/1.0.0/HistoricalMap:1975wgs84@EPSG:3857@png/{z}/{x}/{y}.png', {
    tms: true,
    transparent: true
    });

    var map1969 = L.tileLayer('http://52.74.148.255/geoserver/gwc/service/tms/1.0.0/HistoricalMap:1969wgs84@EPSG:3857@png/{z}/{x}/{y}.png', {
    tms: true,
    transparent: true
    });

    var map1961 = L.tileLayer('http://52.74.148.255/geoserver/gwc/service/tms/1.0.0/HistoricalMap:1961wgs84@EPSG:3857@png/{z}/{x}/{y}.png', {
    tms: true,
    transparent: true
    });

    var map1955 = L.tileLayer('http://52.74.148.255/geoserver/gwc/service/tms/1.0.0/HistoricalMap:1955wgs84@EPSG:3857@png/{z}/{x}/{y}.png', {
    tms: true,
    transparent: true
    });       

    var map2015b = L.tileLayer('http://e1.onemap.sg/arcgis/rest/services/SM256WGS84/MapServer/tile/{z}/{y}/{x}');

    var map2007b = L.tileLayer('http://52.74.148.255/geoserver/gwc/service/tms/1.0.0/HistoricalMap:2007wgs84@EPSG:3857@png/{z}/{x}/{y}.png', {
    tms: true,
    transparent: true
    });

    var map1998b = L.tileLayer('http://52.74.148.255/geoserver/gwc/service/tms/1.0.0/HistoricalMap:1998wgs84@EPSG:3857@png/{z}/{x}/{y}.png', {
    tms: true,
    transparent: true
    });

    var map1988b = L.tileLayer('http://52.74.148.255/geoserver/gwc/service/tms/1.0.0/HistoricalMap:1988wgs84@EPSG:3857@png/{z}/{x}/{y}.png', {
    tms: true,
    transparent: true
    });

    var map1975b = L.tileLayer('http://52.74.148.255/geoserver/gwc/service/tms/1.0.0/HistoricalMap:1975wgs84@EPSG:3857@png/{z}/{x}/{y}.png', {
    tms: true,
    transparent: true
    });

    var map1969b = L.tileLayer('http://52.74.148.255/geoserver/gwc/service/tms/1.0.0/HistoricalMap:1969wgs84@EPSG:3857@png/{z}/{x}/{y}.png', {
    tms: true,
    transparent: true
    });

    var map1961b = L.tileLayer('http://52.74.148.255/geoserver/gwc/service/tms/1.0.0/HistoricalMap:1961wgs84@EPSG:3857@png/{z}/{x}/{y}.png', {
    tms: true,
    transparent: true
    });

    var map1955b = L.tileLayer('http://52.74.148.255/geoserver/gwc/service/tms/1.0.0/HistoricalMap:1955wgs84@EPSG:3857@png/{z}/{x}/{y}.png', {
    tms: true,
    transparent: true
    });        

   var offb = L.tileLayer('');        

        var baseLayers = {
        '2007': map2007b,
        '1998': map1998b,
        '1988': map1988b,
        '1975': map1975b,
        '1969': map1969b,
        '1961': map1961b,
        '1955': map1955b,
    'Clear' : offb 


    };

    var baseLayers2 = {
        '2007': map2007,
        '1998': map1998,
        '1988': map1988,
        '1975': map1975,
        '1969': map1969,
        '1961': map1961,
        '1955': map1955

    };

        var basemap = L.map('map1', {

            center: center,
            zoom: 12,
            minZoom: 11,
            maxZoom: 18,  
        fullscreenControl: true,
        layers: [map2015b]

        });

        basemap.attributionControl.setPrefix('<a href="http://www.onemap.sg" target="_blank">www.onemap.sg SLA::GEOSPATIAL DIVISION</a>');

        var overlaymap = L.map('map2', {
            center: center,
            zoom: 12,
            minZoom: 11,
            maxZoom: 18,             
            transparent: true
        });

    overlaymap.attributionControl.setPrefix('<a href="http://www.onemap.sg" target="_blank">www.onemap.sg SLA::GEOSPATIAL DIVISION</a>');

    overlaymap.addLayer(map2007);         
    L.control.layers(baseLayers).addTo(basemap);   
    L.control.layers(baseLayers2).addTo(overlaymap);           
    basemap.addLayer(offb);     
    basemap.sync(overlaymap);
    overlaymap.sync(basemap);
    var markers = L.markerClusterGroup({ animateAddingMarkers : true });

    //Create the opacity controls
    var higherOpacity = new L.Control.higherOpacity();
    basemap.addControl(higherOpacity);
    var lowerOpacity = new L.Control.lowerOpacity();
    basemap.addControl(lowerOpacity);
    var opacitySlider = new L.Control.opacitySlider();
    basemap.addControl(opacitySlider);
    currentname1='2007';

    overlaymap.on('baselayerchange', function(eventLayer) {     

      switch(currentname1)
      {

      case  '2007':
      {

        map.removeLayer(map2007);

        break;
      }
      case '1998': 
      {

        map.removeLayer(map1998);
        break;
      }

      case'1988': 
      {

        map.removeLayer(map1988);
        break;
      }
      case'1975': 
      {

        map.removeLayer(map1975);
        break;
      }

      case'1969':
      {       
        map.removeLayer(map1969);
        break;
      }
      case '1961': 
      {      
        map.removeLayer(map1961);
        break;
      }
      case '1955': 
      {

        map.removeLayer(map1955);
        break;
      }
      } 

      switch(eventLayer.name)
      {

      case  '2007':
      {
        currentname1='2007';
        opacitySlider.setOpacityLayer(map2007);

        break;
      }
      case '1998': 
      {
      currentname1='1998';
        opacitySlider.setOpacityLayer(map1998);
        break;
      }

      case'1988': 
      {
      currentname1='1988';
        opacitySlider.setOpacityLayer(map1988);
        break;
      }
      case'1975': 
      {
      currentname1='1975';
        opacitySlider.setOpacityLayer(map1975);
        break;
      }

      case'1969':
      {
      currentname1='1969';
        opacitySlider.setOpacityLayer(map1969);
        break;
      }
      case '1961': 
      {
      currentname1='1961';
        opacitySlider.setOpacityLayer(map1961);
        break;
      }
      case '1955': 
      {
      currentname1='1955';
        opacitySlider.setOpacityLayer(map1955);
        break;
      }
      }

    });

    basemap.on('baselayerchange', function(eventLayer) { 
     switch(currentname)
      {

      case  '2007':
      {        
        map.removeLayer(map2007b);

        break;
      }
      case '1998': 
      {

        map.removeLayer(map1998b);
        break;
      }

      case'1988': 
      {

        map.removeLayer(map1988b);
        break;
      }
      case'1975': 
      {

        map.removeLayer(map1975b);
        break;
      }

      case'1969':
      {

        map.removeLayer(map1969b);
        break;
      }
      case '1961': 
      {

        map.removeLayer(map1961b);
        break;
      }
      case '1955': 
      {

        map.removeLayer(map1955b);
        break;
      }
      } 

      switch(eventLayer.name)
      {

      case  '2007':
      {
        currentname='2007';
        opacitySlider.setOpacityLayer(map2007b);

        break;
      }
      case '1998': 
      {
      currentname='1998';
        opacitySlider.setOpacityLayer(map1998b);
        break;
      }

      case'1988': 
      {
      currentname='1988';
        opacitySlider.setOpacityLayer(map1988b);
        break;
      }
      case'1975': 
      {
      currentname='1975';
        opacitySlider.setOpacityLayer(map1975b);
        break;
      }

      case'1969':
      {
      currentname='1969';
        opacitySlider.setOpacityLayer(map1969b);
        break;
      }
      case '1961': 
      {
      currentname='1961';
        opacitySlider.setOpacityLayer(map1961b);
        break;
      }
      case '1955': 
      {
      currentname='1955';
        opacitySlider.setOpacityLayer(map1955b);
        break;
      }
      }

    });

    // Keep track of all draw objects
        var drawnItems = new L.FeatureGroup();
        basemap.addLayer(drawnItems);

        basemap.addControl(new L.Control.Draw({
            position: 'bottomleft',
            edit: { featureGroup: drawnItems }
        }));

        basemap.on('draw:created', function(event) {
            var draw_layer = event.layer;
            drawnItems.addLayer(draw_layer);
            markers.addLayer(draw_layer);
            var latlng = draw_layer.getLatLng().toString();
            latlng = latlng.substring(7,24);
            latlng = latlng.replace(" ","");
            var lat = latlng.substring(0, 7);
            var lon = latlng.substring(8, 16);

        //drawJson = draw_layer.toGeoJSON();
        drawJson =  JSON.stringify(draw_layer.toGeoJSON());
        console.log("Draw Json: " + drawJson);

           // plotOnMap(lat,lon);
        });

    basemap.addLayer(markers);

... //More Code

</script>
Best Answer

Related Solutions

[GIS] Styling Leaflet Maps

[GIS] Leaflet Maps Sync problem

Related Question
