Data and community wrangler
Published
Edited
Jun 13, 2019
{
let container = html`<div style='height:400px;' />`;
yield container;
let map = new mapboxgl.Map({
container, // container id
center: [174.763336,-36.848461 ], // starting position [lng, lat]
zoom: 8, // starting zoom
style: "mapbox://styles/mapbox/dark-v9", // stylesheet
scrollZoom: true
});
}
html`<p><h3>Day 32</h3>
Yesterday's example was a copy paste othe code from <a href="https://observablehq.com/@tmcw/using-mapbox-gl-js?collection=@observablehq/maps" >D3 examples</a>, 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.<br><br>
<a href="https://docs.mapbox.com/mapbox-gl-js/overview/">Mapbox GL JS</a>:
<blockquote>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.</blockquote>
In this example we initialised an HTML element, div, with the JavaScript <code>yield</code> method. Then we created a map with <code>mapboxgl.Map</code> which specifies this HTML container and other <a href="https://docs.mapbox.com/mapbox-gl-js/api/"> Mapbox GL JS API parameters.<a/>
</p>`
{
let container = html`<div style='height:400px;' />`;
yield container;
let map = new mapboxgl.Map({
container, // container id
center: [174.763336,-36.848461 ], // starting position [lng, lat]
zoom: 8, // starting zoom
style: "mapbox://styles/mapbox/satellite-v9", // stylesheet
scrollZoom: true
});
}
{
let container = html`<div style='height:400px;' />`;
yield container;
let map = new mapboxgl.Map({
container, // container id
center: [174.763336,-36.848461 ], // starting position [lng, lat]
zoom: 16, // starting zoom
style: "mapbox://styles/mapbox/light-v10", // stylesheet
scrollZoom: true
});
map.on("load", () => {
map.addLayer({"id": "building"});
map.setPaintProperty('building', 'fill-color', 'blue')});
}
html`<p><h3>Day 34</h3>
Style <a href="https://docs.mapbox.com/mapbox-gl-js/example/style-ocean-depth-data/" > ocean depth </a>data around NZ, again by adding a layer.`
{
let container = html`<div style='height:400px;' />`;
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');
});
}
html`<p><h3>Day 35</h3>
Next use <a href="https://docs.mapbox.com/mapbox-gl-js/example/hillshade/" > hillshading </a>data around on Mount Cook, arguably one of the most dramatic places in NZ. `
{
let container = html`<div style='height:400px;' />`;
yield container;
let map = new mapboxgl.Map({
container, // container id
center: [ 170.142139,-43.595056],
zoom: 12
, // starting zoom
style: "mapbox://styles/mapbox/outdoors-v10", // stylesheet
scrollZoom: true,
pitch: 15
});
map.on("load", () => {
map.addSource('dem', {"type": "raster-dem","url": "mapbox://mapbox.terrain-rgb"});
map.addLayer({"id": "hillshading","source": "dem","type": "hillshade"
// insert below waterway-river-canal-shadow;
// where hillshading sits in the Mapbox Outdoors style
}, 'waterway-river-canal-shadow');
});
}
L = require('leaflet@1.2.0')
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
Qtownmap = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.8}px` });
yield container;
// Get Queenstown's coordinates from https://latitude.to/map/nz/new-zealand/cities/queenstown
let map = L.map(container).setView([-45.03023, 168.66271], 12);
let Stamen_Toner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 20,
ext: 'png'
}).addTo(map);
L.circle([-45.03023, 168.66271], { //Add a 5km bubble around Queenstown
color: 'orange',
fillColor: '#f03',
fillOpacity: 0.1,
radius: 5000
}).addTo(map);
}
html`<p><h3>Day 37</h3>
Now we will import some open data and create a Leaflet map.
Let's import <a href="http://doc-deptconservation.opendata.arcgis.com/datasets/59a193dfa57d4f87b7ef157a412907d3_0"> Department of Conservation (DOC) - recreation track lines </a> available under Attribution 4.0 International (CC BY 4.0).
<br><br>
I am following this <a href="https://observablehq.com/@lauraneckstein/leaflet"> D3 Leaflet Observable tutorial notebook </a> to import GeoJSON data and plot the track lines.`
walks= (await fetch('https://opendata.arcgis.com/datasets/59a193dfa57d4f87b7ef157a412907d3_0.geojson?format=json')).json()
WalksMap = {
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: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>'
}).addTo(map);
let docwalksLayer = L.geoJson(walks, {
weight: 2,
color: 'green'
}).addTo(map);
}
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: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>'
}).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);
}
quakes = {
let response = await fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson');
let json = await response.json();
return json;
}
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: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>'
}).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);
}
d3 = require("d3","d3-color")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
