I have recently started a project to test out Leaflet. For those of you not familiar with Leaflet; It’s a Javascript framework for creating interactive maps using a variety of data. It’s open source and extendable through plugins.
For this project I created an interactive map of one of my favorite climbing areas Smith Rock. The map’s focus is to show the locations of various climbing areas and routes in those areas. While the information on this map is by no means complete, it serves for my goal of learning to use Leaflet. You can check out the full page map here.
The map itself contains two layers: the base tile layer and a vector layer containing the routes and climbing areas. I created the tile layer using Folding Map, another one of my projects that I hope to release soon. The tile layer uses vector data from OpenStreetMaps.org as well as traces from public domain aerial photos and data gathered from my handheld GPS unit. The vector layer contains the various climbing areas, routes and other interactive features. These were also collected from my GPS unit and some filled in from my memory.
The vector point data is stored in a js file with the each of the point types (sport routes, trad routes, etc) as a different variable. This works well because of the small about of points I have. If I were to scale up this project I would store the points in a database and write a script to output that information to GeoJSON so it can easily be imported into Leaflet.
I started with the basic leaflet map but I quickly decided that I wanted more functionality. So I added a few customizations: The climbing areas, marked in orange, automatically zoom in to the area’s routes when clicked, vector object have a viewable range based off of the map’s zoom level and the climbing areas have static labels to easily locate them.
The auto zooming feature was pretty simple to implement. Each of the climbing areas’ GeoJSON features has a property I added called clickZoomTo. This property holds an integer specifying the zoom level the map should be set to when that feature is clicked. The actual code to change to zoom is a function that overrides the CircleMarkers on click function with code to set the map’s view to the desired zoom and center on the CircleMarker’s coordinates.
To implement the the objects’ viewable range I created a function to add all of the GeoJSON generated points to a LayerGroup dependant on the current zoom level. Each of the GeoJSON features has a property maxZoom and minZoom that get compared against the map’s current zoom. If the current zoom is within the feature’s visible range it gets added to the LayerGroup. To keep objects from stacking up the LayerGroup is cleared every time the zoom changes.
Finally I wanted the various walls and climbing areas to have static labels. Because this feature does not exist by default in Leaflet I used the Leaflet.label plugin. After adding this plugin, I ran into a great deal of trouble trying to get static labels to show up for the map’s CircleMarkers. It turns out that Leaflet.label does not support labels for CircleMarkers. After searching for an alternative plugin and not finding one; I decided to fork the Leaflet.label plugin and add the functionality I was looking for. I have submitted a pull request, but as of the posting of this blog post it has not been accepted. Anyone can view my changed on my github.
All and all I am quite pleased with the Leaflet framework; it’s easy to use and well documented. I was able to get a basic map up an running in about 20 minutes and further customized in a few hours.
Update:
I have continued this project, making a more elaborate map that can be found here: http://topohawk.com/destination/Smith-Rock.