Leaflet.js and GeoJSON

12 Apr

Recently, I have been playing with a few different open source GIS tools and Leaflet.js has been one I really like – OpenLayers is next on my To-Do list. In this post, I will show a very simple example of loading GeoJSON point data in to a map and then adding a popup to the points. I modified the example from the Leaflet website, stripping out other ways of doing it and simplified the GeoJSON to one data object. I think for newbies like myself, this made it much easier to understand.

Here is a screen shot of the final map – 2 points with a popup.

The Final Leaflet.js Map.

The following is the GeoJSON I used – it contains 2 points.

GeoJSON file saved as .js

Now in the webpage, I create a Leaflet map and use the GeoJSON file. Here is the code:

Here is what’s happening:

Import the GeoJSON data: <script src=”MyGeoJSONforLightRail.js” type=”text/javascript”></script>

Create a place to put the map: <div id=”map” style=”width: 600px; height: 400px”></div>

Add a map named same as place we want to put it: var map = new L.Map(‘map’);

Add a base map, set the map zoom, add the base layer to the map:

var cloudmadeUrl = ‘http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/22677/256/{z}/{x}/{y}.png’, cloudmadeAttribution = ‘Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade’,  cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});

map.setView(new L.LatLng(39.747, -105), 14).addLayer(cloudmade);

Create and empty GeoJSON Layer: var lightRailGeojsonLayer = new L.GeoJSON();

Attach a popup: lightRailGeojsonLayer.on(“featureparse”, function (e) {
var popupContent = “<p>I started out as a GeoJSON ” + e.geometryType + “, but now I’m a Leaflet vector!</p>”;
popupContent += “<p>This is the default look of a GeoJSON Point.</p>”;
if (e.properties && e.properties.popupContent) {
popupContent += e.properties.popupContent;
}
e.layer.bindPopup(popupContent);
});

Note on Popup: The += following popupContent is appending to the string. You will see it 3 times.

Add the blank GeoJSON layer to the map: map.addLayer(lightRailGeojsonLayer);

Populate the layer with the .js file we included in the header (MyGeoJSONforLightRail.js):

lightRailGeojsonLayer.addGeoJSON(lightRailStop);

Note on populating: the (lightRailStop) is the name of the var in the MyGeoJSONLightRail.js file:

var lightRailStop = {
“type”: “FeatureCollection”,
“features”: [ blah blah blah…..

 

There you go. Change the GeoJSON to your file, modify the map setView, and edit the popup and you have your own map. For more examples go to the Leaflet page.

 

 

Advertisements

5 Responses to “Leaflet.js and GeoJSON”

  1. sdsdf April 27, 2012 at 5:10 am #

    what the hell are we supposed to do with jpgs?? hand copy everything to see a working example? retarded.

    • paulcrickard April 27, 2012 at 5:29 am #

      Sorry I did not do all your work for you. Next time I will make airplane noises as I spoon feed you.

  2. Oscar Bolaños May 13, 2012 at 10:28 pm #

    Hey, I’m actually doing something similar! I’m having one problem though. I want the popup to have some in-place-editable fields, but I don’t know how (or when) to active the javascript. Do you have any clue on how to do this?

    • paulcrickard May 13, 2012 at 10:45 pm #

      My JavaScript is not very good. My guess would be to treat the popup and fields as a form and have a JavaScript function to process on submit. If you get it working I would love to hear how.

      • Oscar Bolaños May 13, 2012 at 11:58 pm #

        Actually what I wanted to is to apply selectors to the created popup. I achieved this by listening to the popupopen event on the map.

        map.on(‘popupopen’, function(e) {});

        Inside that function the selectors referring to to the popup work correctly 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: