0

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:

geojson object

geojson layer

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: <script src="sample.js" type="text/javascript"></script> – 15Step Apr 2 '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 2 '18 at 16:59
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:

enter image description here

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.

  • 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 3 '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 3 '18 at 10:40
  • BTW: L.geoJSON works when I place geojson data into a js file and run. – Enviro Apr 3 '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 gis.stackexchange.com/questions/68489/… – 15Step Apr 3 '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 5 '18 at 16:51

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.