Webmapping for beginners

Making Maps with JavaScript

By Niene Boeijen

About me

Web Cartographer & Geo ICT developer

Maptime Amsterdam & Utrecht

Internship

Msc Geo Information Science & Remote Sensing

What the map can be

Wij maken interactieve kaarten en datavisualisaties. Onze expertise is open {source; data; standaarden}. Onze kracht is het combineren van cartografie en webtechnologie.

Utrecht, The Netherlands

Today

  1. Presentation - 15 min
  2. Workshop - 60 min
  3. Show & Tell - 15 min

Workshop made for Foss4G Boston, Aug 2017

Today: short version

Feedback? Please!

WIFI

Pssword

This presentation

https://NieneB.github.io/Webmapping_for_beginners/

The workshop:

https://github.com/NieneB/Webmapping_for_beginners/wiki

What is a web map?

Analogue paper - Digital maps - Web Maps

[Data, tiles, styles and servers.]

View in a browser, scroll, pan, zoom.

Examples:

openstreetmap.org

google.com/maps

a little History

Digital maps

GIS software

GIS on the Web is not user friendly..

1996 Mapquest first with a web service!

But really slow to load..

in 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!

Zoom level 0: 1 tile for the whole world.

Increases exponentially...

Zoom level 1: 4 tiles

Zoom level 2: 16 tiles

etc.

Map with tile bounds

Styling & Serving tiles

Tiles are styled and rendered in advance

Tiles are just images on the web

http://tile.openstreetmap.org/5/16/10.png

/z/x/y

Layers!

Base Layer

Raster

Data Layer / Feature Layer

Vector

Building blocks

Data

Styles

Tiles

Layers

Servers

How to bring this all together?

Maps with JavaScript

How to make a Web Page?

HTML - Content

CSS - Layout

JavaScript - Functionality

Want to learn more?

Making a web page introduction

Code Academy HTML & CSS

Maps with JavaScript

Data + style = map tiles / Background map

Data layers, polygons, lines & points

Functionality: zoom, pan, popups, markers, routes, etc.

JavaScript Libraries!

JavaScript Libraries for Mapping

Leaflet.js

OpenLayers

D3.js

Google Maps

HERE Maps

NL Maps

Nederlandse actuele Data op de kaart (BRT)

Meerdere Mapping libraries ondersteund

Kant en klare code

Uitgebreide documentatie

NL Maps Wizard

Leaflet.js

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

Vladimir Agafonkin

Lightweight, simple, flexible

Plugins

What Leaflet does not do:

Provide any data for you!

Provide the basemap

GIS

Leaflet is a framework

Examples

What will we do?

Add a Base Map

Adding markers, circles, polygons

Add custom data

D3.js

A JavaScript library for manipulating documents based on data

Mike Bostock

Data Driven Documents

SVG

Not based on tiles!!

Examples

gallery

What will we do?

Making a simple map, countries as polygons

Adding Point data, Style data driven

Adding legends and graphs based on the same data

Let's get started!

A lot of our building blocks are freely available online!

This presentation

https://NieneB.github.io/Webmapping_for_beginners/

The workshop:

https://github.com/NieneB/Webmapping_for_beginners/wiki