A super short introduction to webmapping with & Weiterbildung Maptime Berlin, 21.02.2017 •Actually

  • View
    213

  • Download
    0

Embed Size (px)

Text of A super short introduction to webmapping with & Weiterbildung Maptime Berlin, 21.02.2017...

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    A super short introduction towebmapping with Leaflet

    Numa Gremling, Maptime Berlin, 21.02.2017

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    Slides and Data

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

    http://geosysnet.de

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

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    Getting started

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    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

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    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

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    HTML

    the elements that are shown in the webpage

    CSS

    the appearance (styling) of these elements

    JavaScript

    functionality

    HTML, CSS, JavaScript What they do

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    HTML

    heading, table, list, button

    CSS

    colors, positioning, sizes

    JavaScript

    something happens

    HTML, CSS, JavaScript Examples

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    Example - HTML

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    Example HTML, CSS

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    Imagine that our little friend only appeared after we clicked thebutton

    Example HTML, CSS, JavaScript

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    Some resources Books

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    http://www.w3schools.com/

    https://www.codecademy.com

    Some resources Websites

    http://www.w3schools.com/https://www.codecademy.com/

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    Leaflet

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    By Vladimir Agafonkin

    Since 2010

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

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

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    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-jshttp://gis.stackexchange.com/questions/tagged/leaflethttps://stackoverflow.com/questions/tagged/leaflet

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    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

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    Including Leaflet

    Example 1

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    Lets first create an empty HTML page:

    ...

    ...

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    ...

    ...

    metadata

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

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    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

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

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

    Way 1: CDN

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    Thats it!That is all it takes to use Leaflet!Easy, isnt it?

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    Download

    Unzip

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

    Way 2: Download

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    Creating our first map

    Example 2

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    The map needs to be displayed somewhere

    We create a container that is dedicated to the map

    We use the HTML element

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

    Lets call that ID myMapContainer

    The map container

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    The map container

    1. We add our map container

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    #myMapContainer {

    border: red 1px solid;

    width: 500px;

    height: 500px;

    }

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

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    The script tag

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

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

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

    Creating the map

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

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

    Where is our map?

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    Lets 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

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

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

    center: [52.494, 13.446],

    zoom: 10

    });

    Adding a center and a zoom level

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    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

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

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

    center: [52.494, 13.446],

    zoom: 10

    });

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

    attribution: ' OpenStreetMap contributors'

    });

    basemap.addTo(myMap);

    Adding a basemap

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    #myMapContainer {

    border: red 1px solid;

    width: 500px;

    height: 500px;

    }

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

    center: [52.494, 13.446],

    zoom: 10

    });

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

    attribution: ' OpenStreetMap contributors'

    });

    basemap.addTo(myMap);

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    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/

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    Adding geometries

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

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

    Point Line Polygon

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    In Leaflet these geometries are called:

    Leaflet jargon

    Marker PolyLine Polygon

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    Adding markers

    Example 3

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    Lets add two famous Berlin landmarks:

    Fernsehturm

    Latitude: 52.520861

    Longitude: 13.409564

    Brandenburger Tor:

    Latitude: 52.516312

    Longitude: 13.377624

  • Praxisqualifizierung & WeiterbildungMaptime Berlin, 21.02.2017

    A point is called marker in Leaflet

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

    Brandenburger Tor:

    L.marker([