Build your own web map from scratch

GeoGeeks?

Welcome

  1. What is a web map?
  2. What is Leaflet?
  3. What are we trying to accomplish today?

Download Workshop Pack

geogeeks.org/workshops/2017-leaflet/materials.zip

Tech Requirements - Overview

Tech Requirements - Text Editor

Tech Requirements - Python

Tech Requirements - Your Command Prompt

Tech Requirements - Web Server

Tech Requirements - Start Your Web Server

  1. Create a new folder for the Leaflet Workshop (e.g. Documents/Leaflet_workshop)
  2. Open your command prompt/terminal
  3. Navigate to your Leaflet Workshop folder: 
    cd Documents
cd Leaflet_workshop
  4. Start the Python web server: 
    python -m SimpleHTTPServer
  5. Open http://localhost:8000 in your web browser

You should now see a web page with "Directory listing for /" at the top.

Make a web page

  1. Download the Geogeeks' boilerplate HTML file (right-click, 'save as')
  2. Save as my-map.html in your Leaflet Workshop folder
  3. Open this file in your text editor
  4. Also open it in your web browser: http://localhost:8000/my-map.html

It's map time!

Creating a basic web map

  1. Add these required links to load Leaflet (in the document <head>, after the <title> section): 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
  2. Add this required link to load jQuery (in the document <head>, after the above section): 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  3. Add the map itself (in the <body>): 
    <div id="map-canvas"></div>
  4. Add the code to create the map (in the <body> in between the <script> tags): 
    $(document).ready(function () {
    var map = L.map( 'map-canvas', { center: [-31.95, 115.86], zoom: 11 } );
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
});
  5. Add some style to make the map fill the whole screen (in the <head> in between the <style> tags): 
    body { padding: 0; margin: 0; }
html, body, #map-canvas { height: 100%; width: 100%; }

You should now have a file similar to stage-1.0-basic-web-map.html.

Adding some data

  1. Save walibraryaddresses.geojson to your working folder
  2. Add it to your map with this code: 
    $.getJSON("walibraryaddresses.geojson", function(geojson) {
    L.geoJSON(geojson).addTo(map);
});
  3. Add a scale control: 
    L.control.scale().addTo(map);

You should now have a file similar to stage-2.0-adding-data.html.

Visualising the data

Change the map pins to 8 pixel orange circles:

$.getJSON("walibraryaddresses.geojson", function(geojson) {
    var geojsonMarkerOptions = {
        radius: 8,
        fillColor: "#ff7800",
        color: "#000",
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
    };
    L.geoJSON(geojson, {
        pointToLayer: function(feature, latlng) {
            return L.circleMarker(latlng, geojsonMarkerOptions);
        }
    }).addTo(map);
});

You should now have a file similar to stage-3.0-visualising-data.html.

Dynamic styling

Now change the markers for libraries with a 'Street Suburb' attribute of South Perth to a larger green circle:

$.getJSON("walibraryaddresses.geojson", function(geojson) {
    var libraryMarker = {
        radius: 8,
        fillColor: "#ff7800", // Orange.
        color: "#000",
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
    };
    var specialLibraryMarker = {
        radius: 16,
        fillColor: "#0faa9b", // Green
        color: "#fff",
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
    };
    L.geoJSON(geojson, {
        pointToLayer: function(feature, latlng) {
            var style;
            switch(feature.properties["Street Suburb"]) {
                case "South Perth":
                    style = specialLibraryMarker;
                    break;
                default:
                    style = libraryMarker;
            }
            return L.circleMarker(latlng, style);
        }
    }).addTo(map);
});

You should now have a file similar to stage-3.1-dynamic-styling.html.

Making the map interactive

Now add a popup box so that you can see the library name when you click on the orange circle.

L.geoJSON(geojson, {
    pointToLayer: function(feature, latlng) {
        /* Code here is unchanged */
    },
    onEachFeature: function(feature, layer) {
        if (feature.properties) {
            layer.bindPopup(feature.properties["Name"]);
        }
    }
}).addTo(map);

You should now have a file similar to stage-4.0-adding-popups.html.

More advanced stuff

← →