Let's Learn Leaflet.js!

 

 

 

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

Per Liedman, Dotnet Mentor

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]

                    
                

                

                    
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/