Webmapping

There are plenty of options when it comes to development libraries for creating webmaps. We'll only focus on a handful of them, which are Open Source and relatively easy to use.

Leaflet.js

LeafletJS is a very powerful, yet easy library that allows creating webmaps with just a few lines of code. It plays very well with mobile devices and different screen sizes. It has a very good documentation and some very handy examples.

Leaflet is quite popular, and it works as the base for other libraries that add functionality on top of it. It also has a growing ecosystem of plugins, developed by the community that add or improves the core functionality.

OpenLayers

OpenLayers was one of the first options out there, already a few years ago. It's part of the OSGeo foundation and it offers a lot of functionality, and integration with other geospatial products.

As complexity and functionality grows, things become a bit more difficult to do with this library.

OpenStreetMap

OpenStreetMap is a collaborative map of the world. We could understand it as "the Wikipedia of maps".

It's not exactly a development library, but it is really useful a as global geospatial database containing information about streets, buildings, roads, national parks, points of interests and much more.

Checkout the Humanitarian OpenStreetMap Team which is a 100% volunteer international team dedicated to humanitarian action and community development. They organize "mapathons" all around the world when there is a humanitarian crisis, to map the land and help the NGOs deployed in the field.

MapboxGL.js and Mapbox.js

Mapbox has its own alternatives for webmapping. They're designed to work with the rest of the Mapbox ecosystem.

CARTO.js and CARTO VL

CARTO also has its own libraries for loading data layers and create interactive webmaps and visualizations, working along with the rest of the CARTO stack.

CARTO.js for raster tiles and CARTO VL for vector tiles.

Exercise

We're going to create a basic webmap using LeafletJS. In the exercise, there are links to live examples, where you can edit the code and see how the map changes, without fear of breaking anything ;)

Feel free to explore, change parameters and try and customize the example on your own.