[GIS] Add more than one layer of GeoJSON data to Leaflet

filtergeojsonleaflet

This is my code for loading one layer of .geojson data to Leaflet. The data is basically in the form of markers and it's demonstrating different location in Saudi Arabia. It's saved as "saudi_location.geojson". And my code succeeds in showing this layer on the map.

Say I have another .geojson file called "saudi_airports.geojson" and I want to load it to the map too… and I want the user to be able to toggle between the two layers, maybe check/uncheck a box to show/hide the airports layer or the location layer.

How can this be achieved?

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <style>
            #map {
                width: 800px;
                height: 600px;
            }
        </style>
</head>
<body>

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

    <script>

        var url = 'saudi_location.geojson';  // my GeoJSON data source, in the same folder as my HTML file.
        //var map = L.map('map').setView([37.52715,-96.877441], 1);
//
//      var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{
//                  attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});


    const map = L.map('map').setView([37.52715,-96.877441], 1);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '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>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'your.mapbox.access.token'
    }).addTo(map);
        var  geojsonMarkerOptions = {
                        'radius':6,
                        'opacity': .5,
                        'color': "red",
                        'fillColor':  "blue",
                        'fillOpacity': 0.8
                    };

        function forEachFeature(feature, layer) {

        var popupContent = "<p>This is <b>" +
                                    feature.properties.NAME + "it's of the type " +
                                    feature.properties.PLACE + "</br>" +
                                    '<a href="'+ feature.properties.Website +'" target="_blank">Website</a></p>' ;

                            if (feature.properties && feature.properties.popupContent) {
                                popupContent += feature.properties.popupContent;
                            }
                                layer.bindPopup(popupContent);
                    };


                    //var bbTeam = L.geoJSON(null, {onEachFeature: forEachFeature, style: style});
            var bbTeam = L.geoJSON(null, {
                            onEachFeature: forEachFeature,
                            pointToLayer: function (feature, latlng) {
                                return L.circleMarker(latlng, geojsonMarkerOptions);
                            }
                      });

                    // Get GeoJSON data and create features.
            $.getJSON(url, function(data) {
            bbTeam.addData(data);
            });

            bbTeam.addTo(map);

        </script>
    </body>
</html>

Best Answer

Here is a simple demo, data from 2 different GeoJSON files. http://www.gistechsolutions.com/leaflet/DEMO/sports/index2.html

It's just like your example, but it has 2 layers. Basically you have 2 urls, one for each source.

and a simple layer control to turn them on or off. https://leafletjs.com/reference-1.5.0.html#control-layers

Related Question