0

I am trying to display a pin on a map. It works fine if I code the GeoJSON data into the script of my file. If I try to insert the GeoJSON data via a user prompt, it doesn't work. The variable must be somehow different when it comes from a prompt then when it is coded in the file. What is the difference and how can I fix it?

GeoJSON pin

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -104.0625,
          39.36827914916011
        ]
      }
    }
  ]
}

HTML file

<html>
<head>
  <link href='http://api.tiles.mapbox.com/mapbox.js/v1.6.0/mapbox.css' rel='stylesheet' />
  <script src='http://api.tiles.mapbox.com/mapbox.js/v1.6.0/mapbox.js'></script>
  <style>#map-basic { position:fixed;right:5px; width:500pt; height:400pt; }</style>
</head>
<body><div id='map-basic'></div>

    <button onclick="myFunction()">Enter GeoJSON</button>

    <script>
    var map = L.mapbox.map('map-basic', 'examples.map-9ijuk24y').setView([37.8, -96], 4);

    function myFunction()
    {
    var standWKT = prompt("Enter GeoJSON");
    L.mapbox.markerLayer(standWKT).addTo(map);    
    }
    </script>

</body>
</html>
0

When you use the GeoJSON directly in your script, I guess you are setting it as an object directly.

In the code that you have posted, you are getting a string from the user, and then trying to use that as an input. You need an Additional step, where you convert it to an object.

Your code should be something like:

function myFunction()
{
    var standWKT = prompt("Enter GeoJSON");
    var geoJSONOBJ=JSON.parse(standWKT);
    L.mapbox.markerLayer(geoJSONOBJ).addTo(map); 
}

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.