My leaflet introduction at Maptime BER.

1. Basic introduction to leaflet.js
Harald Schernthanner|Geoinformation Research Group|
University of Potsdam

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. That´s it – our first leaflet webmap
 Further reading...
http://schernthanner.de/Demo.html
@hatschito / harald@schernthanner.de 21/22

19. Questions?
@hatschito
harald@schernthanner.de