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.
Best Answer
As posted by @Kyros the issue was resolved with the following code:
-- Not a good way to code but it works: