A super short introduction to webmapping with …geosysnet.de/custom/downloads/MaptimeBerlin_Leaflet_21...Praxisqualifizierung & Weiterbildung Maptime Berlin, 21.02.2017 •Actually…

Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

A super short introduction towebmapping with Leaflet

Numa Gremling, Maptime Berlin, 21.02.2017


Slides and Data

http://geosysnet.de/en/downloads.html

http://geosysnet.de


http://geosysnet.de/


Getting started


• To get started with webmapping you first need a basic knowledge of web development

• And that requires just three things:

– HTML

– CSS

– JavaScript

The Holy Trinity


• Actually… four things: you also need a text editor

• There are a lot of editors to assist you specificallywith web development. Such a software is called IDE (Integrated Development Environment)

• Avoid a complex IDE at first!

• We will use Notepad++ tonight


HTML

the elements that are shown in the webpage

CSS

the appearance (styling) of these elements

JavaScript

functionality

HTML, CSS, JavaScript – What they do


HTML

heading, table, list, button

CSS

colors, positioning, sizes

JavaScript

something happens

HTML, CSS, JavaScript – Examples


Example - HTML


Example – HTML, CSS


Imagine that our little friend only appeared after we clicked thebutton

Example – HTML, CSS, JavaScript


Some resources – Books



• http://www.w3schools.com/

• https://www.codecademy.com

Some resources – Websites

http://www.w3schools.com/

https://www.codecademy.com/


Leaflet


• By Vladimir Agafonkin

• Since 2010

• Leaflet: Past, Present, Futurehttps://www.youtube.com/watch?v=_P2SaCPbJ4w

https://www.youtube.com/watch?v=_P2SaCPbJ4w


• Not as complex as other libraries

• Easy to learn

• Very well documented

• Large community to help you:

– Google Grouphttps://groups.google.com/forum/#!forum/leaflet-js

– GIS Stack Exchangehttp://gis.stackexchange.com/questions/tagged/leaflet

– Stack Overflowhttps://stackoverflow.com/questions/tagged/leaflet

Why pick Leaflet?

https://groups.google.com/forum/#!forum/leaflet-js

http://gis.stackexchange.com/questions/tagged/leaflet

https://stackoverflow.com/questions/tagged/leaflet


• Including Leaflet

• Creating a template

• Adding the map container

• Adding a basemap

• Adding markers

• Adding a polygon

• Adding a GeoJSON

What you will learn tonight


Including Leaflet

Example 1


• Let’s first create an empty HTML page:

<!DOCTYPE html>

<html>

<head>

...

</head>

<body>

...

</body>

</html>


<!DOCTYPE html>

<html>

<head>

...

</head>

<body>

...

</body>

</html>

metadata

The actual content of the page;what you will see in the browser!


• One way to get Leaflet:

http://leafletjs.com/download.html

• Two ways to use Leaflet:

– Use a CDN

– Download and use locally

Getting and including Leaflet

http://leafletjs.com/download.html


To get started with Leaflet we include these two lines in our <head>:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

Way 1: CDN


<!DOCTYPE>

<html>

<head>

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

</head>

<body>

</body>

</html>

That’s it!That is all it takes to use Leaflet!Easy, isn’t it?


• Download

• Unzip

• Include both the JS and CSS files, like we did in theprevious step

Way 2: Download


Creating our first map

Example 2


• The map needs to be displayed somewhere

• We create a container that is dedicated to the map

• We use the HTML element <div>

• We assign an ID to that div, so we can reference the div to add the map to it

• Let’s call that ID myMapContainer

The map container


<!DOCTYPE html>

<html>

<head>



</head>

<body>

<div id='myMapContainer'></div>

</body>

</html>

The map container

1. We add our map container


<!DOCTYPE html>

<html>

<head>



<style>

#myMapContainer {

border: red 1px solid;

width: 500px;

height: 500px;

}

</style>

</head>

<body>


</body>

</html>

Some styling

2. We assign a style to that container

Sidenote: IDs are selected using the pound sign (#).So the ID myMapContainer is selected like this: #myMapContainer

IMPORTANT: in order for the map to bedisplayed its container must have a height!!!


…

<body>


<script>

</script>

</body>

</html>

The script tag

3. We add a script tag at theend of our body, so we canexecute JavaScript


…

<body>


<script>

var myMap = L.map('myMapContainer');

</script>

</body>

</html>

Creating the map


• L.map creates a map container; it does not add an actualbasemap or any data: we need to do that

Where is our map?


• Let’s add some options so our map loads in Berlin

• We need:

– A center (latitude: 52.494 - longitude: 13.446)

– A zoom level (10)

• Options are added with {curly braces}

• Available map options are shown here:

http://leafletjs.com/reference-1.0.3.html#map-factory

We need the options center and zoom

http://leafletjs.com/reference-1.0.3.html#map-factory


…

<body>


<script>

var myMap = L.map('myMapContainer', {

center: [52.494, 13.446],

zoom: 10

});

</script>

</body>

</html>

Adding a center and a zoom level


var myMap= L.map('myMapContainer', {center: [52.494, 13.446],zoom: 15

});

variable:Lets us use the map later on

Leaflet Map method

the div we created:


the option center

the option zoom


…

<script>


center: [52.494, 13.446],

zoom: 10

});

