3

I am trying to sync 3 maps (BaseMapd, overlayMap, tiledMap) side by side however these maps don't sync together immediately but it works sometimes during different multiple browsers (Chrome, Firefox & IE) of refreshes.

Most of the problem is from Chrome. I realize that cache is one of the issues that I have faced. When I uploaded the files into a webserver, it loads perfectly. Soon after, it has sync problem once again.

requirejs.config({
    'baseUrl': 'lib/',
    'paths': {
        'leaflet.wms': 'leaflet.wms' ,//.js'
        'L.Map.Sync': 'L.Map.Sync' //.js'
    }
});

define(['leaflet', 'leaflet.wms','L.Map.Sync'],
    function(L,wms,sync) {

var BaseMapd   = basecreateMap('base-map');
var overlayMap = createMap('overlay-map', true,'2007');
var tiledMap   = createMap('tiled-map', true,'1988');

BaseMapd.sync(overlayMap);
BaseMapd.sync(tiledMap);
overlayMap.sync(BaseMapd);
overlayMap.sync(tiledMap);
tiledMap.sync(BaseMapd);
tiledMap.sync(overlayMap);

}

Then I use another method from MapBox (below), and these 3 maps sync perfectly. When I interact with 'BaseMapd', the non-active maps ('overlayMap' and 'tiledMap') are not auto-re-rendered.

Afterwards, I click on the 'overlayMap' to interact and move around. However, the non-active maps ('BaseMapd' and 'tiledMap') are not auto-re-rendered. And it just goes on for the same thing with 'tiledMap'.

function(L,wms,sync) {

var BaseMapd   = basecreateMap('base-map');
var overlayMap = createMap('overlay-map', true,'2007');
var tiledMap   = createMap('tiled-map', true,'1988');

// when either map finishes moving, trigger an update on the other one.
BaseMapd.on('moveend', follow).on('zoomend', follow);
overlayMap.on('moveend', follow).on('zoomend', follow);
tiledMap.on('moveend', follow).on('zoomend', follow);

var quiet = false;
function follow(e) {
    if (quiet) return;
    quiet = true;
    if (e.target === BaseMapd) sync(overlayMap, e);
    if (e.target === BaseMapd) sync(tiledMap, e);
    if (e.target === overlayMap) sync(BaseMapd, e);
    if (e.target === overlayMap) sync(tiledMap, e);
    if (e.target === tiledMap) sync(BaseMapd, e);
    if (e.target === tiledMap) sync(overlayMap, e);
    quiet = false;
}

// sync simply steals the settings from the moved map (e.target)
// and applies them to the other map.
function sync(map, e) {

    map.setView(e.target.getCenter(), e.target.getZoom(), {
        animate: false,
        reset: true
    });

}

I would like to know how to resolve these 3 maps to sync immediately when the user loads on the browser.

  • Could you move your edit to a response so that the rest of the community can see your question as answered? :) – iriberri Jun 8 '15 at 17:31
  • 1
    @kyros Koh please take your update (Resolved)to an answer. – Mapperz Jun 8 '15 at 17:41
  • Thanks Kyros, your code helped me in... gis.stackexchange.com/questions/69829/… – Aaron Gong Sep 10 '15 at 14:18
  • @AaronGong Ah, I hope that it helps! You're welcome. I also working closely with SLA by using their OneMap Services. :) Let me know if you need any assistance, I can try to help you out. – Kyros Koh Sep 11 '15 at 15:19
1

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.