Leaflet L.geoJSON from a js variable geojson object not showing on map

Question

I create a js geojson object variable in my code. I would like to then create a layer based on the geojson variable and add to the map. I have tested the geojson object (When I stringify the geojson object the geojson maps correctly in various web geojson mappers). If I place geojson into a file with var geojson = {...} and then run. It appears on map correctly

My code runs without throwing errors, but the layer does not appear on map.

   //****  Ive tried several options same result 

   //    var json_Converted1JSON = new L.GeoJSON(geojson.returnJSON,{
   //   var json_Converted1JSON = new L.GeoJSON.AJAX([geojsonx], {
   //  var json_Converted1JSON = new L.GeoJSON.AJAX([geojson], {
      var json_Converted1JSON = new L.geoJSON.ajax([geojson], {
        dataType:'jsonp',
        pane: 'pane_Converted1',   

    style: doStyleConverted1,
   pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, geojsonMarkerOptions)

         },   
      onEachFeature: pop_Converted1,

.....

My geojson object and l.geoJSON layer variables show the following values:

Any suggestions welcome. Also, is there a way to add "var geosjon =" as a string to my js geojson variable object?

Geojson file string below:

{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.248391,44.13595817]},"properties":{"SiteId":"14159500","Name":"SOUTH FORK MCKENZIE RIVER NEAR RAINBOW, OR","Flow":"336","DateTime":"2018-04-02T08:00:00.000-07:00","PerFlow":8}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.3331192,44.16234819]},"properties":{"SiteId":"14162200","Name":"BLUE RIVER AT BLUE RIVER, OR","Flow":"107","DateTime":"2018-04-02T09:15:00.000-07:00","PerFlow":2}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.47062,44.1248487]},"properties":{"SiteId":"14162500","Name":"MCKENZIE RIVER NEAR VIDA, OR","Flow":"3490","DateTime":"2018-04-02T09:00:00.000-07:00","PerFlow":78}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.9196644,44.059348]},"properties":{"SiteId":"14164700","Name":"CEDAR CREEK AT SPRINGFIELD, OR","Flow":"21.2","DateTime":"2018-04-02T07:45:00.000-07:00","PerFlow":0}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.9645273,44.0712365]},"properties":{"SiteId":"14164900","Name":"McKENZIE RIVER ABV HAYDEN BR, AT SPRINGFIELD,OR","Flow":"4470","DateTime":"2018-04-02T09:15:00.000-07:00","PerFlow":100}}]}

Can you share your JSON? Perhaps try retrieving the JSON with a standalone AJAX request, and then visualizing it using L.GeoJson. Regarding your second question, to load a geojson that has "var geojson =" in your html, save the JSON as a JS (javascript) file, adding the "var geojson =" before your the actual JSON, and then load this file in your html like so: — 15Step, Apr 02 '18 at 13:36
If you are using leaflet-ajax plugin, the correct syntax is either var geojsonLayer = new L.GeoJSON.AJAX("geojson.json"); or var geojsonLayer = L.geoJson.ajax("geojson.json"). — TomazicM, Apr 02 '18 at 16:59

score 0 · Accepted Answer · answered Apr 02 '18 at 17:34

0

As pointed out by @TomazicM, assuming you are using the leaflet-ajax plugin, the problem is probably your syntax, which should be (assuming your json file is named "Rivers.json") and is in the same directory as your index.html:

var geojsonLayer = new L.GeoJSON.AJAX("Rivers.json");

This worked for me with the JSON you shared:

Regarding your second question, to load this json as a js variable object, do the following:

1) Open your JSON file and edit it, add the following to its very beginning: var geojson=

2) Save this as a new JavaScript file (*.js)

3) Load this in your html like so:

<script src="Rivers.js" type="text/javascript"></script>

4) You should then have access to the geojson variable in your JavaScript.

answered Apr 02 '18 at 17:34

15Step

2,430
1
13
28

Thanks for the feedback. Let me better explain my issue. I have dynamic json data that I get from another server. I have a function that builds a geojson structured js variable (contents of which provided above). I then want to use this as a layer with L.geoJson. – Enviro Apr 03 '18 at 10:29
Ive tried all syntax suggestions. layer does not appear but no errors. I think that maybe the L.geoJSON runs before the geojson variable is loaded. – Enviro Apr 03 '18 at 10:40
BTW: L.geoJSON works when I place geojson data into a js file and run. – Enviro Apr 03 '18 at 10:42
1

In that case, I suggest using an AJAX call separately (without the Leaflet plugin), and upon "success" call a separate function that builds your structured geojson and then finally adds it to the map with L.geojson. That way you'll make sure that the JSON variable is initialized. Have a look at the last answer here https://gis.stackexchange.com/questions/68489/loading-external-geojson-file-into-leaflet-map – 15Step Apr 03 '18 at 16:12
Thank you 15 Step. That was the trick. The map components were getting loaded before my geojson variable was. Moved code into the onload function and the geojson layer appears. – Enviro Apr 05 '18 at 16:51
Great! :) Can you accept my answer (green arrow)? So that people know that it worked for you – 15Step Apr 05 '18 at 19:09

Leaflet L.geoJSON from a js variable geojson object not showing on map

1 Answers1