25:null 26:["$","title",null,{"children":"100 Days of Code Maps of New Zealand Days 31-39 | Kim Fitter | Observable"}] 2b:T422,html`

Day 32

Yesterday's example was a copy paste othe code from D3 examples, with updates to attribute center, zoom and style values. However let's take a look at the structure of this code to understand what is happening and how to get from the JS code to Observable D3 code.

Mapbox GL JS:

Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles and Mapbox styles. It is part of the Mapbox GL ecosystem, which includes Mapbox Mobile, a compatible renderer written in C++ with bindings for desktop and mobile platforms.

In this example we initialised an HTML element, div, with the JavaScript yield method. Then we created a map with mapboxgl.Map which specifies this HTML container and other Mapbox GL JS API parameters.

`2c:T43f,{ let container = html`

`; yield container; let map = new mapboxgl.Map({ container, // container id center: [175,-41], zoom: 4, // starting zoom style: "mapbox://styles/mapbox/streets-v11", // stylesheet scrollZoom: true }); map.on("load", () => { map.addSource('10m-bathymetry-81bsvj', { type: 'vector', url: 'mapbox://mapbox.9tm8dx88' }); map.addLayer({"id": "10m-bathymetry-81bsvj", "type": "fill","source": "10m-bathymetry-81bsvj", "source-layer": "10m-bathymetry-81bsvj", "layout": {}, "paint": {"fill-outline-color": "hsla(337, 82%, 62%, 0)", // cubic bezier is a four point curve for smooth and precise styling // adjust the points to change the rate and intensity of interpolation "fill-color": [ "interpolate",[ "cubic-bezier",0, 0.5,1, 0.5 ],["get", "DEPTH"],200, "#78bced",9000, "#15659f"]}}, 'land-structure-polygon'); }); } 2d:T417,greatwalksMap = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; // Now we create a map object and add a layer to it. let map = L.map(container).setView([-40, 173], 5); let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors © CARTO' }).addTo(map); function yourOnEachFeatureFunction(feature, layer){ if (feature.properties.DESCRIPTION) { layer.bindPopup(feature.properties.DESCRIPTION); } } let docwalksLayer = L.geoJSON(walks, { weight: 1, color: 'grey', onEachFeature: yourOnEachFeatureFunction, style: function(feature) { switch (feature.properties.OBJECT_TYPE_DESCRIPTION) { case 'Great Walk': return {color: "darkgreen", weight:4}; } } }).addTo(map); }2e:T514,map = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; // Now we create a map object and add a tile layer to it. let map = L.map(container).setView([-40, 173], 5); let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors © CARTO' }).addTo(map); function style(feature) { return { // set the circle marker radius as the earthquake magnitude "radius": feature.properties.mag, "stroke": true, "fillColor": "orange", "color": "orange" }; } // Set the marker attributes let geojsonMarkerOptions = { radius: 2, fillColor: "#ff7800", color: "#000", weight: 1, opacity: 1, fillOpacity: 0.8 }; // See: https://leafletjs.com/reference-1.4.0.html#geojson-pointtolayer let pointToLayer = function (feature, latlng) { return L.circleMarker(latlng, style(feature)); } // See: https://leafletjs.com/examples/geojson/ let layer = L.geoJSON(quakes.features, { pointToLayer: pointToLayer, }).addTo(map); }2f:[] 29:{"id":"2c1db389e5cdb217","slug":"100-days-of-code/2","title":"100 Days of Code Maps of New Zealand Days 31-39","thumbnail":"3b85cc14c8ae317e8df17fdbb7672d6ba1512e8b0be96490d2cd7aec43430d51","access_level":"public","create_time":"$D2019-06-05T06:01:11.438Z","update_time":"$D2019-07-03T01:23:31.199Z","view_time":null,"first_public_time":"$D2019-06-05T06:32:44.438Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7d7941efbb2313ba","login":"kimnewzealand","name":"Kim Fitter","avatar_url":"https://avatars-next.observableusercontent.com/e8f314afe9edb2d2300dd21dd2314c6a931b75e859f283135ae85adac04c4e76","tier":"starter_2024"},"version":679,"publish_version":679,"role":null,"authored":false,"authors":[{"type":"individual","id":"75bb913059238850","login":"kimnewzealand","name":"Kim Fitter","avatar_url":"https://avatars-next.observableusercontent.com/e8f314afe9edb2d2300dd21dd2314c6a931b75e859f283135ae85adac04c4e76","tier":null}],"members":[{"type":"individual","id":"75bb913059238850","login":"kimnewzealand","name":"Kim Fitter","avatar_url":"https://avatars-next.observableusercontent.com/e8f314afe9edb2d2300dd21dd2314c6a931b75e859f283135ae85adac04c4e76","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"100 Days of Code Maps of New Zealand Days 31-39","cells":[{"id":0,"value":"md`# 100 Days of Code Maps of New Zealand Days 31-39\n\nFor the next couple days I will map NZ with different JavaScript libraries in D3.\n\nI will also use HTML instead of Markdown for the notebook descriptions, and HTML elements instead of SVG elements to practice HTML code.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"html`

Day 31

\n\nFirst use Mapbox GL JS using D3 examples and Mapbox examples.

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"{\n let container = html`

`;\n\n yield container;\n\n let map = new mapboxgl.Map({\n container, // container id\n center: [174.763336,-36.848461 ], // starting position [lng, lat]\n zoom: 8, // starting zoom\n style: \"mapbox://styles/mapbox/dark-v9\", // stylesheet\n scrollZoom: true\n });\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$2b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"html`

Let's switch the style to a satellite raster baselayer.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"{\n let container = html`

`;\n\n yield container;\n\n let map = new mapboxgl.Map({\n container, // container id\n center: [174.763336,-36.848461 ], // starting position [lng, lat]\n zoom: 8, // starting zoom\n style: \"mapbox://styles/mapbox/satellite-v9\", // stylesheet\n scrollZoom: true\n });\n\n}\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"html`

Day 33

\n\nToday I looked at adding layers to the basemap layer style. Here we use the light style with the building layer added with a blue fill.\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"{\n let container = html`

`;\n\n yield container;\n\n let map = new mapboxgl.Map({\n container, // container id\n center: [174.763336,-36.848461 ], // starting position [lng, lat]\n zoom: 16, // starting zoom\n style: \"mapbox://styles/mapbox/light-v10\", // stylesheet\n scrollZoom: true\n });\n \n\n map.on(\"load\", () => {\n map.addLayer({\"id\": \"building\"});\n map.setPaintProperty('building', 'fill-color', 'blue')});\n}\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"html`

Day 34

\n\nStyle ocean depth data around NZ, again by adding a layer.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"$2c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"html`

Day 35

\n\nNext use hillshading data around on Mount Cook, arguably one of the most dramatic places in NZ. `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"{\n let container = html`

`;\n\n yield container;\n\n let map = new mapboxgl.Map({\n container, // container id\n center: [ 170.142139,-43.595056],\n zoom: 12\n , // starting zoom\n style: \"mapbox://styles/mapbox/outdoors-v10\", // stylesheet\n scrollZoom: true,\n pitch: 15\n });\n \n\n map.on(\"load\", () => {\n map.addSource('dem', {\"type\": \"raster-dem\",\"url\": \"mapbox://mapbox.terrain-rgb\"});\n \n map.addLayer({\"id\": \"hillshading\",\"source\": \"dem\",\"type\": \"hillshade\"\n // insert below waterway-river-canal-shadow;\n // where hillshading sits in the Mapbox Outdoors style\n }, 'waterway-river-canal-shadow');\n });\n}\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"html`

Day 36

\n\nNow we will jump to the open source JavaScript library, leaflet . This library creates interactive maps with Open Street Map (OSM) as the default or using third party provider tiles.\n

\n\nWe will follow this D3 leaflet tutorial and compare the D3 code with the equavalent R code for creating a leaflet map.\n

\nFirst load the leaflet library and required CSS.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"L = require('leaflet@1.2.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"html`

Create a map circling a 5km radius around Queenstown , using the Stamen tile layer.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"Qtownmap = {\n let container = DOM.element('div', { style: `width:${width}px;height:${width/1.8}px` });\n yield container;\n \n // Get Queenstown's coordinates from https://latitude.to/map/nz/new-zealand/cities/queenstown \n let map = L.map(container).setView([-45.03023, 168.66271], 12);\n\n let Stamen_Toner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', {\n attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap',\n subdomains: 'abcd',\n minZoom: 0,\n maxZoom: 20,\n ext: 'png'\n}).addTo(map);\n\n \n L.circle([-45.03023, 168.66271], { //Add a 5km bubble around Queenstown\n color: 'orange',\n fillColor: '#f03',\n fillOpacity: 0.1,\n radius: 5000\n}).addTo(map);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"html`

The equivalent code using the R leaflet package in R is :\n

\n\n# Load leaflet R package \nlibrary(leaflet) \n# Create a Leaflet map widget \nleaflet() %>% \n # Add graphic elements and layers to map widget \n addTiles() %>% \n # Manipulate the map coordinates and zoom \n setView(lat=-45.03023, \n lng=168.66271, \n zoom = 12) %>% \n # Add a tile layer from the provider Stamen \n addProviderTiles(provider = providers$Stamen.Toner) %>% \n # Add circle graphic element with styling attributes \n addCircles(lat =-45.03023, \n lng=168.66271, \n radius = 5000, \n color = \"orange\", \n fillColor = \"#f03\") \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"html`

Day 37

\n\nNow we will import some open data and create a Leaflet map.\n\nLet's import Department of Conservation (DOC) - recreation track lines available under Attribution 4.0 International (CC BY 4.0).\n

\n\nI am following this D3 Leaflet Observable tutorial notebook to import GeoJSON data and plot the track lines.`\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"walks= (await fetch('https://opendata.arcgis.com/datasets/59a193dfa57d4f87b7ef157a412907d3_0.geojson?format=json')).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"WalksMap = {\n let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });\n yield container;\n \n // Now we create a map object and add a layer to it.\n let map = L.map(container).setView([-40, 173], 5);\n let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}@2x.png', {\n attribution: '© OpenStreetMap contributors © CARTO'\n }).addTo(map);\n\nlet docwalksLayer = L.geoJson(walks, {\n weight: 2,\n color: 'green'\n }).addTo(map);\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"html`

Day 38

\n\nContinuing the previous DOC walks chart, filter the walks data and show the Great Walks with popups. The popups were a bit tricky to get right and I had to read the Leaflet documentation and stackerflow.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"html`

Day 39

\n\nA series of maps about New Zealand wouldn't be complete with an earthquake map, using this step by step Leaflet tutorial. This tutorial has a good explanation on the container for Leaflet. \n
\n
\nLet's use the last earthquakes data from Earthquakes USGS as used in the Observable example. This map uses the all earthquakes over the past 30 days data.\n\nI can't seem to find the license or attribution for this USGS data on the website, so I have added the link above and assumed there is an open data license since the data source is open.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"quakes = {\n let response = await fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson');\n let json = await response.json();\n return json;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"html`

Imports

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@0.49\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1Ijoia2ltbmV3emVhbGFuZCIsImEiOiJjam5lMDQ0eXgwNTBsM3BwN282ZW0ydWQ4In0.r76E_8ZAQUgLX-V937TwhQ\";\n const href = await require.resolve(\"mapbox-gl@0.49/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"d3 = require(\"d3\",\"d3-color\") ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2a:"$29:body"