Webmapping for beginners

Making Maps with JavaScript

By Niene Boeijen

Workshop & Presentation

workshops.this-way.nl

Niene Boeijen

I am a web
cartographer

I make maps

online

interactive

Back-end to front-end

Implement all through code

NieneB.nl

Some things I make:

Tools I use:

• QGIS
• PostgreSQL, PostGIS
• GeoServer, MapServer, Mapproxy, Tegola
• JavaScript: Leaflet.js, OpenLayers, MapboxGL.js, D3.js
• Ubuntu, Linux command line tools
• React, Vue, Hugo , Reveal
• Open data, OSM, BAG, BGT, Top10NL etc.

Presentation Today:

Workshop Leaflet

Goal of today!

At the end of this workshop, you will have your own web page with an interactive map! Including custom data and different background maps, of the area you want to show! Your web page will be hosted on Github, so you can immediately share your progress with all your family and friends!

Beginners

For beginners means: if you have NO knowledge of JavaScript, HTML, CSS and Leaflet.js this workshop will help you get started!

What is going on?

1. You need to be able to find, manipulate, and store spatial and non-spatial data.
2. You need to be able to design a functional and attractive cartographic representation of that data as well as the UI controls to operate it
3. You need to be able to implement that design through code

source

Getting my map to the web?

What is a web map?

Analogue paper maps

google.com/maps

openstreetmap.org

Tiled web map

a little History

2004 - Endoxon found a way for quick online mapping!

map.search.ch

2005 Google Maps took over!

The solution?

Tiles!

Tiles

All tiles size 256x256 pixels

Placed in a grid, sharing boundaries

Seamless map

All these little tiles load way faster than one big map!

We call this slippy maps

Zoom levels

Each zoom level has its own set of tiles!

Styling & Serving tiles

Styling tiles

styling per zoom level

Lot's and lot's of geo data!

SLD & Mapfile styling..

Disadvantages Raster Tiles

No interaction with objects

No information available about objects

Multiple visualizations = multiple tile sets

elaborate & hard styling syntax

Vector Tiles

the newest technology!

From Raster to Vector

Vector Tile

Advantages Vector tiles

Rendering is done on client side

Custom styles on client side

Small tile size. Fast

High resolution.

Direct access to feature information.

WebGL

the rendering happens in your browser with the help of your device's graphics processing unit (GPU).

+ rotating and tilting the map (3D)

+ smooth/infinite zooming

WebGL is widely supported in modern browsers

Standards

Based on the binary protocal buffer (.pbf) from Google.

Standard already used by Esri.

Web Mercator projection, Google tiling scheme.

Formats

.mvt - .pbf

.mbtiles

Want to know more?

About Vector-tiles from Mapbox

MapboxGL.js

Open map tiles alternative

Cartiqo our own alternative

So how do I make a Web Map?

Making a Web Page

New to HTML & CSS?

Start with Making a web page

Or use Code Academy

JavaScript!

Puts it all together,

Tiles, content, interaction

JavaScript Library

Including a JavaScript library in your code is like copying and pasting someone else's code into yours. You have access to everything in that library.

In our case, it's a bunch of cool tools to make web maps and give them familiar functionality.

Web Map Building blocks

JavaScript Libraries for Mapping

• OpenLayers
• Leaflet.js
• D3.js
• Turf.js
• ArcGIS Javascript API
• MapboxGL.js
• MapLibre
• CARTO
• HERE Maps
• Google Maps API

When to use what?!

Leaflet.js for simple light weight raster web maps

OpenLayers for more elaborate raster web map with more functionality

ArcGIS Javascript API if your client uses ESRI software

D3.js for data driven info graphics

MapboxGL.js for vector tiles

MapLibre for vector tiles open source alternative

Mapbox Studio for easy cloud solutions

CARTO and buisness intellegence & cloud solutions

HERE Maps and Google Maps API for navigation, Google services and commercial goals

Turf.js for geospatial computation in the browser

Main considerations

Open source vs closed source

Amount of Interactivity or GIS functionality

Amount of data to show

Raster vs Vector

projection

Let's look at:

Leaflet for Raster tile maps

MapboxGL.js / MapLibre for Vector Tile maps

D3.js for geo data visualizations

Leaflet.js

An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps

simplicity, performance and usability

Developed by: Vladimir Agafonkin.

Weighing about 38 KB of JS.

