Basic introduction to leaflet.js 
Harald Schernthanner|Geoinformation Research Group| 
University of Potsdam
Me? / Our goal in the next ~2 hours / Material 
 Me? Harald Schernthanner – research assistant at GIS department - 
Potsd...
What is a (Map-) API 
 API = Application Programming Interface 
 Provides tools for connecting external software to an e...
Overview over popular API´s 
 Google Map API: 
https://developers.google.com/maps/?hl=de 
 Map Quest API: 
http://develo...
Overview over popular API´s 
Baidu Map API / China: 
http://developer.baidu.com/map/index.php?title=%E9%A6%96%E9%A1%B5 
 ...
Leaflet Map API 
 Leaflet: An Open-Source Library for Mobile-Friendly Interactive Maps: 
http://leafletjs.com/ 
 Latest ...
Leaflet Map API 
 Library has just 33kb of size, Cross platform compatible, uses HTML 5 and 
CSS3. 
 Expandible via Plug...
Some little helpers for map scripting, editors & co. 
 Online editors: JSFiddle: http://jsfiddle.net/ 
JSBeautifier: http...
HTML & JavaScript Basics 
 JavaScript online course: 
http://www.codecademy.com/en/tracks/javascript 
 JavaScript Refere...
JavaScript: A very short introduction 
 JavaScript is embedded to html via the <script> tag, 
 Script can be embedded in...
JavaScript: Basic syntax rules 
 JavaScript is case-sensitive. 
 Statements end with a semicolon ; 
 Block of statement...
Second Exercise: Changing the map options 
 Let´s change the center coordinate of our webmap to the IXDS in Berlin. 
 Wh...
Second Exercise: Changing the map options 
 We use Latidude and Longitude + Webmercator as reference system. 
 That´s ok...
Third Exercise: We put a marker on our map 
 So let´s put a marker to our webmap to locate the IXDS. 
 What is a marker?...
Third Exercise: We put a marker on our map 
 So let´s put a marker to our webmap to locate the IXDS, take a look at: 
„Th...
Third Exercise: We put a marker on our map 
 To get more control over our popup, for example to put html into the popup a...
Third Exercise: We put a marker on our map 
 Finaly we put a costum marker – some nice icon to our webmap:Teka a 
look at...
That´s it – our first leaflet webmap 
 Further reading... 
http://schernthanner.de/Demo.html 
@hatschito / harald@schernt...
Questions? 
@hatschito 
harald@schernthanner.de
Nächste SlideShare
Wird geladen in …5
×

Leaflet maptime

1.116 Aufrufe

Veröffentlicht am

My leaflet introduction at Maptime BER.

