3

I'm trying to use the side-by-side plugin downloaded from https://github.com/digidem/leaflet-side-by-side. I want to create side-by-side GeoJSON layers to compare the cancer rates between the two years and to show the legend for each layer, but I don't know what am I doing wrong because only one layer is displayed on both sides or they overlap. I guess I should change some of the code in the js file, but I don't know what.

<!DOCTYPE html>
<html>
<head>

    <title>Cancer Rates Iowa</title>

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui' />
    <script src='http://cdn.leafletjs.com/leaflet/v1.3.1/leaflet.js'></script>
    <script src="leaflet-side-by-side.js"></script>
    <link href='http://cdn.leafletjs.com/leaflet/v1.3.1/leaflet.css' rel='stylesheet' />
    <script src="Cancer_IA.geojson"></script>
    <style>
         body {
            padding: 0;
            margin: 0;
            }

        #map{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .legend {
            text-align: left;
            line-height: 40px;
            color: #555;
        }
        .legend i {
            width: 40px;
            height: 40px;
            float: left;
            margin-right: 8px;
            opacity: 0.7;
        }
    </style>

</head>
<body>
    <div id="map"></div>
    <script>

        var map = L.map('map').setView([42.0667, -93.4], 8);

        var basemap = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
        subdomains: 'abcd',
        maxZoom: 19
        }).addTo(map);

        function getColor(d) {
            return d > 545.0 ? '#191710' :
                    d > 497.0  ? '#4c4730' :
                    d > 462.0  ? '#665e40' :
                    d > 406.0  ? '#7f7650' :
                    d > 316.0  ? '#b2a570' :
                                '#e5d590';
        }
        function style(feature) {
            return {
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.7,
                fillColor: getColor(feature.properties.IA_2000_Ra)
            };
        }

        var osmLayer = L.geoJson(cancer, {
            style: style,

        }).addTo(map);

        var legend = L.control({position: 'bottomright'});
        legend.onAdd = function (map) {

            var div = L.DomUtil.create('div', 'info legend'),
                grades = [316.0, 406.0, 462.0, 497.0, 545.0],
                labels = [],
                from, to;

                for (var i = 0; i < grades.length; i++) {
                    from = grades[i];
                    to = grades[i + 1];

                    labels.push(
                        '<i style="background:' + getColor(from + 1) + '"></i> ' +
                        from + (to ? '&ndash;' + to : '+'));
                }

            div.innerHTML = labels.join('<br>');
            return div;
        };

        legend.addTo(map);

        function getColor1(d) {
            return d > 574 ? '#4D0026' :
                    d > 504.0  ? '#48006a' :
                    d > 446.0  ? '#dd3497' :
                    d > 353.0  ? '#fcc5c0' :
                    d > 308.0  ? '#fef3f2' :
                                '#fff7f3';
        }

        function style1(feature1) {
            return {
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.7,
                fillColor: getColor1(feature1.properties.IA_2016_Ra)
            };
        }

        var stamenLayer = L.geoJson(cancer, {
            style: style1,
        }).addTo(map);

        var legend1 = L.control({position: 'bottomleft'});

        legend1.onAdd = function (map) {
            var div1 = L.DomUtil.create('div', 'info legend'),
                grades1 = [308.0, 353.0, 446.0, 504.0, 574.0],
                labels1 = [],
                from1, to1;

                for (var i = 0; i < grades1.length; i++) {
                    from = grades1[i];
                    to = grades1[i + 1];

                    labels1.push(
                        '<i style="background:' + getColor1(from + 1) + '"></i> ' +
                        from + (to ? '&ndash;' + to : '+'));
                }

            div1.innerHTML = labels1.join('<br>');
            return div1;
        };
        legend1.addTo(map);


        L.control.sideBySide(stamenLayer, osmLayer).addTo(map);

    </script>

</body>
</html>

enter image description here

Improve this question
2
  • Solution to this question gis.stackexchange.com/questions/333229/… should also work in your case.
    – TomazicM
    Dec 15, 2019 at 17:35
  • Thank you for your response. It helped me a lot. Below I pasted the complete code. The Side-by-side plugin now works!
    – musedint
    Dec 17, 2019 at 4:52

1 Answer 1

Reset to default
5

