md`# GeoJSON & Leaflet`
html`<div id='map' style="height: 400px;"></div>`
{
var map = L.map('map').setView([39.74739, -105], 3);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/light-v9',
tileSize: 512,
zoomOffset: -1,
minZoom: 2
}).addTo(map);
var baseballIcon = L.icon({
iconUrl: 'baseball-marker.png',
iconSize: [32, 37],
iconAnchor: [16, 37],
popupAnchor: [0, -28]
});
function onEachFeature(feature, layer) {
var popupContent = "<p>I started out as a GeoJSON " +
feature.geometry.type + ", but now I'm a Leaflet vector!</p>";
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
layer.bindPopup(popupContent);
}
L.geoJSON([bicycleRental, campus, earthQ], {
style: function (feature) {
return feature.properties && feature.properties.style;
},
onEachFeature: onEachFeature,
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
});
}
}).addTo(map);
L.geoJSON(freeBus, {
filter: function (feature, layer) {
if (feature.properties) {
// If the property "underConstruction" exists and is true, return false (don't render features under construction)
return feature.properties.underConstruction !== undefined ? !feature.properties.underConstruction : true;
}
return false;
},
onEachFeature: onEachFeature
}).addTo(map);
invalidation.then(() => map.remove()); // clean up when rerunning the cell
}
md`# Data`
bicycleRental = ({
"type": "FeatureCollection",
"features": [
{
"geometry": {
"type": "Point",
"coordinates": [
-104.9998241,
39.7471494
]
},
"type": "Feature",
"properties": {
"popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!"
},
"id": 51
},
{
"geometry": {
"type": "Point",
"coordinates": [
-104.9983545,
39.7502833
]
},
"type": "Feature",
"properties": {
"popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!"
},
"id": 52
},
{
"geometry": {
"type": "Point",
"coordinates": [
-104.9963919,
39.7444271
]
},
"type": "Feature",
"properties": {
"popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!"
},
"id": 54
},
{
"geometry": {
"type": "Point",
"coordinates": [
-104.9960754,
39.7498956
]
},
"type": "Feature",
"properties": {
"popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!"
},
"id": 55
},
{
"geometry": {
"type": "Point",
"coordinates": [
-104.9933717,
39.7477264
]
},
"type": "Feature",
"properties": {
"popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!"
},
"id": 57
},
{
"geometry": {
"type": "Point",
"coordinates": [
-104.9913392,
39.7432392
]
},
"type": "Feature",
"properties": {
"popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!"
},
"id": 58
},
{
"geometry": {
"type": "Point",
"coordinates": [
-104.9788452,
39.6933755
]
},
"type": "Feature",
"properties": {
"popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!"
},
"id": 74
}
]
})
campus = ({
"type": "Feature",
"properties": {
"popupContent": "This is the Auraria West Campus",
"style": {
weight: 2,
color: "#999",
opacity: 1,
fillColor: "#B0DE5C",
fillOpacity: 0.8
}
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[-105.00432014465332, 39.74732195489861],
[-105.00715255737305, 39.74620006835170],
[-105.00921249389647, 39.74468219277038],
[-105.01067161560059, 39.74362625960105],
[-105.01195907592773, 39.74290029616054],
[-105.00989913940431, 39.74078835902781],
[-105.00758171081543, 39.74059036160317],
[-105.00346183776855, 39.74059036160317],
[-105.00097274780272, 39.74059036160317],
[-105.00062942504881, 39.74072235994946],
[-105.00020027160645, 39.74191033368865],
[-105.00071525573731, 39.74276830198601],
[-105.00097274780272, 39.74369225589818],
[-105.00097274780272, 39.74461619742136],
[-105.00123023986816, 39.74534214278395],
[-105.00183105468751, 39.74613407445653],
[-105.00432014465332, 39.74732195489861]
],[
[-105.00361204147337, 39.74354376414072],
[-105.00301122665405, 39.74278480127163],
[-105.00221729278564, 39.74316428375108],
[-105.00283956527711, 39.74390674342741],
[-105.00361204147337, 39.74354376414072]
]
],[
[
[-105.00942707061768, 39.73989736613708],
[-105.00942707061768, 39.73910536278566],
[-105.00685214996338, 39.73923736397631],
[-105.00384807586671, 39.73910536278566],
[-105.00174522399902, 39.73903936209552],
[-105.00041484832764, 39.73910536278566],
[-105.00041484832764, 39.73979836621592],
[-105.00535011291504, 39.73986436617916],
[-105.00942707061768, 39.73989736613708]
]
]
]
}
})
freeBus = ({
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-105.00341892242432, 39.75383843460583],
[-105.0008225440979, 39.751891803969535]
]
},
"properties": {
"popupContent": "This is a free bus line that will take you across downtown.",
"underConstruction": false
},
"id": 1
},
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-105.0008225440979, 39.751891803969535],
[-104.99820470809937, 39.74979664004068]
]
},
"properties": {
"popupContent": "This is a free bus line that will take you across downtown.",
"underConstruction": true
},
"id": 2
},
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-104.99820470809937, 39.74979664004068],
[-104.98689651489258, 39.741052354709055]
]
},
"properties": {
"popupContent": "This is a free bus line that will take you across downtown.",
"underConstruction": false
},
"id": 3
}
]
})
earthQ = ({"type":"FeatureCollection","metadata":{"generated":1613003580000,"url":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson","title":"USGS All Earthquakes, Past Hour","status":200,"api":"1.10.3","count":11},"features":[{"type":"Feature","properties":{"mag":2.5,"place":"29 km W of Salamatof, Alaska","time":1613002953305,"updated":1613003466190,"tz":null,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/ak0211xgpd1a","detail":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/ak0211xgpd1a.geojson","felt":1,"cdi":2.2,"mmi":null,"alert":null,"status":"automatic","tsunami":0,"sig":96,"net":"ak","code":"0211xgpd1a","ids":",ak0211xgpd1a,","sources":",ak,","types":",dyfi,origin,","nst":null,"dmin":null,"rms":0.6,"gap":null,"magType":"ml","type":"earthquake","title":"M 2.5 - 29 km W of Salamatof, Alaska"},"geometry":{"type":"Point","coordinates":[-151.8528,60.6253,75.8]},"id":"ak0211xgpd1a"},
{"type":"Feature","properties":{"mag":1.18,"place":"7km ESE of Cloverdale, CA","time":1613002881800,"updated":1613002981643,"tz":null,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/nc73521356","detail":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/nc73521356.geojson","felt":null,"cdi":null,"mmi":null,"alert":null,"status":"automatic","tsunami":0,"sig":21,"net":"nc","code":"73521356","ids":",nc73521356,","sources":",nc,","types":",nearby-cities,origin,phase-data,","nst":18,"dmin":0.0583,"rms":0.19,"gap":158,"magType":"md","type":"earthquake","title":"M 1.2 - 7km ESE of Cloverdale, CA"},"geometry":{"type":"Point","coordinates":[-122.9345016,38.7873344,10.38]},"id":"nc73521356"},
{"type":"Feature","properties":{"mag":1.1,"place":"20 km ESE of Dyer, Nevada","time":1613002597840,"updated":1613003012718,"tz":null,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/nn00800072","detail":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/nn00800072.geojson","felt":null,"cdi":null,"mmi":null,"alert":null,"status":"automatic","tsunami":0,"sig":19,"net":"nn","code":"00800072","ids":",nn00800072,","sources":",nn,","types":",origin,phase-data,","nst":11,"dmin":0.39,"rms":0.31,"gap":200.79,"magType":"ml","type":"earthquake","title":"M 1.1 - 20 km ESE of Dyer, Nevada"},"geometry":{"type":"Point","coordinates":[-117.8522,37.6062,0.1]},"id":"nn00800072"},
{"type":"Feature","properties":{"mag":5.9,"place":"southeast of the Loyalty Islands","time":1613002487365,"updated":1613003562040,"tz":null,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/us6000dggq","detail":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/us6000dggq.geojson","felt":null,"cdi":null,"mmi":null,"alert":null,"status":"reviewed","tsunami":0,"sig":536,"net":"us","code":"6000dggq","ids":",us6000dggq,","sources":",us,","types":",origin,phase-data,","nst":null,"dmin":8.073,"rms":0.91,"gap":50,"magType":"mww","type":"earthquake","title":"M 5.9 - southeast of the Loyalty Islands"},"geometry":{"type":"Point","coordinates":[171.6905,-23.2175,10]},"id":"us6000dggq"},
{"type":"Feature","properties":{"mag":2,"place":"44 km ENE of Goldfield, Nevada","time":1613002096470,"updated":1613002680569,"tz":null,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/nn00800071","detail":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/nn00800071.geojson","felt":null,"cdi":null,"mmi":null,"alert":null,"status":"automatic","tsunami":0,"sig":62,"net":"nn","code":"00800071","ids":",nn00800071,","sources":",nn,","types":",origin,phase-data,","nst":11,"dmin":0.546,"rms":0.4,"gap":201.88,"magType":"ml","type":"earthquake","title":"M 2.0 - 44 km ENE of Goldfield, Nevada"},"geometry":{"type":"Point","coordinates":[-116.7432,37.8008,0]},"id":"nn00800071"},
{"type":"Feature","properties":{"mag":3.6,"place":"8 km WNW of Golconda, Nevada","time":1613002034490,"updated":1613003071644,"tz":null,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/nn00800068","detail":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/nn00800068.geojson","felt":1,"cdi":3.4,"mmi":3.39,"alert":null,"status":"automatic","tsunami":0,"sig":200,"net":"nn","code":"00800068","ids":",nn00800068,","sources":",nn,","types":",dyfi,origin,phase-data,shakemap,","nst":17,"dmin":1.719,"rms":0.14,"gap":203.99,"magType":"ml","type":"earthquake","title":"M 3.6 - 8 km WNW of Golconda, Nevada"},"geometry":{"type":"Point","coordinates":[-117.5817,40.9933,11.1]},"id":"nn00800068"},
{"type":"Feature","properties":{"mag":1.71000004,"place":"8 km E of Pāhala, Hawaii","time":1613001619260,"updated":1613001810270,"tz":null,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/hv72347257","detail":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/hv72347257.geojson","felt":null,"cdi":null,"mmi":null,"alert":null,"status":"automatic","tsunami":0,"sig":45,"net":"hv","code":"72347257","ids":",hv72347257,","sources":",hv,","types":",origin,phase-data,","nst":22,"dmin":null,"rms":0.159999996,"gap":164,"magType":"md","type":"earthquake","title":"M 1.7 - 8 km E of Pāhala, Hawaii"},"geometry":{"type":"Point","coordinates":[-155.393829345703,19.2106666564941,32.2599983215332]},"id":"hv72347257"},
{"type":"Feature","properties":{"mag":2.2,"place":"54 km SSW of Kaktovik, Alaska","time":1613001341355,"updated":1613002153621,"tz":null,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/ak0211w722ow","detail":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/ak0211w722ow.geojson","felt":null,"cdi":null,"mmi":null,"alert":null,"status":"automatic","tsunami":0,"sig":74,"net":"ak","code":"0211w722ow","ids":",ak0211w722ow,","sources":",ak,","types":",origin,","nst":null,"dmin":null,"rms":0.85,"gap":null,"magType":"ml","type":"earthquake","title":"M 2.2 - 54 km SSW of Kaktovik, Alaska"},"geometry":{"type":"Point","coordinates":[-144.3107,69.7037,16.9]},"id":"ak0211w722ow"},
{"type":"Feature","properties":{"mag":2.28,"place":"1 km E of Maria Antonia, Puerto Rico","time":1613001192090,"updated":1613002959800,"tz":null,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/pr2021041015","detail":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/pr2021041015.geojson","felt":null,"cdi":null,"mmi":null,"alert":null,"status":"reviewed","tsunami":0,"sig":80,"net":"pr","code":"2021041015","ids":",pr2021041015,","sources":",pr,","types":",origin,phase-data,","nst":9,"dmin":0.1706,"rms":0.06,"gap":192,"magType":"md","type":"earthquake","title":"M 2.3 - 1 km E of Maria Antonia, Puerto Rico"},"geometry":{"type":"Point","coordinates":[-66.8738,17.9781,11]},"id":"pr2021041015"},
{"type":"Feature","properties":{"mag":5.9,"place":"southeast of the Loyalty Islands","time":1613000715898,"updated":1613002298040,"tz":null,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/us6000dgg9","detail":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/us6000dgg9.geojson","felt":null,"cdi":null,"mmi":0,"alert":"green","status":"reviewed","tsunami":0,"sig":536,"net":"us","code":"6000dgg9","ids":",us6000dgg9,","sources":",us,","types":",losspager,moment-tensor,origin,phase-data,shakemap,","nst":null,"dmin":8.088,"rms":0.86,"gap":52,"magType":"mww","type":"earthquake","title":"M 5.9 - southeast of the Loyalty Islands"},"geometry":{"type":"Point","coordinates":[171.6565,-23.2041,10]},"id":"us6000dgg9"},
{"type":"Feature","properties":{"mag":5.1,"place":"southeast of the Loyalty Islands","time":1613000601946,"updated":1613002261040,"tz":null,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/us6000dgg7","detail":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/us6000dgg7.geojson","felt":null,"cdi":null,"mmi":null,"alert":null,"status":"reviewed","tsunami":0,"sig":400,"net":"us","code":"6000dgg7","ids":",us6000dgg7,","sources":",us,","types":",origin,phase-data,","nst":null,"dmin":8.072,"rms":1.12,"gap":102,"magType":"mb","type":"earthquake","title":"M 5.1 - southeast of the Loyalty Islands"},"geometry":{"type":"Point","coordinates":[171.6824,-23.2063,10]},"id":"us6000dgg7"}],"bbox":[-155.3938293457,-23.2175,0,171.6905,69.7037,75.8]})
L = {
const L = await require("leaflet@1/dist/leaflet.js");
if (!L._style) {
const href = await require.resolve("leaflet@1/dist/leaflet.css");
document.head.appendChild(L._style = html`<link href=${href} rel=stylesheet>`);
}
return L;
}
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.
