Let's Learn Leaflet.js! – http://www.liedman.net/maptime-gbg-201602/

View Github Repository Open presentation in a new window

perliedman

See all presentation from perliedman

Let's Learn Leaflet.js! – http://www.liedman.net/maptime-gbg-201602/

0 1

maptime-gbg-201602

"Let's learn Leaflet.js" presentation for Maptime GBG 2016-02

On Github perliedman / maptime-gbg-201602

Let's Learn Leaflet.js!

 

 

 

http://www.liedman.net/maptime-gbg-201602/

Per Liedman, Dotnet Mentor

I will assume some knowledge of HTML, JavaScript and object oriented programming.
Comparison to Google Maps: Google Maps is a complete package: it's map data, satellite imagery, streetview imagery AND a JavaScript API. Leaflet is a JavaScript API, you choose data sources yourself.

Let's dive in...

<html>
  <head>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
  </head>
  <body>
    <div id="map">
    </div>
  </body>
</html>
                        
                    
<html>
  <head>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
    <style>
      body {
        padding: 0;
        margin: 0;
      }
      #map {
        position: absolute;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map">
    </div>
  </body>
</html>
                        
                    
var map = L.map('map');

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

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

map.setView([57.7, 11.96], 13);

← Longitude (X) →

↑ Latitude (Y) ↓

Leaflet is lat/lng order 

        new L.LatLng(57.7, 11.9)
        // ...is the same as
        L.latLng(57.7, 11.9)
        // ...and also the same as
        [57.7, 11.9]
        // ...but not as
        [11.9, 57.7]

                    
  • Baselayers - backgrounds, but tiles can also be semi-transparent overlays
    • 
                            
  • Markers - for pointing out a location; can be styled (images), can use any HTML; single coordinate
    • 
                            
  • Draggable markers
    • 
                            
  • Line - or polyline, multiple lines connected; array of coordinates
    • 
                            
  • Styled - vectors can be styled (width, color, dashed lines); multiple layers can be used to achieve advanced styling
    • 
                            
  • Ordering layers
    • 
                            
  • Polygon - array of array of coordinates; outer ring/outline, and holes
    • 
                            
  • Circle
    • 
                            
  • Styling by CSS - tricks with HTML/CSS can be applied in Leaflet too
    • 
                            
  • Popups - just a kind of layer, with shortcuts to "bind" to other layers
    • 
                        
Storing Vector Data:

                    
GeoJSON

                    

                        
                            Example
                        
                    

                
Leaflet GeoJSON support

                    
var geojson = {"type": "Point", "coordinates": [57.7, 11.9]};
L.geoJson(geojson).addTo(map);

                

                    

                
Plugins

                
Docs

                
Outside the comfort zone

                    

                        Leaflet Underneath
                    

                
Thank you!

                    

                        
                            http://www.liedman.net/maptime-gbg-201602/
                        
                    

                    


        

















































                    Let's Learn Leaflet.js!

                       
                    
                        
                            http://www.liedman.net/maptime-gbg-201602/
                        
                    

                    Per Liedman, Dotnet Mentor

                    
                        I will assume some knowledge of HTML, JavaScript and object oriented
                        programming.