2

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.

Data

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.

geojson

http://oceanview.pfeg.noaa.gov/erddap/tabledap/erdCalCOFIcufes.geoJson?longitude%2Clatitude%2Csardine_eggs&cruise=%22201504%22&sardine_eggs%3E=0&.draw=markers&.marker=5%7C5&.color=0x000000&.colorBar=%7C%7C%7C%7C%7C&.bgColor=0xffccccff

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

https://coastwatch.pfeg.noaa.gov/erddap/griddap/jplMURSST41mday.json?sst[(2017-02-16):1:(2017-02-16T00:00:00Z)][(32):1:(38)][(-126):1:(-116)]

This is my working code

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

<html>
<head>
  <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>
  <style>
    #map{ width: 1000px; height: 600px; }
  </style>
</head>
<body>

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

  <script>

  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);

  </script>
</body>
</html>

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

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

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

Improve this answer

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