Veröffentlicht in: Wissenschaft
0 Kommentare
3 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.116
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
250
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Head = Dokumentenkopf
    Body = Dokumenteninhalt
  • Funktion
    Anweisung ist Teil einer Funktion – führt einen Befehl aus und gibt das Ergebnis am Bildschirm wieder.
    Funktion kann verschiedene Optionen haben
    z.B. kann die Funktion L. Map mehrere Optionen wie zoom oder center haben.
    Methoden werden durch die dot-Notation angesprochen: Vorn steht das Objekt, gefolgt von einem Punkt gefolgt von einer Methode oder Eigenschaft.
    =Funktionen innerhalb eines Objektes.
    Nutzt Punkt Notation
    Event: Löst Interaktion aus – dynamischer Inhalt wie zum Beispiel ein Mouse Rollover.
  • Einer der Studierenden sollte mir sein geändertes Skript zeigen.
  • Einer der Studierenden sollte mir sein geändertes Skript zeigen.
  • Some of the providers need registration – as for example here which has nice basemaps as well.
  • Zylinderprojektion von Gerhard Merkator im 15 Jhd entwickelt – für Navigation
    Mercator projection distorts the size and shape of large objects
    The Mercator projection is a cylindrical map projection
  • Leaflet maptime

    1. 1. Basic introduction to leaflet.js Harald Schernthanner|Geoinformation Research Group| University of Potsdam
    2. 2. Me? / Our goal in the next ~2 hours / Material  Me? Harald Schernthanner – research assistant at GIS department - Potsdam university.  Research in spatial real estate analysis and remote sensing.  Our goal today? Making a webmap, using Leaflet.js, showing the location of our meeting.  Why Leaflet?  High grade of extensibility  Very active user community.  Open Source  Presentation and scripts: http://schernthanner.de/Maptime_Leaflet_Intro.zip @hatschito / harald@schernthanner.de 2/22
    3. 3. What is a (Map-) API  API = Application Programming Interface  Provides tools for connecting external software to an existing software system.  An API is a specification used by software components to communicate with each other (http://www.w3schools.com/googleAPI/).  Map API´s = Integration of map functionalities into web map  e.g. Zoom / Pan / Search functions.  API´s are the basic building block of „Mashups“ → Term comes from pop music. In WWW mashup means the „mixing“ of data from different web sources.  Depending on the business model of the API provider, an API key has to be provided.  First known map mashup: http://www.housingmaps.com/  Housing offers based on craiglist and google maps. @hatschito / harald@schernthanner.de 3/22
    4. 4. Overview over popular API´s  Google Map API: https://developers.google.com/maps/?hl=de  Map Quest API: http://developer.mapquest.com/  Bing Maps API: http://www.microsoft.com/maps/choose-your-bing-maps-API.aspx  Openstreetmap API: http://wiki.openstreetmap.org/wiki/API_v0.6  Nokia / Here API: https://developer.here.com/ @hatschito / harald@schernthanner.de 4/22
    5. 5. Overview over popular API´s Baidu Map API / China: http://developer.baidu.com/map/index.php?title=%E9%A6%96%E9%A1%B5  Auto Navi / Taiwan: http://www.autonavi.com/en/MS_131_5.html  Open Layers: http://openlayers.org/  Leaflet API integrated to Mapbox API https://www.mapbox.com/mapbox.js/api/v2.0.1/  Mapstraction: Meta approach bundeling API´s http://mapstraction.com/ Baidu API commercial, 2014 @hatschito / harald@schernthanner.de 5/22
    6. 6. Leaflet Map API  Leaflet: An Open-Source Library for Mobile-Friendly Interactive Maps: http://leafletjs.com/  Latest Stable Version (Release Date: November 2013)  In September Version 1.0 was announced: https://speakerdeck.com/mourner/future-of-leaflet  Has it´s origins at Cloudemade. Main Developer Vladimir Agafonkin (@mourner) meanwhile works for Mapbox.  API provides full interoperability with the Mapbox API. @hatschito / harald@schernthanner.de 6/22
    7. 7. Leaflet Map API  Library has just 33kb of size, Cross platform compatible, uses HTML 5 and CSS3.  Expandible via Plugins: http://leafletjs.com/plugins.html  Leaflet supports:  Tile map services(TMS)  Web Map services (WMS)  GeoJson  Web feature services (WFS) can be integrated via AJAX.  Where to you get help from?? There is a very nice and active goolge user group:  https://groups.google.com/forum/#!forum/leaflet-js @hatschito / harald@schernthanner.de 7/22
    8. 8. Some little helpers for map scripting, editors & co.  Online editors: JSFiddle: http://jsfiddle.net/ JSBeautifier: http://jsbeautifier.org/  I use notepad++ in Windows und gedit in Ubuntu – thats a matter of taste  Editors should have color highlighting / line numbers  IDE not necessary for Map scripting : https://netbeans.org/  Eclipes – Aptana - Netbeany  Editor in Windows: Notepad++  Editors in Linux: Vim, Kate, gedit etc.  Editors on Mac: Sublime  Sublime → popular editor among developers (~50 €).  Debuging – a JavaScript Problem – I use the Chrome JavaScript console. Chrome – tools- JavaScript console  If you don´t have an editor, it´s time to install on – e.g. Notepad++  http://notepad-plus-plus.org/ @hatschito / harald@schernthanner.de 8/22
    9. 9. HTML & JavaScript Basics  JavaScript online course: http://www.codecademy.com/en/tracks/javascript  JavaScript Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_ JavaScript literature:  David Sawyer McFarland, 2012, JavaScript & jQuery, the missing manual, The bookt that should have been in the box, O'Reilly, Second Edition. @hatschito / harald@schernthanner.de 9/22
    10. 10. JavaScript: A very short introduction  JavaScript is embedded to html via the <script> tag,  Script can be embedded into the head or body of the html document.  Script can be written into the HTML document.  Reference to external file with the extension .js is possible as well. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Dokument mit externem JavaScript</title> <script type="text/javascript" src="script.js"></script> </head> <body> <h1>Dokument mit externem JavaScript</h1> </body> </html> Reference to external JavaScript file @hatschito / harald@schernthanner.de 10/22
    11. 11. JavaScript: Basic syntax rules  JavaScript is case-sensitive.  Statements end with a semicolon ;  Block of statements opens and ends with curly brackets {...}  /.../ Comment  /*... */ Multiline Comment  JSGeo conference: http://jsgeo.com/ @hatschito / harald@schernthanner.de 11/22
    12. 12. Second Exercise: Changing the map options  Let´s change the center coordinate of our webmap to the IXDS in Berlin.  Where to get coordinates from????  http://www.mapcoordinates.net/  Let´s geocode our adress Paul-Lincke-Ufer 39/40 10999 Berlin into Lat / Lon coordinates.  Change the center coordinate of our webmap.  Map options are changed here: var map = var map = L.map('map', {center: [52.496215, 13.421952],  Not only the center coordinate can be changed, there are much more options: http://leafletjs.com/reference.html#map-options  I put some options for our webmap into the script.  We use Latidude and Longitude + Webmercator as refernce system.  Thats ok as long as we don´t want to measere distances or areas. @hatschito / harald@schernthanner.de 15/22
    13. 13. Second Exercise: Changing the map options  We use Latidude and Longitude + Webmercator as reference system.  That´s ok as long as we don´t want to measure distances or areas.  Mercator is isogonal and has no equal areas – developd for nautical purpose  Compare Webmercator measurements to UTM: http://servicesbeta.esri.com/demos/compareMeasurements.html Take a look at the size of Greenland? @hatschito / harald@schernthanner.de 16/22
    14. 14. Third Exercise: We put a marker on our map  So let´s put a marker to our webmap to locate the IXDS.  What is a marker? – the web is full of „Pinmaps“  Most famous marker is googles inverse raindrop. @hatschito / harald@schernthanner.de 17/22
    15. 15. Third Exercise: We put a marker on our map  So let´s put a marker to our webmap to locate the IXDS, take a look at: „ThirdExercise_Pinmap_.html“ var marker = L.marker([52.496215, 13.421952]).addTo(map).bindPopup("IXDS Berlin"); Puts the marker to the map and binds popup to the marker  Leaflet Marker Options: http://leafletjs.com/examples/custom-icons.html Markers that we put on the map have to be stored to an image folder @hatschito / harald@schernthanner.de 18/22
    16. 16. Third Exercise: We put a marker on our map  To get more control over our popup, for example to put html into the popup and to change options like size we can use the L.Popup function instead of .bindpopup – take a look at: „ThirdExercise_Pin_url_logo.html.“  With the option .setcontent we can get content into the marker. var marker = L.marker([52.496115, 13.421952]).addTo(map).bindPopup(popup1).openPopup(); var popup1 = L.popup({minWidth: 200, maxWidth: 500, }) //getting the image to the popupsize can be tricky - I recommend higher px values than the image or rescale image to 300px, thats the leaflet default// .setLatLng([52.496115, 13.421952]) .setContent('<a href="http://www.meetup.com/Maptime-BER/">MaptimeBER</a> <br>MaptimeBER<br><p><img src="http://photos2.meetupstatic.com/photos/event/b/e/7/0/global_424128752.jpeg"></p>') //set.content bindet html content ein. marker ,bindPopup bindet den popup an den Marker. marker.bindPopup(popup1).openPopup(popup1); @hatschito / harald@schernthanner.de 19/22
    17. 17. Third Exercise: We put a marker on our map  Finaly we put a costum marker – some nice icon to our webmap:Teka a look at „ThirdExercise_Pin_url_logo_ICON.html“. var marker = L.marker([52.496115, 13.421952], { clickable: true, draggable: true, icon: L.icon({ iconUrl: 'images/map-icon.png', //iconUrl: Path to the icon / iconAnchor: [32, 32], popupAnchor: [0, -32] //Position of the icon in relation to the marker @hatschito / harald@schernthanner.de 20/22
    18. 18. That´s it – our first leaflet webmap  Further reading... http://schernthanner.de/Demo.html @hatschito / harald@schernthanner.de 21/22
    19. 19. Questions? @hatschito harald@schernthanner.de

    ×