QGIS Planet

Leaflet Day 14 - Image Overlay and Wrap-up

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.

Leaflet Day 13 - Styling with a Plugin

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:

Leaflet Day 12 - Create a Leaflet Map from QGIS

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.

Leaflet Day 11 - Plugins

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.

Leaflet Day 10 - Adding a Link to a Popup

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 21 var towns = L.

Leaflet Day 8 - Zoom to Feature

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:

Leaflet Day 9 - Calculating Distance with Turf.js

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:

Leaflet Day 5 - Working with Features

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.

Leaflet Day 3 - The Trail

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.

Leaflet Day 4 - Basemaps and Overlays

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.

Leaflet Day 7 - Coordinates

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.

Leaflet Day 2 - Adding a Marker

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.

Leaflet Day 6 - GeoPackage Layers

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.

Two Weeks of Leaflet - Day 1

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.

Two Weeks of Leaflet - Day 1

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.

Plugin Builder 3.1

We’ve released version 3.1 of the Plugin Builder for QGIS 3.x. This version contains a number of bug fixes and performance enhancements. Here are some of the changes included since version 3.0.3: Fix issue with reload on generated plugins Move dialog creation to run method to improve startup performance Move help file generation files to proper method Include missing tags file Attempt to compile resources.qrc when plugin is generated (requires pyrcc5 in path) Set deployment directory in Makefile based on user OS (pb_tool is recommended over make) Check for valid URL format for tracker and repository Compiling Resource File If you have the resource compiler pyrcc5 in your path, the resource file will be compiled automatically when you generate your new plugin.

The PyQGIS Programmer's Guide

The PyQGIS Programmer’s Guide is now available in both paperback and PDF. A sample chapter is also available for download. The book is fully compatible with the QGIS 2.x series of releases. See locatepress.com for details.

PyQGIS Programmer's Guide Available

The preview release of the PyQGIS Programmer’s Guide is now available for purchase from Locate Press.

QGIS Training Opportunities

We’re planning a couple of training classes for March: Introduction to QGIS Extending QGIS with Python Each is a one day class and we plan to run them back to back. If you are local or just want to come to Alaska in March for some spring skiing, northern lights viewing, or to experience the equinox, please hop over to GeoApt and let us know so we can plan accordingly.

Google Summer of Code 2010 - Quantum GIS

The application deadline for the Google Summer of Code is nearing (April 9). If you are interested in working on QGIS as part of GSOC and need ideas, please see Quantum GIS Wiki. We are waiting for your proposal!

  • Page 1 of 14 ( 271 posts )
  • >>

Back to Top

Sponsors