StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>leaflet supports GEOJSON, which makes it easy to display vector data with leaflet.</p> <p>See:</p> <p><a href="http://leaflet.cloudmade.com/examples/geojson.html" rel="nofollow">http://leaflet.cloudmade.com/examples/geojson.html</a></p> <p>The python <a href="http://pypi.python.org/pypi/geojson/" rel="nofollow">geojson</a> library supports geojson as well, so there's not a lot you need to do on the python side other than get it into the appropriate object and add any additional properties you want before serving the resulting JSON to leaflet.</p> <p>Just use a standard XMLHttpRequest() to get the JSON objects from whereever you're serving it.</p> <pre><code>function loadData(){ // retrieve and load features to a layer var xhrequest = new XMLHttpRequest(); xhrequest.onreadystatechange = function(){ if (xhrequest.readyState == 4){ if (xhrequest.status == 200){ var geojsonLayer = new L.GeoJSON(); geojsonLayer.on("featureparse", function(e){ if (e.properties && e.properties.name && e.properties.value){ var popupContent = "Whatever added properties you want to display"; e.layer.bindPopup(popupContent); }; // any styles you've added if (e.properties && e.properties.style && e.layer.setStyle){ e.layer.setStyle(e.properties.style); }; }); var layerItems = JSON.parse(xhrequest.responseText); // add features to layer for (i=0; i<layerItems.length;i++){ var geojsonFeature = layerItems[i]; geojsonLayer.addGeoJSON(geojsonFeature); }; map.addLayer(geojsonLayer); }; }; }; var url= "<url of where you are serving the GEOJSON data>"; xhrequest.open('GET', url, true); xhrequest.send(null); } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload