We end our series with a somewhat trivial, though interesting addition to our map and a special offer. Leaflet allows you to add an image that spans a specified region on the map. Here we add a picture of a little lost moose to the map. In this instance, it serves no purpose other than to show we can do it. The JavaScript code needed is: var imageUrl = "/images/calf_moose.png"; bounds = thetrail.

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.

In this post we’ll add a link to the towns popup that will display the satellite view on Google Maps. The API for working with Google Maps URLs can be found here: http://developers.google.com/maps/documentation/urls/guide. To add a link to the town name in the popup, we modify the JavaScript code that creates the towns layer: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 var towns = L.

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:

In this post, we’ll do a couple of things: Clean up the display of coordinate precision in our popups Add the current coordinates to the map as the mouse moves Coordinate Precision Display The current map displays the latitude and longitude with seven decimal places. This is more than we need to see when displaying information about locations: Fixing this is easy to do using the JavaScript function toFixed.