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>
    <meta charset='utf-8' />
    <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' />
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }


<div id='map'></div>
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]



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


1 Answer 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? Apr 27, 2017 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, 2017 at 17:35
  • Glad to be of some help. If this solved your issue please "accept" this as your answer.
    – gisdude
    Apr 27, 2017 at 20:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.