9b: Leaflet / 2.5D / 3D Maps

Objectives

Using Leaflet with map tile provider (e.g. Open Street Maps)
Look at a simple 3D example using Mapbox.

What is Leaflet?

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps.

Basic template

As usual, let's start with a simple HTML template.

We're going to add Leaflet CSS and JS via a CDN.


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.8.0/leaflet.css" />
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.8.0/leaflet.js"></script>
</body>
</html>

Map tiles are not free!

Here's the Open Street Map (OSM) tile server policy

You can also find a Leaflet provider extension here (demo).

Load Leaflet basemap

You'll need to create a map container for Leaflet to hook to.

Add the CSS, HTML and JS snippets below.


#map {
    width: 1000px;
    height: 600px;
}


<div id="map"></div>


let tiles = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
let map = new L.Map('map', {center: [1.347833, 103.809357], zoom: 12})
    .addLayer(tiles);

Attribution, zoom limits

Switching to one of SLA's OneMAP base maps.

Adding attribution and zoom limits.


let tiles = new L.tileLayer('https://maps-{s}.onemap.sg/v3/Default/{z}/{x}/{y}.png', {
  detectRetina: true,
  maxZoom: 18,
  minZoom: 11,
  //Do not remove this attribution
  attribution: '' +
               'New OneMap | Map data © contributors, Singapore Land Authority'
});

Taken from official SLA OneMap Map Docs.

Add maxBounds

SLA OneMap map tiles don't extend much past our borders.


let map = new L.Map("map", {
    center: [1.347833, 103.809357], 
    zoom: 11,
    maxBounds: L.latLngBounds(L.latLng(1.1, 103.5), L.latLng(1.5, 104.3))
    })
    .addLayer(tiles);

Other basemaps: Google Tiles


let tiles = new L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
});

Other basemaps: ESRI ArcGISOnline


let tiles = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles © Esri'
});

Leaflet Examples

You can already do a lot of things within Leaflet and base map tiles.

Here is Leaflet's example page.

You can do the choropleth assignment 3 entirely in Leaflet.

But of course writing it in D3 and then hooking it with Leaflet gives you a lot more custom control.

ObservableHQ on how to use D3 with Leaflet.

Simple markers

Take a look at Leaflet's examples.

Can you add a marker location at SIT NYP campus on your map?


    let marker = L.marker([1.3775674706920313, 103.84876554003246]).addTo(map);
    marker.bindPopup("SIT NYP campus");

Extra 2.5D / 3D stuff

Mapbox examples

Excellent Mapbox examples, with tons of code snippets.

Easy to do fly tos, animations, add 3D objects, etc.

API keys are free to start out with.

3D examples

deck.gl and Mapbox GL JS: Better Together, Xiao Ji Chen

Cesium Sandcastle

deck.gl Examples

UN Urbanization(three.js)

Questions?

Chi-Loong | V/R