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, so I would be grateful for any help at all.

    $.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 -
  • 2
    where is the error? is the data in the correct SRID? does the console give errors? – ziggy Jul 9 at 20:01
  • so i don’t actually get an error, with this input it will display my .geojson, but as soon as i try to add a second, my map is just blank, and by blank i mean not even my basemap shows up – Jesse Warren Jul 9 at 20:02
  • 3
    There is some info missing here. I suppose code above works since there is no second GeoJSON beeing loaded. How does the nonworking code look like? What are those two JSONFILE-1.js and JSONFILE-1.js files? – TomazicM Jul 9 at 21:02
  • var geojsonLayer = new L.GeoJSON.AJAX("data/tur_route_geo.geojson" , {style:myStyle}); – Jesse Warren Jul 10 at 14:00
  • 1
    Please edit you your question with additional (non working) code. It does not help much as comment. – TomazicM Jul 10 at 14:39
1

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);
});
  • I gave this a try, but still no luck, i will edit to show the error message in the cmd. My map isnt dissapearing now but the data is still not loading into it. – Jesse Warren Jul 10 at 16:04
  • My geojsons are in the same coordinate system now so it cant be that – Jesse Warren Jul 10 at 16:52
  • OK, I'll modify my answer with complete code. Order of calls is important. – TomazicM Jul 10 at 17:22
  • Thank you, i appreciate it! Trying to learn as i go – Jesse Warren Jul 10 at 17:30
  • So i tried this out, i couldnt even get one geojson in with this method! – Jesse Warren Jul 10 at 17:50

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.