0

I tried to add Leaflet magnifier to my map and it is perfectly working on the base map, but it doesn't magnify or show my own data on the map. My own data is loaded as GeoJSON to map and its visible on the map, but the magnifier doesn't pick it. Here is my script:

//Begin function to create map

function createMap(){

    var tileUrl = 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.png';
    // but use two independant TileLayer objects
    var mapTiles = L.tileLayer(tileUrl),
        magnifiedTiles = L.tileLayer(tileUrl);

    var map = L.map('map', {
        center: [32.00983, 118.7969],
        zoom: 11,

    layers: [ mapTiles ]}
    );

    var magnifyingGlass = L.magnifyingGlass({
        layers: [ magnifiedTiles ]
}).addTo(map);
    getData(map);
};
//End function create map

//Begin function to load geoJson data file.....

function getData (map){
    $.getJSON("data/popular_POIs_AOIs_corrected.geojson",function(data){

    // Add GeoJSON layer to the map once the file is loaded

        var dataLayer = L.geoJson(data,{

        // Change Leaflet default markers to circles
            pointToLayer: function(feature, latlng) {
                return new L.CircleMarker(latlng, {
                  radius: 5,
                  color: "red",
                  weight: 1
                });
              },
            // Adding popup to POIs
            onEachFeature:function(feature, layer){
                layer.bindPopup(feature.properties.name);
                //Event listeners to open popup on hover and fill panel on click
                layer.on({
                mouseover: function(){
                    this.openPopup();
                },
                mouseout: function(){
                    this.closePopup();
                }
            }).addTo(map);
                console.log(feature.properties)
            }
        });

        //create filter by using leaflet default filter function
        var overlayMaps = {
            "PointOfInterest": dataLayer
        };      
        L.control.layers(null, overlayMaps).addTo(map);

        //create search operator
        createSearchOperator(map, data);

    });
};
  • Where is your GeoJSON layer? It has to bo included in magnifyingGlass layers. – TomazicM May 3 at 6:25
  • I have another function for that. My data is loaded through another function "getData" Did you mean to call the GeoJSON function inside the magnifyingGlass? – Abdullah May 3 at 11:54
  • Yes, it should be something like this: var magnifyingGlass = L.magnifyingGlass({layers: [magnifiedTiles, magnifiedGeoJSONLayer ] – TomazicM May 3 at 12:33
  • Can you please edit you question and add the whole of GeoJSON layer code? – TomazicM May 3 at 15:03
  • I cant add it as a comment as its doesn't allow me because its too long and I am not sure why I cant edit my questions to show them as a script. Unless I ask it all together again. – Abdullah May 3 at 15:32
0

If you want to add GeoJSON layer to L.magnifyingGlass group of layers, it's definition has to be accessible within createMap() function.

Since it has to be defined twice, once for regular map and once for magnifier, you have two possibilities: you can actually load GeoJSON twice to two different layers (like you did for base map), or use leaflet-clonelayer plugin (see https://github.com/jieter/leaflet-clonelayer).

With usage of leaflet-clonelayer plugin it should go something like this:

function getData (map){
  $.getJSON("data/popular_POIs_AOIs_corrected.geojson",function(data){
     var dataLayer = L.geoJson(data,{
    ...
  });
  return dataLayer;
};

function createMap(){
  var tileUrl = 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.png';
  var mapTiles = L.tileLayer(tileUrl),
  magnifiedTiles = L.tileLayer(tileUrl);

  var map = L.map('map', {
    center: [32.00983, 118.7969],
    zoom: 11,
    layers: [mapTiles]
  });

  var dataLayer = getData(map);
  var magnifiedDataLayer = cloneLayer(dataLayer);

  var magnifyingGlass = L.magnifyingGlass({
    layers: [magnifiedTiles, magnifiedDataLayer]
  }).addTo(map);    
};

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.