Public
Edited
Apr 7
1 fork
map = {
const container = yield htl.html`<div style="height: 500px;">`;
const map = L.map(container).setView([46.72, 7.862311288115387], 8);
L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", {
attribution: "Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
}).addTo(map);
//Default marker
L.marker([46.461599599561545, 7.862311288115387],
{
title: "Switzerland",
opacity: 0.9,
riseOnHover: true}).bindPopup("Switzerland. Full of mountains, cheese and chocolates and with French, German and Italian influences, Switzerland is a great place to visit.").
addTo(map);
//Custom marker
L.marker([45.98142514598109, 7.659203753876486],
{ icon: mountainIcon,
title: "The Matterhorn",
opacity: .9,
riseOnHover: true}).bindPopup("Fun fact: When the famous chocolate, Toblerone, relocated their factory out of Switzerland they had to take the Matternhorn off their recognizable triangular chocolate boxes. You can only use Swiss branding if your company is Switerland-based.").
addTo(map);
//Circle markers
circleAttributes.forEach(function(item) {
L.circleMarker([item.lat, item.lng],
{ radius: item.population/10000
}).bindPopup(item.name + " has a population of " + item.population).addTo(map);
});
}
//Circle marker attributes
circleAttributes = [
{ lat: 47.3666667, lng: 8.55, name: "Zurich", population: 435000},
{ lat: 46.2, lng: 6.1666667, name: "Geneva", population: 202000},
{ lat: 47.5666667, lng: 7.6, name: "Basel", population: 180000},
{ lat: 46.9166667, lng: 7.4666667, name: "Bern", population: 144000},
{ lat: 46.519654, lng: 6.632273, name: "Lausanne", population: 140000},
];
mountain = FileAttachment("filledInMountainBlue.png").url()
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.
