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>

    <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>

            #map {
                width: 800px;
                height: 600px;

    <div id="map">


        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'
        var  geojsonMarkerOptions = {
                        '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;

                    //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) {



bumped to the homepage by Community yesterday

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.


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

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.