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.
Updated (Resolved) -- Not a good way to code but it works:
أكثر...
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.
Updated (Resolved) -- Not a good way to code but it works:
أكثر...