Tools for Web Mapping

There are a variety of tools for making web maps. Some require you engage with code while others provide simple drag-and-drop interfaces. In this workshop, you will be shown how code works together to power a web map, and be guided through customizing given code, called “boilerplate code”, to make a map of your own. However, it’s useful to know about some alternatives that don’t require any code! Outlined below are different tools/platforms for web mapping. Each option is evaluated for its relative affordances and limitations, and resources for continued learning more are listed.

If, after this workshop, you are unsure whether web mapping itself best suits your project goals, check out our spatial stories workshop to see other output format options. You can also email library.gis@ubc.ca with questions, or book a 1:1 consult with the geospatial team here.

On this page:

Google MyMaps

We recommend Google as a web mapping platform 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:


Google Advantages and Disadvantages

  • 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 to use it. Google Cloud is only free for 90 days, after which you will be charged $200 monthly. In our opinion, beyond the simple drag-and drop visualizations offered by MyMaps, it is recommended to invest your time and energy in learning a free and open-source option like uMap or Leaflet (detailed below).

Resources for Google MyMaps

  • For a brief demonstration on setting up a web map with Google MyMaps, see the nested subpage, MyMaps demo.

uMap

uMap is a free and open-source platform that allows you to create web maps using OpenStreetMap (OSM) data. You can then embed these maps into an existing website, or simply share the link to your final map with collaborators and audiences. With uMap, you can choose from a variety of basemaps, and even upload and add data layers of your own! uMap is very easy to use, and has ample customization options. 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.

See full screen

Resources for uMap

  • For a demonstration on setting up a web map with uMap, see the nested subpage, MyMaps demo.

QGIS to Web Map plugin

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. Below is an example qgis2web made map created by the workshop author for BC Disaster Resilience Research Network:

qgs2web Advantages and Disadvantages

  • However, you will need somewhere to store your map and map data, such as Github or a local server.
  • Can edit leaflet directly in code editor on your computer once downloaded.

Resources

  • See the Research Common’s workshop on QGIS Plugins for a guided tutorial on how to not only make a webmap using the qgis2web plugin, but also host it online.

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. Check out the Research Common’s workshop on ArcGIS Online for more.

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.

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

Leaflet

Leaflet Logo

Leaflet is a set of instructions that your web browser or mobile device uses to display maps and let you interact with them. For example, when you double click your mouse on a map, leaflet tells your browser to zoom in. Leaflet defines the style of your map and includes things like zoom controls, attribution links, pop-ups, colors for markers and more. 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 is open source, free, and hugely customizable. And, because of this, Leaflet is widely used. There are lots of alternatives to Leaflet, like for example Google Maps, which you need an API key to use.

As Code

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. And because Leaflet is open-source, the code is hugely customizable and extensible. This means you can re-mix the code all you want — which you will do in this workshop. Here are some examples of Leaflet-based plugins to give you some idea of the variety of added functionality that comes from the community of developers.

In a Browser

Take a look at this basic Leaflet map example. You can zoom in, pan around, etc. It’s meant to be displayed in your internet browser or a mobile application, so it loads and responds to you quickly.

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?

Options for Narrative Mapping

Finally, if you are looking to make more of a multi-media narrative, either including different kinds of maps or a string of multimedia displayed over a single web map, we recommend ArcGIS Storymaps or KnightLab StoryMaps. Check out the Research Common’s workshop on Creating StoryMaps with ArcGIS Online for an introduction to making StoryMaps with the free version. Knightlab StoryMap offers a free and open-source product to visualize spatial stories. If you’re not sure which of these tools is for you, we’ve detailed further explanation here under Assembling Resources in our Spatial Stories workshop.

Table of contents

View workshop content in GitHub

Loading last updated date...