0

I'm having difficulty displaying a simple polygon in leaflet. I'm unsure if my syntax is bad or if I'm importing the geojson incorrectly. I'm using the ajax plugin from calvinmetcalf and add the js script in the head

<script src="leaflet.ajax.min.js"></script>

In the body I'm adding a base layer, specifying the polygon style, and then adding the polygon as the variable 'outline'

<body>
<div id='map'></div><script>
var map = L.map('map').setView([45.4,-112.02], 7);

// add tile base layer
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=......', {
    maxZoom: 18,
    id: 'mapbox.light'
}).addTo(map)
;

// specify polygon style for plotting
function polystyle(feature) {
return {
    fillColor: 'blue',
    weight: 2,
    opacity: 1,
    color: 'black',  //Outline color
    fillOpacity: 0.7
    };
}

// import geojson using ajax
var outline = new L.GeoJSON.AJAX("poly.geojson");      

// add outline to map
L.geoJSON(outline, {
    style: polystyle
}).addTo(map);

</script>
</body>

My poly.geojson file looks like this -- I've checked it through geojson.io and it plots fine there.

{"type":"FeatureCollection",
"crs":{"type":"name",
    "properties":{"name":"urn:ogc:def:crs:OGC:1.3:CRS84"}},
"features":[{"type":"Feature","id":0,"properties":{"Id":0},
    "geometry":{"type":"Polygon",
    "coordinates":[
        [[-112.8438,45.3956],
        [-112.4306,45.3956],
        [-112.4306,45.1617],
        [-112.8438,45.1617],
        [-112.8438,45.3956]]]
      }}]
}
  • Code look okay, try renaming geojson file to .json or .js, server may not know what to do with a geoJSON file. Here is an example that may help using JQuery instead of the plugin as an option.gis.stackexchange.com/questions/285866/… – Bill Chappell Jun 15 '18 at 19:18
  • gistechsolutions.com/leaflet/DEMO/basic/basic_Poly.html Working demo using JQuery. – Bill Chappell Jun 15 '18 at 20:15
  • Thanks Bill. I'll try using jquery based on your examples. Renaming didn't work. – user2059737 Jun 15 '18 at 20:32
  • Bill, so the demo looks great, but when I try to replicate it locally or on my google storage bucket it does not display the polygon. Are there additional local dependicies that I need to consider besides the basic html file and json file (usa.json)? – user2059737 Jun 15 '18 at 20:39
  • Are you using IIS or apache to server the webpages? If your using windows, see if you have c:\inetpub\wwwroot that's the localhost site for IIS. If so copy the HTML and JSON file there and you should be able to hit it as localhost/basic_Poly.html. If IIS is not setup, under programs/windows components/ you should see IIS (Internet Information services) . You need to serve the json data to the html file. In my example the HTML file and the JSON file have to be in the same folder. – Bill Chappell Jun 15 '18 at 20:46
0

It turns out my problem was related to Configuring Cross-Origin Resource Sharing (CORS)on the Google Cloud bucket. I needed to add the domains that hosted my source geojson file. I used this configuration documentation to update my cors info.

  • If this solved your issue, please accept your own answer as the solution. (Click the grey ✔ next to your answer.) – Stefan Dec 4 '18 at 8:23

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.