Webmapping for beginners

Making Maps with JavaScript

By Niene Boeijen

or

github.com/NieneB/webmapping_for_beginners

Niene Boeijen

Maptime

Time for making maps!

Maptime is hands on!

Maptime Amsterdam 10 min walk from CS

Next: Wednesday 27 sept QGIS workshop!

Maptime Utrecht 5 min walk from CS

Next: TBA October

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, Leaflet.js and D3.js, this workshop will help you get started!

This is how we do it:

Let's get started!

What is a web map?

Analogue paper maps

openstreetmap.org

google.com/maps

a little History

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!

Styling & Serving tiles

Layers!

Base Layer

Raster

Data Layer / Feature Layer

Vector

Summary

Web Map Building blocks

How to bring this all together?

Making a Web Page

New to HTML & CSS?

Start with Making a web page

Or use Code Academy

Maps with JavaScript

a Map is a lot!

Tiles for Base layer

Data layers, polygons, lines & points

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

Interactivity

etc.

JavaScript Libraries!

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.

JavaScript Libraries for Mapping

OpenLayers

Leaflet.js

D3.js

Google Maps

Mapbox

HERE Maps

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

Gimme the code!

Include in HTML head

HTML body

CSS

#mapid { height: 180px; }

JavaScript

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

What will we do?

Add a Base Map

Adding markers, circles, polygons

Add custom data

Let's Map!

Everything is on Github

Github?!

Used for code.

Version control.

Sharing.

Documentation.

Use Sublime Text

NOT Notepad+ ...

See Blackboard!

Made for Boston, USA

Assignment: Change every coordinate of the examples to the Netherlands!!

Base map = tiles already on the internet

Custom data : Feel free to use your own!

NOTE:

Not to big datasets

Export to GeoJSON: WGS84

Remove any not used attributes first!

Points, Polygons or Lines?

Attribute names are crucial! simple, short, no spaces or symbols

Running a local server

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

Problems or questions?

Use the INTERNET!

Use the Leaflet documentation!

StackOverflow is awesome!

Ask me

Be creative!

or

github.com/NieneB/webmapping_for_beginners

Let's have a break!

15 min

or

github.com/NieneB/webmapping_for_beginners

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?

Selections

Selecting elements by :

[.Class #Id Type]

d3.selectAll("p").style("color", "white");
d3.select("body").style("background-color", "black");
						

Data

Styles: transparency, color, size, borders

d3.selectAll("p").style("color", "white");

Attributes: classes, id, interactive behavior

d3.selectAll(".small").atr("class", "big");

Properties: state, true/false

Transitions: animation, delay, transformation

Dynamic properties

d3.selectAll("p").style("color", function() {
	return "hsl(" + Math.random() * 360 + ",100%,50%)";
});

Transition

d3.selectAll("circle").transition()
	.duration(750)
	.delay(function(d, i) { return i * 10; })
	.attr("r", function(d) { return Math.sqrt(d * scale); });

Examples

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

Everything is on Github

Problems or questions?

Use the INTERNET!

StackOverflow is awesome!

Use the D3.js documentation!

Use bl.ocks.org

Ask me

Be creative!

or

github.com/NieneB/webmapping_for_beginners

Show & Tell

Thank you!

Feedback please?

Stay in touch or questions:

niene@webmapper.net

Thanks to:

In random order: