0

So I am using the side-by-side plugin on this repository https://github.com/digidem/leaflet-side-by-side. It allows me to add two different tile layers to the map and splits the screen in two. However, the thing is, when I try adding a GeoJSON to the map, it add it to both tiles. There is no way to add to one tile at a time. So, I was wondering if there was a way to create a way to possibly pass in an empty GeoJSON layer as a param or option for the L.tileLayer that adds it to the selected layer. Because I know Leaflet has a method that allows the user to add an empty GeoJSON layer to the map and they can add layers to the map later on, so I was thinking maybe if I could add an empty GeoJSON layer to either tiles instead of the map, I could easily target which one I want and have it show on the map.

There are other implementations I have seen out there using panes but they don't seem to work.

Below is the script I am trying to use to achieve the purpose. Also attached is a picture of what happens when I plot the geojson of some country. It gets plotted on both tiles

<script>
    var mymap = L.map('mapid').setView([0, 0], 1);
    
    //left map
    var attribution1 = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
    var tileUrl1 = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var tiles1 = L.tileLayer(tileUrl1, {attribution: attribution1}).addTo(mymap);
   // var leftLayer = L.geoJSON().addTo(mymap);
   
    //right map
    var attribution2 = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
    var tileUrl2 = 'https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png';
    var tiles2 = L.tileLayer(tileUrl2, {attribution: attribution2}).addTo(mymap);
    //var rightLayer = L.geoJSON().addTo(mymap);

    var swipe = L.control.sideBySide(tiles1, tiles2)
    swipe.addTo(mymap);
    $(document).ready(function(){
        var url;
        //store reference to previously plotted geojson
        var arr = [null];
        //based on selected options from drop down menu, retrieve respective geojson
        $('select[name="ISO"]').change(function(){
            url = "https://www.geoboundaries.org/data/geoBoundaries-3_0_0/"+ $("#ISO").val() + "/" + $("#ADM").val() + "/geoBoundaries-3_0_0-"
                + $("#ISO").val() + "-" + $("#ADM").val() + ".geojson";
        });

        $('select[name="ADM"]').change(function(){
            url = "https://www.geoboundaries.org/data/geoBoundaries-3_0_0/"+ $("#ISO").val() + "/" + $("#ADM").val() + "/geoBoundaries-3_0_0-"
                + $("#ISO").val() + "-" + $("#ADM").val() + ".geojson";
        });
        
        $("#map").click(function(){
            // loading GeoJSON file unto mapL.map('mapid').setView([0, 0], 1);
            $.getJSON(url,function(data){
                //if there is no stored reference to a previous 
                //plotted geojson, map
                if(arr[0] === null){
                  map(data);
                }
                //else if there is a stored reference to a previous
                //geojson, remove it before plotting the next one
                else{
                    var removeLayer = arr[0].remove();
                    arr[0] = null
                    map(data);
                }
            });
        });

        //function to plot geojson file
        function map(data){
            var datalayer = L.geoJSON(data).addTo(mymap);
            //Zoom to layer
            mymap.fitBounds(datalayer.getBounds());
            //store reference to plotted geojson
            arr[0] = datalayer;
        }
    });
    
</script>

enter image description here

Edit 1: If you want to see full code look at my git repo here: github.com/oforiaddaejnr/ADM_Comparison/tree/master/Slider . Thanks!

Edit 2: The answer given wasn't exactly what I was looking for as a solution, but it did enlighten me on a few things, hence that's why I marked it

  • 1
    Coding question on GIS SE site should include existing code of what has been tried so far, otherwise question is most likely to be closed. Please edit your question and add relevant existing code. – TomazicM Aug 8 at 9:39
  • Thanks. Code was just added – user966615 Aug 8 at 15:50
1

To achieve desired effect, you can use solution from answer to this question: Leaflet side by side plugin is not working with imageOverlay. Since there is no L.imageOverlay layer here, you even don't have to modify plugin code.

You simply have to create two map panes (for example named 'left' and 'right') and use them correspondingly when creating left and right layers and overlays.

Your code could look something like this:

var mymap = L.map('mapid').setView([0, 0], 1);

mymap.createPane('left');
mymap.createPane('right');

//left map
var attribution1 = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
var tileUrl1 = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var tiles1 = L.tileLayer(tileUrl1, {pane: 'left', attribution: attribution1}).addTo(mymap);
var leftLayer = L.geoJSON({pane: 'left'}).addTo(mymap);

//right map
var attribution2 = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
var tileUrl2 = 'https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png';
var tiles2 = L.tileLayer(tileUrl2, {pane: 'right', attribution: attribution2}).addTo(mymap);
var rightLayer = L.geoJSON({pane: 'right'}).addTo(mymap);

EDIT: The above code works only for left GeoJSON, but not for the right one. Actually it can never work for both sides sides simultaneously. Why? One map pane is always above the other. If no zIndex is assigned to map pane, the one declared later will be above the one declared before. In the case of explicitly declared zIndex, pane with higher index will be above the other one.

So correct example of a code, where placing is independent of pane creation order and GeoJSON layer is in the right pane, would be:

var mymap = L.map('mapid').setView([0, 0], 1);

var leftPane = mymap.createPane('left');
var rightPane = mymap.createPane('right');

leftPane.style.zIndex = 230;
rightPane.style.zIndex = 220;

//left map
var attribution1 = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
var tileUrl1 = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var tiles1 = L.tileLayer(tileUrl1, {pane: 'left', attribution: attribution1}).addTo(mymap);

//right map
var attribution2 = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
var tileUrl2 = 'https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png';
var tiles2 = L.tileLayer(tileUrl2, {pane: 'right', attribution: attribution2}).addTo(mymap);
var rightLayer = L.geoJSON({pane: 'right'}).addTo(mymap);
| improve this answer | |
  • I already tried that solution, but I tried yours just in case. It didn't work. I get an error that says "Map container is already initialized" – user966615 Aug 9 at 20:49
  • I tested the above code and it works. Without seeing/trying your code it's impossible to say what goes wrong in your case. – TomazicM Aug 10 at 5:16
  • This is a link to my repo that has the full code github.com/oforiaddaejnr/ADM_Comparison/tree/master/Slider – user966615 Aug 15 at 2:19
  • As I wrote, for me it works. See your example with panes added working on JSFiddle. jsfiddle.net/TomazicM/vfd1gaqs (plugin leaflet-side-by-side is included in the code). – TomazicM Aug 15 at 11:13
  • Thanks a lot! I'll incorporate it into my code and let you know how it goes – user966615 Aug 15 at 17:16

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.