Has all the mapping features most developers ever need.

Can be extended with Plugins

Well documented

What Leaflet does not do:

Provide data for you.

Provide the basemap.

Its not GIS

Leaflet is a framework

Raster tile base map providers

• Overview Leaflet providers
• PDOK Basemaps
• Stamen maps
• map5.nl
• Maptiler

Nationaal geo register

Leaflet quickstart

                                                          let map = L.map('mapid').setView([51.505, -0.09], 13);
                                                          
                                                          L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                                                            attribution: '© OpenStreetMap contributors'
                                                          }).addTo(map);
                                                        

Adding data layers

                                                      // ADD a WMS layer
                                                        let cbs = L.tileLayer.wms('https://geodata.nationaalgeoregister.nl/wijkenbuurten2018/wms', {
                                                          'layers': 'cbs_buurten_2018',
                                                          'styles': 'wijkenbuurten2018:wijkenbuurten_thema_buurten_gemeentewijkbuurt_percentage_eenpersoonshuishoudens',
                                                          'srs': 'EPSG:28992',
                                                          'format': 'image/png',
                                                          'transparent': true,
                                                          'opacity': 0.5
                                                        }).addTo(map);
                                                      

Layers

Base Layer

Raster

Data Layer / Feature Layer

Vector

Projections

Proj4Leaflet

Proj4js

Use EPSG:28992 > Government in Netherlands obliged to use it!

MapboxGL.js

December 2020: Mapbox GL JS v2 is not free anymore

Previous Mapbox GL JS v1 is still available under the free and open BSD3 license

MapLibre!

MapLibre docs overview

            var map = new maplibregl.Map({
              container: 'map',
              style: 'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL', // stylesheet location
              center: [-74.5, 40], // starting position [lng, lat]
              zoom: 9 // starting zoom
              });
                                                      

style.json

                                                        {
                                                          "version": 8,
                                                          "name": "Mijn eigen Stijl",
                                                          "sprite": "url",
                                                          "glyphs": "url/{fontstack}/{range}.pbf",
                                                          "sources": {...},
                                                          "layers": [
                                                          {
                                                            "id": "background",
                                                            "type": "background",
                                                            "paint": { "background-color":"#FFFFFF" }
                                                          },
                                                          {
                                                            "id":"water",
                                                            "source": "osm",
                                                            "source-layer":"water",
                                                            "paint":{
                                                              "fill-color":"#0000ff"
                                                            }
                                                          },
                                                          {...}
                                                          ]
                                                        }
                                                      

Use MapLibre for

Customized background maps

Interactive data

WebGL rendering

Use MapboxGL.js for

3D maps

Provided data

Commercial projects

Example

D3.js

Data Driven Documents

A JavaScript library for manipulating documents based on data

D3 helps you bring data to life using HTML, SVG, and CSS.

Developed by Mike Bostock

Allows you to bind data to the DOM and apply data-driven transformations to the document

HTML, SVG, and CSS

Fast

supports large datasets

Dynamic, interaction, animation

SVG

D3 is NOT

a slippy map creator

Not based on tiles!!

Mostly used for:

Charts (pie, line), Tables, Maps, Networks, animation & interactivity

Gimme the code!

How does it work?

Examples

D3 gallery

Let's Map!

What will we do?

Set up a simple HTML page and add Leaflet.js

Add a Base Map

Adding markers, circles, polygons

Change the projection

Add custom data

Use Notepad ++

With Syntax Highlighting!

Watch your line indentation!

For the map

Base map = tiles already on the internet

Example data is provided

Custom data : Feel free to use your own!

If you use your own data

NOTE:

Not to big datasets

Coordinate precision to 5!

Remove any un-used attributes!

Attribute names are crucial! Simple, short. No spaces. No symbols

Export to GeoJSON: WGS84 or EPSG:4326

Points, Polygons or Lines?

Running a local server

                                                              C:\Python27\ArcGIS10.5\python -m SimpleHTTPServer
                                                            

Problems or questions?

Use the INTERNET!

Use the Leaflet documentation!

StackOverflow is awesome!

Use the D3.js documentation!

Use bl.ocks.org

Ask me

Be creative!

Workshop Leaflet

Workshop

workshops.this-way.nl

Thank you!

Feedback please?

Stay in touch or questions:

niene@this-way.nl

Presentation and workhsop thanks to:

In random order: