Today we’ll take a look at another plugin—one that allows us to interactively change they style of features on our map: Leaflet.StyleEditor. This illustrates how we can customize our map by changing styles on the fly and also serves as a starting point for even more customization. Installing and Referencing the Plugin The web page for the plugin provides information on installing it. This requires getting the css, js, and image files in the proper location, then referencing them in our HTML file:
Today we’ll use the qgis2web plugin to export from QGIS to Leaflet. The QGIS project, a location map for the third (in progress) Life on the Alaska Frontier novel, looks like this: Installing qgis2web The qgis2web plugin is installed like any other. Click on the Plugins->Manage and Install Plugins... menu item, click Not installed, and then find qgis2web in the list. Click the Install plugin button to complete the install.
At its core, Leaflet is designed to be lightweight. That being said, there are hundreds of third-party plugins available to extend and enhance the functionality of your web maps. Today we’ll illustrate adding a plugin to our map from Day 6. The L.Control.ZoomBar plugin adds a custom zoom control that allows us to draw a box around the area we want to zoom to, as well as adding a Home button to return to the initial map view.
Today we’re going to use Turf.js to calculate the distance between any two points along the trail. Turf.js is billed as providing “Advanced geospatial analysis for browsers and Node.js.” The distance calculated is a straight line (“as the crow flies”) distance rather than actual trail miles. Including Turf.js To calculate the distance we need to include Turf.js. Rather than install it locally, just add this line to the head of your HTML:
In this post we’ll add a zoom button to pan the map to one of the towns in the trail stops layer. Adding a Dropdown Box and Button The first thing to do is add the select element and a button to the HTML: <select id='zoombox'> </select> <input type="button" id="zoomTo" value="Zoom to town"> We’ll populate the options for the select element using the town GeoJSON. Creating a Dictionary and Populating the Select Box Next we loop through the towns in the GeoJSON layer and create a dictionary that maps the town name to its data, then add each as an option to a select element:
Today we’ll add towns along the trail route that are mentioned in the novels. I hesitate to call them towns, because in 1902, many of them consisted of a view indigenous people and sometimes a roadhouse. The method to add these locations will be to add a GeoJSON layer and loop through each town, adding a marker and popup with some info. The Data The data for the locations is from the GNIS database for Alaska, containing over 35,000 locations.
Today we’ll add some basemaps and a couple of controls to our map. So far we’ve been using OpenStreetMap as our back drop. There are a couple of tile servers that will give us a little more of a “back in the day” look. We’ll also add attribution to the map so we give credit where credit is due, as well as a scale bar. Complete code for the map can be viewed at the bottom of this post.
Background In 1902 the only way from the port of Valdez to the Fortymile gold fields was a nearly 400 mile trail through the Alaska wilderness. The Valdez-Eagle trail plays a key role in novels two and three. Adding the Trail to a Leaflet Map To add the trail to our map, we will convert it from a shapefile to GeoJSON. There is more than one way to do this—you could use ogr2ogr, but we chose to use QGIS, since it would not only convert it, but transform the coordinate system at the same time.
I’m starting off slow, so today we’ll add a marker with some extra features. Since the map from yesterday is already centered on the big earthquake, lets add a marker there. Adding a Marker To create a marker, Leaflet uses the L.marker class: var earthquakeMarker = L.marker([61.346, -149.955]); This creates the marker, but it needs to be added to the map: earthquakeMarker.addTo(map); This gives us: Good so far, but looking at the map tells us nothing about the marker.
Background We at Locate Press have been working on a new book: Leaflet Cookbook, by Numa Gremling. The book is chock-full of over 300 pages of recipes and information to get the most of your web maps. The book is content complete and available as a preview. I’ve dabbled in Leaflet in the past, but only scratched the surface. So, I’ve decided to spend two weeks starting from the ground up and create a decent web map.