2

I've searched far and wide and tried a number of different options but I cannot get more than one GeoJSON into my Leaflet web app. I can get one, and once I try anything else, the map itself will go blank!

Below is the code I have for the input of the first GeoJSON.

<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="JSONFILE-1.js" type="text/javascript"></script>
    <script src="JSONFILE-2.js" type="text/javascript"></script>
    <style>
    #my-map {
        width:2000px;
        height:1000px;
        left: -50%;
        top: 1%;
    }
    </style>
    </head>

    <body>
        <div id="my-map"></div>
    <script>
    window.onload = function () {
        var basemap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        });

        $.getJSON("turk.geojson", function(data) {

        var geojson = L.geoJson(data, {
          onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.Area_Name);
        }
        });

        var map = L.map('my-map')
        .fitBounds(geojson.getBounds());
    //    .setView([0.0,100], 2);



        basemap.addTo(map);
        geojson.addTo(map);
      });
    };
    </script>

Below is the line I tried to add, I've tried 5 different solutions with no success.

    $.getJSON("turk.geojson", function(data) {

    var geojson = L.geoJson(data, {
      onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.Area_Name);
    }
    });

    var myStyle = {
    "color": "#ff7800",
    "weight": 5,
    "opacity": 0.65
};

    var geojsonLayer = new L.GeoJSON.AJAX("data/tur_route_geo.geojson" , {style:myStyle});



    var map = L.map('my-map')
    .fitBounds(geojson.getBounds());
//    .setView([0.0,100], 2);



    basemap.addTo(map);
    geojson.addTo(map);
    geojsonLayer.addTo(map);
  });
};
</script>
</body>
</html>

#error 
127.0.0.1 - - [10/Jul/2019 10:03:39] "GET /tur_route_geo.geojson HTTP/1.1" 304 -
127.0.0.1 - - [10/Jul/2019 10:03:52] "GET / HTTP/1.1" 200 -
Improve this question
0

1 Answer 1

Reset to default
3

With the first GeoJSON you wait till data is loaded and then add it as layer. With the second GeoJSON you are missing this step so data is not available yet at the time when it's being added to the map.

Order of map objects creation is also important. First create map, then layers and then add layers to the map.

It should look something like this:

var map = L.map('my-map');
basemap.addTo(map);

$.getJSON("turk.geojson", function(data) {
  var geojson = L.geoJson(data, {
    onEachFeature: function (feature, layer) {
      layer.bindPopup(feature.properties.Area_Name);
    }
  });
  geojson.addTo(map);
  map.fitBounds(geojson.getBounds());
});

var myStyle = {
  "color": "#ff7800",
  "weight": 5,
  "opacity": 0.65
};

var geojsonLayer = new L.GeoJSON.AJAX("data/tur_route_geo.geojson", {style:myStyle});
geojsonLayer.on('data:loaded', function(){
  geojsonLayer.addTo(map);
});
Improve this answer
0

Your Answer

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

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