Skip to content

Instantly share code, notes, and snippets.

@geog4046instructor
Last active April 25, 2017 02:55
Show Gist options
  • Save geog4046instructor/e6fb196efa8d9a40f5863288f7269d40 to your computer and use it in GitHub Desktop.
Save geog4046instructor/e6fb196efa8d9a40f5863288f7269d40 to your computer and use it in GitHub Desktop.
Leaflet - Add a popup to GeoJSON features
/* This example demonstrates how to create a popup for a GeoJSON layer
* "YOUR_FIELD_NAME" should be the name of an attribute of the GeoJSON layer.
* Any string can be used in bindPopup(), including HTML.
*/
function createPopup(feature, layer) {
// code here will run when a feature on the map is clicked.
layer.bindPopup(feature.properties.YOUR_FIELD_NAME) // show the clicked feature's attribute value in a popup
// some other code can go here, like adding the layer to a layer group so it can be shown on a control
}
// Use jQuery's getJSON method to fetch the data from a URL
jQuery.getJSON( "http://example.com/layer1.geojson", function( json ) {
// Use Leaflet's geoJSON method to turn the data into a feature layer
L.geoJSON( json, {
onEachFeature: createPopup // When each record of data is converted into a feature, call a function to add a popup
}).addTo( mymap )
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment