Expanding or extending options or params for tileLayer

Question

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>

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

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