Published
Edited
Jul 29, 2022
map_nyc = {
let container = DOM.element('div', {style: `width:${width}px;height:${width/1.6}px`});
yield container;
let map = L.map(container).setView([40.7608, -111.8910], 14);
let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 19
}).addTo(map);
for (var i=0; i<slc_network.length; i++) {
L.polyline(slc_network[i], {color: "lightgray", opacity:1, weight:0.8}).addTo(map);
}
for (const [index, intersection] of Object.entries(slc_intersection)) {
function onMapClick(e) {
for (var k=0; k<intersection["geometry"].length; k++){
L.polyline(intersection["geometry"][k], {color: "green", opacity:1, weight:0.8}).addTo(map);
}
}
// function offMapClick(e) {
// for (var k=0; k<intersection["geometry"].length; k++){
// L.polyline(intersection["geometry"][k], {color: "lightgray", opacity:1, weight:0.8}).addTo(map);
// }
// }
// var popup = L.popup().setLatLng(intersection["centroid"]).setContent("length").openOn(map);
var customOptions = {'maxWidth': '500', 'className': 'custom'}
var customPopup = html`<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>Intersection ${index}</h2>
<table style="width:100%">
<tr>
<th>Road</th>
<th>Angle</th>
<th>Length</th>
<th>Lane Count</th>
<th>Speed Limit</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<p></p>
</body>
</html>`
L.circle(intersection["centroid"], 20, {color: "red"}).addTo(map).on("click", onMapClick).bindPopup(customPopup, customOptions);
}
map.on("zoomend")
}
slc_intersection = FileAttachment("slc_intersection@3.json").json()
slc_network = FileAttachment("slc_network@1.json").json()
L = require('leaflet@1.2.0')
d3 = require("d3@6", "d3-geo-projection@2")
Table = Inputs.table // deprecated alias
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
html`<style>#map { width: 800px; height: 500px; }
.info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; }
.legend { text-align: left; line-height: 12px; color: #555; } .legend i { width: 12px; height: 12px; float: left; margin-right: 5px; opacity: 0.7; }</style>`
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.
