This article written by Paul Crickard III, the author of Leaflet.js Essentials, describes the use of shapefiles in Leaflet. It shows us how a shapefile can be used to create geographical features on a map. This article explains how shapefiles can be used to add a pop up or for styling purposes.

(For more resources related to this topic, see here.)

Using shapefiles in Leaflet

A shapefile is the most common geographic file type that you will most likely encounter. A shapefile is not a single file, but rather several files used to create geographic features on a map. When you download a shapefile, you will have .shp, .shx, and .dbf at a minimum. These files are the shapefiles that contain the geometry, the index, and a database of attributes. Your shapefile will most likely include a projection file (.prj) that will tell that application the projection of the data so the coordinates make sense to the application. In the examples, you will also have a .shp.xml file that contains metadata and two spatial index files, .sbn and .sbx.

To find shapefiles, you can usually search for open data and a city name. In this example, we will be using a shapefile from ABQ Data, the City of Albuquerque data portal. You can find more data on this at http://www.cabq.gov/abq-data. When you download a shapefile, it will most likely be in the ZIP format because it will contain multiple files.

To open a shapefile in Leaflet using the leaflet-shpfile plugin, follow these steps:

1. First, add references to two JavaScript files. The first, leaflet-shpfile, is the plugin, and the second depends on the shapefile parser, shp.js:

   <script src=”leaflet.shpfile.js”></script> <script src=”shp.js”></script>
2. Next, create a new shapefile layer and add it to the map. Pass the layer path to the zipped shapefile:

   var shpfile = new L.Shapefile(‘council.zip’); shpfile.addTo(map);

Your map should display the shapefile as shown in the following screenshot:

Performing the preceding steps will add the shapefile to the map. You will not be able to see any individual feature properties. When you create a shapefile layer, you specify the data, followed by specifying the options. The options are passed to the L.geoJson class. The following code shows you how to add a pop up to your shapefile layer:

var shpfile = new L.Shapefile(‘council.zip’,{
onEachFeature:function(feature, layer) { layer.bindPopup(“<a href=
‘”+feature.properties.WEBPAGE+”‘>Page</a><br>
<a href='”+feature. properties.PICTURE+”‘>Image</a>”); }});

In the preceding code, you pass council.zip to the shapefile, and for options, you use the onEachFeature option, which takes a function. In this case, you use an anonymous function and bind the pop up to the layer. In the text of the pop up, you concatenate your HTML with the name of the property you want to display using the format feature.properties.NAME-OF-PROPERTY. To find the names of the properties in a shapefile, you can open .dbf and look at the column headers. However, this can be cumbersome, and you may want to add all of the shapefiles in a directory without knowing its contents. If you do not know the names of the properties for a given shapefile, the following example shows you how to get them and then display them with their value in a pop up:

var holder=[]; for (var key in feature.properties){
holder.push(key+”: “+feature.properties[key]+”<br>”);
popupContent=holder.join(“”); layer.bindPopup(popupContent);
} shapefile.addTo(map);

In the preceding code, you first create an array to hold all of the lines in your pop up, one for each key/value pair. Next, you run a for loop that iterates through the object, grabbing each key and concatenating the key name with the value and a line break. You push each line into the array and then join all of the elements into a single string. When you use the .join() method, it will separate each element of the array in the new string with a comma.

You can pass empty quotes to remove the comma. Lastly, you bind the pop up with the string as the content and then add the shapefile to the map.

You now have a map that looks like the following screenshot:

The shapefile also takes a style option. You can pass any of the path class options, such as the color, opacity, or stroke, to change the appearance of the layer. The following code creates a red polygon with a black outline and sets it slightly transparent:

var shpfile = new L.Shapefile(‘council.zip’,{style:function(feature){
return {color:”black”,fillColor:”red”,fillOpacity:.75}}});

Summary

In this article, we learned how shapefiles can be added to a geographical map. We learned how pop ups are added to the maps. This article also showed how these pop ups would look once added to the map. You will also learn how to connect to an ESRI server that has an exposed REST service.

Resources for Article:

Further resources on this subject:

• Getting started with Leaflet [Article]
• Using JavaScript Effects with Joomla! [Article]
• Quick start [Article]