var basemap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {

attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

});

basemap.addTo(myMap);

</script>

</body>

</html>

Adding a basemap



<!DOCTYPE html>

<html>

<head>



<style>

#myMapContainer {

border: red 1px solid;

width: 500px;

height: 500px;

}

</style>

</head>

<body>


<script>


center: [52.494, 13.446],

zoom: 10

});

var basemap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {

attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

});


</script>

</body>

</html>


• More basemaps:https://leaflet-extras.github.io/leaflet-providers/preview/

• Pick a basemap and copy the code:

https://leaflet-extras.github.io/leaflet-providers/preview/


Adding geometries


• Reminder: there are only three types of geometries in GIS:

Point Line Polygon


• In Leaflet these geometries are called:

Leaflet jargon

Marker PolyLine Polygon


Adding markers

Example 3


• Let’s add two famous Berlin landmarks:

– Fernsehturm

• Latitude: 52.520861

• Longitude: 13.409564

– Brandenburger Tor:

• Latitude: 52.516312

• Longitude: 13.377624


• A point is called marker in Leaflet

• To add it we use L.marker([latitude,longitude]);

Brandenburger Tor:

L.marker([52.516312, 13.377624]);

Fernsehturm:

L.marker([52.520861, 13.409564]);


• We assign the markers to variables

• Then we add the markers to the map

Adding the markers

// Creating markersvar brandenburgerTor = L.marker([52.516312, 13.377624]);var fernsehturm = L.marker([52.520861, 13.409564]);

// Adding the marker to the mapfernsehturm.addTo(myMap);brandenburgerTor.addTo(myMap);


// Creating markers

var brandenburgerTor = L.marker([52.516312, 13.377624]);

var fernsehturm = L.marker([52.520861, 13.409564]);

// Adding the marker to the map

fernsehturm.addTo(myMap);

brandenburgerTor.addTo(myMap);

// Adding popups

fernsehturm.bindPopup('Fernsehturm');

brandenburgerTor.bindPopup('Brandenburger Tor');

Adding popups


<script>var myMap = L.map('myMapContainer', {

center: [52.52050, 13.39791],zoom: 14

});

var basemap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

});


// Creating markersvar brandenburgerTor = L.marker([52.516312, 13.377624]);var fernsehturm = L.marker([52.520861, 13.409564]);

// Adding the marker to the mapfernsehturm.addTo(myMap);brandenburgerTor.addTo(myMap);

// Adding popupsfernsehturm.bindPopup('Fernsehturm');brandenburgerTor.bindPopup('Brandenburger Tor');

</script>


Adding a polygon

Example 4


• Let’s add the most important block in Berlin: the „Maptime block“

52.498107, 13.421515

52.497225, 13.424503

52.495729, 13.423194

52.496493, 13.420244


// Creating a polygonvar block = L.polygon(

[[52.498107, 13.421515],[52.497225, 13.424503],[52.495729, 13.423194],[52.496493, 13.420244]

]);

// Adding the polygon to the mapblock.addTo(myMap);


Adding a GeoJSON

Example 5


• Data: we have a Shapefile of Berlin districts (Bezirke)

• Goal: we’d like to add it to our map

• Problem: Leaflet does not support shapefiles

• Solution: we convert the shapefile to a data formatthat Leaflet understands

We convert the shapefile to a GeoJSON


• There are many ways to convert a shapefile to a GeoJSON, such as:

– http://geojson.io/

– ogr2ogr

– QGIS

Shapefile to GeoJSON

http://geojson.io/


Using QGIS as a conversion tool

Always use EPSG:4326(WGS 84)


Having a look at our QGIS export


• We can now paste that GeoJSON into our script and assign it to a variable, so we can use it later on to create a „Leaflet GeoJSON“

Assigning the GeoJSON to a variable


Creating a Leaflet GeoJSON// Creating a Leaflet GeoJSON

var districtsFinal = L.geoJson(districtsRaw);

// adding the GeoJSON

districtsFinal.addTo(myMap);


Thanks, Contact, Questions

console.log('Thank you! :-)!');

• gis.stackexchange.com/users/23263/britishsteel

• [email protected]

• twitter.com/Gremling89

• geosysnet.de

• gis-trainer.de

New: instagram.com/gis_trainer/Slides and data: http://geosysnet.de/en/downloads.html

• twitter.com/geoSYSnet

• twitter.com/gis_trainer

http://gis.stackexchange.com/users/23263/britishsteel

mailto:[email protected]

https://twitter.com/Gremling89

http://geosysnet.de/

http://gis-trainer.de/

https://www.instagram.com/gis_trainer/


http://twitter.com/geoSYSnet

https://twitter.com/gis_trainer


Imprint

gis-trainer.de / geoSYSPflügerstr. 5612047 Berlin, Germany

Telefon: 030/82070659Telefax: 030/82070658

Email: [email protected] / [email protected]: www.gis-trainer.de / www.geosysnet.de



http://www.gis-trainer.de/

http://www.geosysnet.de/

Documents

A super short introduction to webmapping with …geosysnet.de/custom/downloads/MaptimeBerlin_Leaflet_21...Praxisqualifizierung & Weiterbildung Maptime Berlin, 21.02.2017 •Actually…