Link Search Menu Expand Document
Spatial Stories

Resources for web mapping

This page inventories and evaluates a variety of platforms, tools, and resources for web mapping.

On this page:

Google MyMaps

We recommend Google Maps for its Google MyMaps service only. With Google MyMaps, you create simple maps with drop pin locations or imported data layers, like the below map:

While the Google Maps Platform offers a panoply of mapping tools including dynamic maps, you must be very careful about surreptitious charges. For example, while the embed maps API is free with unlimited usage, you must sign up for Google Cloud. Google Cloud is only free for 90 days then will charge you $200 monthly. In our opinion, it is recommended to invest your time and energy in learning a free and open-source option like uMap or Leaflet.

uMap

uMap is a free and open-source platform that allows you to create webmaps using OpenStreetMap (OSM) data. You can then embed these maps into a website, or simply share the link with collaborators and audiences. You can choose from a variety of basemaps, and even upload and add data layers of your own! uMap is very easy to use, but has little room for customization. It is an entirely web-based interface and requires no prior expertise.

The below map was created in 5 minutes using data downloaded from Vancouver open data portal.

Leaflet

Leaflet consists of JavaScript and CSS code libraries which power the ways your web browser interprets and interacts with geospatial data & displays colors and style. For instance, when you double click a map to zoom in, Leaflet is at work. When you add data to your map, Leaflet assigns it a default color. Leaflet is made up of only 38kb of Javascript, so it is really fast and lightweight - meaning browsers don’t have to work very hard to load it.

Leaflet Advantages ⇡

  • Leaflet is free and open source. For this reason, Leaflet is widely used.
  • As an open-source code library, Leaflet is hugely customizable. This means you can re-mix the code all you want.
  • Leaflet is beginner friendly, though you do need to interact with code in order to build your map.
  • Hugely customizable. Leaflet-based plugins to give you some idea of the variety of added functionality that comes from the community of developers.
  • In Leaflet, you can change the CRS of your map whereas the projection is set in Google Maps and Mapbox.

Leaflet Disadvantages ⇣

  • You’ll need to work with code in a code editor. This can introduce a semi-steep learning curve, but you can truly create a basic webmap in a few hours with no prior knowledge.
  • You’ll need a place to store your map and map data. Github can work. Think about how you’ll be displaying your end product. Will it be embedded on a website?

Resources for working with Leaflet

Code/documentation for making dashboards components

The below maps displayed earlier on in this workshop were all made using leaflet:

Mapbox

Mapbox is a robust Geospatial Software As A Service (saas) for developers, and includes products such as toolkits for mobile app development, navigation, web maps, and data management. Mapbox’s service model is based on a paid subscription, but they offer a free service tier for those interested in using Mapbox products for learning. You will be asked to put in credit card information, however. If this is your first time hearing about Mapbox, How Mapbox Works provides a great introduction.

Mapbox Advantages ⇡

  • Platform for custom styling basemaps
  • Variety of different services, including both code and web-based graphical user interface for web mapping

Mapbox Disadvantages ⇣

  • Mapbox is proprietary, and the functions are not transposable between other webmapping libraries like Leaflet
  • The Free Tier has limitations that might be of concern to you if you intend to make a map that will be widely viewed and cited
  • Though you can make maps in Mapbox Studio, developing more custom webmaps requires working with code. Even then, Leaflet can often be more customizable because it is open-source and there is more code out there to draw from.

Resources for working with Mapbox

Below is an example of a cluster map made with mapbox:

Jawg

With Jawg, you can create simple reference maps powered by leaflet with just a few clicks. No tinkering, no coding, just copy paste your new map into a website! Jawg has a handful of basemaps to choose from, and you can even create your own style. The free tier offers quite a lot and is likely enough to get you started. If you want your webmap to stand alone rather than be embedded in a website, look into GitHub Pages. The Research Common’s workshop website on git and github may be helpful to get started.

Map Libre

If you are already code savvy, MapLibre may be of interest to you. In their own words,

MapLibre GL JS is an open-source library for publishing maps on your websites or webview based apps. Fast displaying of maps is possible thanks to GPU-accelerated vector tile rendering.

It originated as an open-source fork of mapbox-gl-js, before their switch to a non-OSS license in December 2020. The library’s initial versions (1.x) were intended to be a drop-in replacement for the Mapbox’s OSS version (1.x) with additional functionality, but have evolved a lot since then.

Scroll down on this page for more information, or view their Github documentation.

QGIS –> Web

If you’re familiar with QGIS, there’s actually a nifty plugin for turning your QGIS map into an interactive webmap, either powered by Leaflet or OpenLayers. This plugin is aptly called qgis2web. You just install the plugin, and then ensure your Field visibilities are set under Layer Properties. However, you will need somewhere to store your map and map data, such as Github or a local server. Below is an example qgis2web made map created by the workshop author for BC Disaster Resilience Research Network:

ArcGIS Online

ArcGIS Online or (AGOL) is Esri’s online platform for making dynamic and interactive maps. If you are faculty or student at UBC, you can learn more about obtaining access here.

ArcGIS Online Advantages ⇡

  • Allows you to load and save data online, as well as create dynamic maps with customizable basemaps, popups, and interaction

ArcGIS Online Disadvantages ⇣

  • ArcGIS Online is proprietary, meaning it is not free to use
  • Licensing is a hassle, and collaboration can only occur between people who both own an active license

Felt

Felt is a web-based platform for creating aesthetic, interactive maps and dashboards with your data. They offer a free tier that allows you to make and share unlimited webmaps, as well as automatic 14-day free trial of middle tier. Checkout their gallary to get inspired by their examples.

Map tiles

Map tiles are squares of geographic data that are loaded to your frame of view whenever you zoom or pan your map. Each tile is 256px by 256px (traditionally a .png image at roughly 20-40kb each), making them quick to load over an internet connection. These tiles provide a geographic reference for other data layers that you might add later (we’ll get to that in a minute).

There are some useful map tile services you should know of:

  • Maptiler
  • Open Map Tiles offers open-source maps made for self-hosting, including free open street map vector tiles
  • Basemap providers for leaflet maps. You’ll notice some maps require an API key or access token to use. Often you can create a free account on any of these platforms, like Jawg maps, and then use there basemaps.
  • Stamen maps recently moved to Stadia Maps. If you want to use their maps you just have to make an account to get access now