Client-Side Coding with JavaScript:
Interactive Mapping


 Slides

Introduction to LeafletJS

  • LeafletJS is a JavaScript library which allows for the creation of and interaction with web maps.
  • It uses a simple API for building maps using Layers
  • It allows for styling of the map layers using standard CSS and manipulation with JavaScript

Simple Map Example

  • Let's make a simple map!

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
    .openPopup();

Installation

Include the CSS and JavaScript in the Head of the HTML page

Add the CSS First

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"/>

Then the JavaScript

Make sure you put this AFTER Leaflet's CSS

 <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>

Then create the map container

<div id="mapid"></div>

Then use CSS to create a height for the container

#mapid {
  height: 400px;
}

Using a Basemap

  • Basemaps are composed of Tiles that show:
    • roads
    • features
    • labels
  • You add the basemap to the map container

Mapbox Basemap Example

L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
  {
    attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
  }).addTo(mymap);

Basemap providers for LeafletJS https://leaflet-extras.github.io/leaflet-providers/preview/

What the L ?

L.map('map').setView([51.505, -0.09], 13)

Adding Markers

  • Markers add a point to the map
  • The text of a marker can be set using a string of HTML
let marker = L.marker([51.5, -0.09]).addTo(mymap);
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

Removing Markers

  • Markers can be removed by calling remove() on the marker object
let marker = L.marker([51.5, -0.09]).addTo(mymap);
marker.remove();

Adding Polygons

  • Polygons are arbitrarily shaped regions of the map
  • They can be created and added to the map
let polygon = L.polygon([
      [51.509, -0.08],
      [51.503, -0.06],
      [51.51, -0.047],
    ], { color: 'red'}).addTo(mymap);

// delete the polygon later
polygon.remove()

Other Shapes

Several other map shapes exist:

  • Path
  • Polyline
  • Polygon
  • Rectangle
  • Circle
  • CircleMarker

https://leafletjs.com/reference-1.3.0.html

GeoJSON

  • GeoJSON is JSON with specific properties for maps
  • It is a simple means to communicate location data
  • Alternative to .shp files and the variants; .shx, .prj, .dbf, ect...
{
  "type": "Feature",
  "properties": {
    "name": "My Layer",
    "latitude": 44.0886,
    "longitude": -72.7317
  },
  "geometry": {
    "type": "Polygon",
    "coordinates": [
      [
        [-73.35218221090553, 45.00541896831666],
        [-73.18201496808604, 45.00562770855899],
        [-72.76588580182134, 45.00611110701493],
        [-72.34976762188519, 45.006605491799434],
        ...
        ...
      ]
  }
}
let someLayer = L.geoJSON(geoJsonData);
someLayer.addTo(mymap);

Point-within-polygon

  • Libraries which exists to check containment of a point in a polygon

https://github.com/mapbox/leaflet-pip

Installation

<script src="https://unpkg.com/@mapbox/leaflet-pip@latest/leaflet-pip.js"></script>

Usage

let layer = L.geoJson(statesData);
let results = leafletPip.pointInLayer([-88, 38], layer);

Links

Suggested Projects



Comments

comments powered by Disqus