I have experience working in python but limited knowledge of Java Script.

I need help loading in a external Geojson located on my computer into a leaflet map. I read that I need to use a technique called JSONP in order to bypass cross-domain securities. This is where I am stuck. I got a map working by hard-coding a single data point, into the map, but I still have hundreds more so that is not a repeatable and viable option.


This is the URL form of the geoJSON. I don't explicitly want to use the URL form as this is just a sample data set as I work through this problem. I have another data set that is only in JSON form. I will have to convert it to geoJSON before I can use in leaflet. If I am wrong in this knowledge, loading a json file into leaflet is my question.



optional json (bringing this into leaflet is my end goal if it is possible)


This is my working code

It has the map pulled up with the single point loading in as described above.

  <title>A Leaflet map!</title>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <script src="/js/leaflet-0.7.2/leaflet.ajax.min.js"></script>
    #map{ width: 1000px; height: 600px; }

  <div id="map"></div>


  var map = L.map('map',{center: [35, -121],zoom: 7});

  L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', {attribution: 'Tiles © Esri — Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri'}).addTo(map);

  var aa = {
      "type": "Feature",
      "properties": {
      "name": "Coors Field"
      "geometry": {
          "type": "Point",
          "coordinates": [-121, 35]

  new L.GeoJSON(aa).addTo(map);


I have tried several tutorials on jsonp, but I just don't quite get the process yet.

  • At no point are you loading the file... – Alex Leith Mar 6 '17 at 21:04

You can use this plugin to make it easy: https://github.com/calvinmetcalf/leaflet-ajax

Or follow the Leaflet Docs example: http://leafletjs.com/examples/geojson/

Or take a looks at this example that I wrote a few years ago, doing something slightly complex: https://github.com/gccgisteam/maps-website/blob/master/graffiti.html#L103

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