enter image description here
Indicated in Leaflet side by side plugin is not working with imageOverlay I changed getContainer() method with getPane() method. This method returns the HTML element representing the named pane on the map (https://github.com/digidem/leaflet-side-by-side/issues/4). Then in the HTML document createPane() method was added to create two map panes named ‘left’ and ‘right’. enter image description here Finally, GeoJSON layers were created with L.geoJson() from GeoJSON format data. With “pane:’left’”, “pane:’right’ option and add.To() layers were then displayed to the created panes: enter image description here

<!DOCTYPE html>
    <html>
    <head>

        <!--A title-->
        <title>Cancer Rates Iowa</title>

        <!-- referencing the leaflet files and county document  -->
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset=utf-8 />
        <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui' />
        <script src='http://cdn.leafletjs.com/leaflet/v1.3.1/leaflet.js'></script>
        <script src="leaflet-side-by-side.js"></script>
        <link href='http://cdn.leafletjs.com/leaflet/v1.3.1/leaflet.css' rel='stylesheet' />
        <script src="Cancer_IA.geojson"></script>
        <style>
             body {
                padding: 0;
                margin: 0;
                }

            #map{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            .info {
                padding: 6px 8px;
                font: 14px/16px Arial, Helvetica, sans-serif;
                background: white;
                background: rgba(255,255,255,0.8);
                box-shadow: 0 0 15px rgba(0,0,0,0.2);
                border-radius: 5px;
            }

            .legend {
                text-align: left;
                line-height: 40px;
                color: #555;
                background-color: #fff;
                padding: 20px;
                border-radius: 20px;
            }
            .legend i {
                width: 40px;
                height: 40px;
                float: left;
                margin-right: 8px;
                opacity: 0.7;
            }
        </style>

    </head>
    <body>
        <div id="map"></div>

        <script>

            var map = L.map('map').setView([42.0667, -93.4], 8);
            map.createPane('left');
            map.createPane('right');

            var baseMap = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
                subdomains: 'abcd',
                maxZoom: 19,
                layers: baseMap
            });

            var baseMapIndex = {
                "BaseMap": baseMap
            };

            layerControl = L.control.layers(baseMapIndex).addTo(map);

            function getColor(d) {
                return d > 545.0 ? '#4D0026' :
                        d > 497.0  ? '#48006a' :
                        d > 462.0  ? '#dd3497' :
                        d > 406.0  ? '#fcc5c0' :
                        d > 316.0  ? '#fef3f2' :
                                    '#fff7f3';
            }
            function style(feature) {
                return {
                    weight: 2,
                    opacity: 1,
                    color: 'white',
                    dashArray: '3',
                    fillOpacity: 0.7,
                    fillColor: getColor(feature.properties.IA_2000_Ra)
                };
            }
            function highlightFeature(e) {
                var layer = e.target;

                layer.setStyle({
                    weight: 5,
                    color: '#666',
                    dashArray: '',
                    fillOpacity: 0.7
                })

                if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
                    layer.bringToFront();
                }

                info.update(layer.feature.properties);
            }
            function resetHighlight(e) {
                overlay1.resetStyle(e.target);
                info.update();
            }

            function onEachFeature(feature, layer) {
                layer.on({
                    mouseover: highlightFeature,
                    mouseout: resetHighlight,

                })
                layer.bindPopup('<b>County:' + feature.properties.COUNTY + '<br/><br/>'+
                    'Cancer Rate for 2000: </b><br>'
                    + feature.properties.IA_2000_Ra + '<br/><br/>'+
                    'Cancer Rate for 2016: </b><br>'
                    + feature.properties.IA_2000_Ra);
            }

            var overlay1 = L.geoJson(cancer, {
                style: style,
                pane: 'left',
                onEachFeature: onEachFeature
            }).addTo(map);

            var legend = L.control({position: 'bottomleft'});
            legend.onAdd = function (map) {

                var div = L.DomUtil.create('div', 'info legend'),
                    grades = [316.0, 406.0, 462.0, 497.0, 545.0],
                    labels = ['<strong> Cancer Rate, 2000 </strong>'],
                    from, to;

                    for (var i = 0; i < grades.length; i++) {
                        from = grades[i];
                        to = grades[i + 1];

                        labels.push(
                            '<i style="background:' + getColor(from + 1) + '"></i> ' +
                            from + (to ? '&ndash;' + to : '+'));
                    }

                div.innerHTML = labels.join('<br>');
                return div;
            };

            legend.addTo(map);

            function getColor1(d) {
                return d > 574 ? '#4D0026' :
                        d > 504.0  ? '#48006a' :
                        d > 446.0  ? '#dd3497' :
                        d > 353.0  ? '#fcc5c0' :
                        d > 308.0  ? '#fef3f2' :
                                    '#fff7f3';
            }

            function style1(feature1) {
                return {
                    weight: 2,
                    opacity: 1,
                    color: 'white',
                    dashArray: '3',
                    fillOpacity: 0.7,
                    fillColor: getColor1(feature1.properties.IA_2016_Ra)
                };
            }
            function highlightFeature1(e) {
                var layer = e.target;

                layer.setStyle({
                    weight: 5,
                    color: '#666',
                    dashArray: '',
                    fillOpacity: 0.7
                })

                if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
                    layer.bringToFront();
                }

                info.update(layer.feature.properties);
            }
            function resetHighlight1(e) {
                overlay2.resetStyle(e.target);
                info.update();
            }

            function onEachFeature1(feature, layer) {
                layer.on({
                    mouseover: highlightFeature1,
                    mouseout: resetHighlight1,

                })
                layer.bindPopup('<b>County:' + feature.properties.COUNTY + '<br/><br/>'+
                    'Cancer Rate for 2016: </b><br>'
                    + feature.properties.IA_2016_Ra + '<br/><br/>'+
                    'Cancer Rate for 2000: </b><br>'
                    + feature.properties.IA_2000_Ra);
            }

            var overlay2 = L.geoJson(cancer, {
                style: style1,
                pane: 'right',
                onEachFeature: onEachFeature1
            }).addTo(map);


            var legend1 = L.control({position: 'bottomright'});

            legend1.onAdd = function (map) {
                var div1 = L.DomUtil.create('div', 'info legend'),
                    grades1 = [308.0, 353.0, 446.0, 504.0, 574.0],
                    labels1 = ['<strong> Cancer Rate, 2016 </strong>'],
                    from1, to1;

                    for (var i = 0; i < grades1.length; i++) {
                        from = grades1[i];
                        to = grades1[i + 1];

                        labels1.push(
                            '<i style="background:' + getColor1(from + 1) + '"></i> ' +
                            from + (to ? '&ndash;' + to : '+'));
                    }

                div1.innerHTML = labels1.join('<br>');
                return div1;
            };
            legend1.addTo(map);

            L.control.sideBySide(overlay1, overlay2).addTo(map);    
        </script>

    </body>
    </html>
Improve this answer
1
  • If you found solution, please add some explanation why it didn't work before and how you corrected it. This can then help others with similar problems.
    – TomazicM
    Dec 17, 2019 at 6:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.