jieter / Leaflet.Sync

Synchronized view of two maps.
http://jieter.github.io/Leaflet.Sync/examples/dual.html
BSD 3-Clause "New" or "Revised" License
235 stars 53 forks source link

could not sync #23

Closed soolengtan closed 9 years ago

soolengtan commented 9 years ago

hi saw ur contribution on l.map.sync. Tried it. i encounter a problem that my map is not able to sync. possible to advise. thanks. here is my code using requirejs

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');

overlayMap._initSync(tiledMap); tiledMap._initSync(overlayMap); BaseMapd._initSync(overlayMap); BaseMapd._initSync(tiledMap); overlayMap._initSync(BaseMapd); tiledMap._initSync(BaseMapd);

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

function basecreateMap(div) { // Map configuration var map1 = L.map(div);

map1.setView([1.3, 103.7],14);

var basemaps = {
    'Basemap': basemap(),

};

 basemaps['Basemap'].addTo(map1);

// L.control.layers(basemaps).addTo(map);

return map1;

}

function createMap(div, tiled,name) { // Map configuration var map = L.map(div,{maxZoom: 17, minZoom: 12,});

map.setView([1.3, 103.7],14);

// Add WMS source/layers
var source = wms.source(
    "http://52.74.150.232:8080/geoserver/gwc/service/wms",
    {
        "format": "image/png",
        "transparent": "true",
        "srs":"EPSG:4326",
        "attribution": "<a href='http://www.onemap.sg'>www.onemap.sg SLA::GEOSPATIAL DIVISION</a>",
        "tiled": tiled
    }        
);

var layers = {
    '2007': source.getLayer("historymap:2007wgs84"),
    '1998': source.getLayer("historymap:1998wgs84"),
    '1988': source.getLayer("historymap:1988wgs84"),
    '1975': source.getLayer("historymap:1975wgs84"),
    '1969': source.getLayer("historymap:1969wgs84"),
    '1955': source.getLayer("historymap:1955wgs84"),

};

 layers[name].addTo(map);

L.control.layers(layers).addTo(map);

return map;

}

function basemap() {

var mqcdn = "http://e1.onemap.sg/arcgis/rest/services/SM256WGS84/MapServer/tile/{z}/{y}/{x}";

return L.tileLayer(mqcdn, {
    'type': 'map',
    'attribution': "<a href='http://www.onemap.sg'>www.onemap.sg SLA::GEOSPATIAL DIVISION</a>",
});

}

function blank() { var layer = new L.Layer(); layer.onAdd = layer.onRemove = function() {}; return layer; }

// Export maps for console experimentation return { 'maps': { 'base': BaseMapd, 'overlay': overlayMap, 'tile': tiledMap }

};

});

jieter commented 9 years ago

Please use triple backticks around your code to format it and setup a minimal example in jsfiddle to demonstrate the problem....