{
// 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);
}
});
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.