QGIS turns twenty this year. I wrote the first lines of code in mid-February of 2002.

As many of you may know, the first time the code compiled and ran, it could do one thing:

• Connect to a PostGIS database and draw a vector layer.

This was the humble beginning of one of the most popular open source GIS applications. GRASS GIS is of course the grandaddy of open source GIS, but the 20th birthday of QGIS is a testament to its longevity and commitment of all those who have made it what it is today.

I did an analysis of the code using cloc, which counts the lines of code and displays a summary.

QGIS has had a lot of landmark events in it’s development. Here are just a few, not necessarily in chronological order: It compiled and ran on Linux, displaying data from a PostGIS database Successfully ported the code to Windows Successfully ported the code to Mac GRASS integration Added on the fly projection and coordinate system support Python support, allowing plugins Print composer (now layout) Installers everywhere! msi, dmg, osgeo4w, linux packages Migration of the code from CVS -> SVN - Git Processing toolbox The API-breaking migration from Python 2.

Years ago (2011), Nathan Woodrow did a visualization of code commits between QGIS 1.6 and 1.7 using Gource. I wanted to contrast the slow beginning of QGIS in 2002 with the flurry of activity in recent years. Gource can analyze a git repository and display the activity. The video below begins with the very slow start of QGIS development in 2002. Since displaying all of QGIS activity using Gource would result in a long video no one would want to watch, I took a look at the time period from 2002 to mid-2004, then jumped to June of 2021.

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: https://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 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.

In this post we’ll switch gears and install Leaflet locally, then add a layer from a GeoPackage file. Installing Leaflet Up until now we’ve been using a hosted version of Leaflet. In other words, each time we load the map, a request is made to fetch the Leaflet CSS and JavaScript. There are a couple of ways to install Leaflet: download it from the website or install with npm. In both cases you’ll need to move leaflet.

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.