{
// You'll often see Leaflet examples initializing a map like L.map('map'),
// which tells the library to look for a div with the id 'map' on the page.
// In Observable, we instead create a div from scratch in this cell, so it's
// completely self-contained.
let container = DOM.element('div', { id: 'map', style: `width:${width}px;height:${width/1.6}px` });
// Note that I'm yielding the container pretty early here: this allows the
// div to be placed on the page. This is important, because Leaflet uses
// the div's .offsetWidth and .offsetHeight to size the map. If I were
// to only return the container at the end of this method, Leaflet might
// get the wrong idea about the map's size.
yield container;
// Create some baselayers
let osmLayer = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png', {
attribution: 'Wikimedia maps beta | © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});
let canvas = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="http://cartodb.com/attributions">CartoDB</a>',
subdomains: 'abcd',
maxZoom: 19
});
// Create our leaflet map
let map = L.map(container, {
layers: [canvas],
center: [50.00, 14.44],
zoom: 7
});
// Create a layer control so we can show/hide layers
let layerControl = L.control.layers();
layerControl.addTo(map);
// Add our other baselayers
layerControl.addBaseLayer(canvas, 'Dark Canvas');
layerControl.addBaseLayer(osmLayer, 'OSM');
let tooltip = new L.Tooltip();
// lastly, add shapes
glify.shapes({
map,
data,
click: (e, feature) => {
L.popup()
.setLatLng(e.latlng)
.setContent('You clicked on ' + feature.properties.NAZKR_ENG)
.openOn(map);
console.log(feature);
console.log(e);
},
hover: (e, feature) => {
tooltip
.setLatLng(e.latlng)
.setContent('You are hovering on ' + feature.properties.NAZKR_ENG)
.addTo(map);
}
});
}
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.
