1 Introduction
1.1 What is a “Web Map”?
There are many ways to include maps in web pages. The two most common are as a static map or as a web map.
A static map is an image (for example, a .tiff, .png, or .jpg file) of a map. The user cannot change the scale or content. Static maps are useful for applications where interactivity isn’t needed. Images are easily rendered by web browsers and are fairly easy to add to web pages.
The term web map typically refers to a map embedded in a webpage. The map allows the user to interact with the data in some way. Often, the user can pan and zoom to adjust the view and click on data markers to learn more information about a location.
1.2 Why make a web map?
Web maps can be a powerful way to share spatial information with other people, especially when you expect the viewer to want to explore the data in different ways. Web maps allow the user to customize their experience in ways that a static map cannot.
Because of the interactivity, they can be a more engaging way for your audience to learn about a topic of interest and for you to offer a narative about the data.
Web maps can also be a way to interact with a community of interest, enabling a researcher to both share and collect spatial information from a community.
Web maps are good for data that is inherently dynamic, such as data with many factors or has a time component. Allowing the viewer to change what aspects of the data are shown on the map can help users explore complex data.
Web maps can be a fun way to interact with data.
Web maps offer novel and creative ways to visualize data.
Web maps are easy to share, modify, update, and document.
1.3 Examples
Examples of informative and engaging web maps abound on the internet. Here are a few examples that make use of Leaflet, the javascript library we’ll be working with today:
- UC Davis Potential COVID Workplace Exposures Map - UC Davis DataLab - An example with a dynamic timeline feature and data is updated daily from a web scraping script
- UK COVID-19 Predictions - Lancaster University Medical School - Includes a timeline animation and choice of visualizations of case incidence predictions
- OpenRailwayMap - Offers choice of data to visualize; data from a community-contributed dataset of railway infrastructure worldwide
- California Beach Plant Species Distributions - Michele Tobias - An example of linking navigation in multiple maps
- Numerical taxonomy of urban form in Amsterdam and Prague - Martin Fleischmann - a map supporting and academic manuscript
- NASA Curiosity Rover’s Location on Mars - NASA - An example of how Leaflet can be used with non-Earth coordinate systems and how the interface can be highly customized
1.4 Workflow
At first glace, building a web map might seem daunting, but we’ll take it one step at a time and build up to an engaging demonstration of what web maps can do. To make an online interactive web map, we’ll need to complete several steps. Typically these steps include:
- Make a webpage to contain the web map code (coding in HTML)
- Write the web map code and put it into the webpage (coding in javascript)
- Put the web page online
1.5 Leaflet
In today’s workshop, we’ll be using a javascript library called Leaflet to write the code that will make our web map. Leaflet is a popular open source javascript library specifically designed to build interactive web maps with a combination of data available online (like tile services for basemaps) and your own data. Leaflet is well-documented and has excellent tutorials to illustrate common tasks and innovative uses of the tool. In addition, there is an active community using this tool so there is ample support on online message boards and social media outlets.
You can also use leaflet with the R programming language through the leaflet package, which can be a handy way to add maps to your R Markdown files or Shiny applications. This, however cool, is not a part of today’s workshop.
1.5.1 Other Web Map Tools
Leaflet is not the only tool available to create web maps. There are many tools and services that you can use to make webs maps, each with their own advantages, required skill sets, and price points. If you’d like to explore other options, you might consider Carto, Mapbox, ArcGIS Online, Story Maps (of the Knight Labs [open source] or ESRI [proprietary] flavors), Mango Map, GIS Cloud, Google Maps, D3, Here Maps, Felt, or OpenLayers.
1.6 Workshop Data: UC Davis Campus Food
In today’s workshop, we’ll be working with the UC Davis Campus Food data set that was created by Naomi Kalman for this workshop. It shows places to get grab-and-go food on campus, in case you need to pick up a meal that is already prepared. Note: Naomi did this frequently and favors a tuna sandwich from the Silo Market. The data for this workshop is a subset of Naomi’s Google Map, downloaded on 2023-04-04 and used with permission from the author. For this workshop, DataLab staff have processed the data from its original KML format to create a .geojson file embedded in a javascript file (more details on this process and why we did it to come).