Resources for web mapping
At a glance,
- what it is; useful for xyz
- difficulty/learning curve
- access/ open source or proprietary for all, give
- examples (more than in determine output section?)
Resources
- links to download tool
- links to task specific plugins
- links to tutorials and demos
Table of contents
Leaflet
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.
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.
- leaflet you can change the CRS whereas in Mapbox, always wgs 84 web mercator.
Leaflet Advantages ⇡
Leaflet Disadvantages ⇣
Resources for working with Leaflet
- Intro to Leaflet workshop
Plugins/tutorials for basic thematic mapping
code for making dashboard / etc.
- adding side panels/menus to leaflet map
- another side bar example
- overlay layers control
-
time sldier
- Leaflet Tutorials
- UBC Research Commons’ Intro to Leaflet Workshop
Plugins –> extended functionality - makes leaflet hugely customizable
- Leaflet plugin database
- EG create a side panel (scroll down to see example)
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.
Note you can make maps with code or without. custom basemap styles etc. Fancier leaflet… maybe best to just do leaflet.
Mapbox Advantages ⇡
Mapbox Disadvantages ⇣
Resources for working with Mapbox
- UBC Research Commons’ Intro to Mapbox workshop
- [Intro to mapbox studio]
- Choropleth maps with Mapbox
- Heatmaps with Mapbox Studio
- Dot Density maps with Mapbox
- Graduated Symbol maps with Mapbox
QGIS to Web
- QGIS plugin for turning your qgis map into an interactive webmap powered by leaflet
- will need somewhere to store map –> github etc.
could include example of qgis to web map under resources.
embed example….
ArcGIS Online
ArcGIS Online Advantages ⇡
ArcGIS Online Disadvantages ⇣
Google Maps
Google Maps Advantages ⇡
- easy, straightforward, free
Google Maps Disadvantages ⇣
Felt
what its good for
felt has a free tier
map libre
https://maplibre.org/
uMap
uMap “uMap lets you create maps with OpenStreetMap layers in a minute and embed them in your site.” is open source, free to use. can add data layers.