0

I am very new to javascript and html. I am trying to display a web map, which works, but my issue is trying to figure out how to add a local geojson file to my html code. Here is what I have so far:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.js'></script>
    <script src="/javascript_codes/operatingZone.js"></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>

<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibW1ja2VldmVyOTIiLCJhIjoiY2oxemQwOWl5MDF6ODJxazIxdXh4ajJpayJ9.7HndcHlQ1y3y8XAVmP7WKg';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    zoom: 12,
    center: [-97.749291, 30.285157]

$.getJSON('operatingArea.js').addTo(map)
});
</script>

</body>
</html>

And here is where the issue is trying to display the Geojson:

$.getJSON('operatingArea.js').addTo(map)
1

$.getJSON() is JQuery. Read this documentation on how to use it. You need to provide an URL to get a .json file and a function on what to do with that file on the success or error of its return.

  • Even if the json file is stored on my computer in a folder? – Michael McKeever Apr 27 '17 at 16:55
  • Yes. The file will need to live on the server your code is running on though. Here is a related answer. If this is not what you want then I'd look into a file upload form. – gisdude Apr 27 '17 at 17:35
  • Glad to be of some help. If this solved your issue please "accept" this as your answer. – gisdude Apr 27 '17 at 20:19

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.