map = {
const container = html`<div style="height:300px;">`;
yield container;
const map = L.map(container).setView([41.9203, -79.6403], 8);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>'
}).addTo(map);
L.geoJson(data,{
onEachFeature: function(feature,layer){
layer.bindPopup(`
<h1>${feature.properties.name}</h1>
<ul>
<li>population: ${feature.properties.population}</li>
<li>cost: ${feature.properties.cost}</li>
</ul>
`)
},
pointToLayer: function(feature,coordinates){
return L.circle(coordinates,{radius: 2000, color: feature.properties.color})
}
}).addTo(map)
}
data = [
{
"type":"Feature",
"properties":{"name":"Mercyhurst University", "population":2374, "cost":56311, "color":"green"},
"geometry":{"type":"Point","coordinates":[-80.0542,42.1040]}
},
{
"type":"Feature",
"properties":{"name":"Gannon University", "population":2733, "cost":50488, "color":"yellow"},
"geometry":{"type":"Point","coordinates":[-80.0867,42.1283]}
},
{
"type":"Feature",
"properties":{"name":"Behrend University", "population":4117, "cost":33718, "color":"blue"},
"geometry":{"type":"Point","coordinates":[-79.9827,42.1199]}
},
{
"type":"Feature",
"properties":{"name":"Edinboro University", "population":3498, "cost":24924, "color":"red"},
"geometry":{"type":"Point","coordinates":[-80.1208,41.8716]}
}
]
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.
