html` <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>`
L = require('leaflet@1.7.1')
{
// set up the basic map
let parent = DOM.element('div', { style: `width:${width}px;height:${width/2}px` });
yield parent;
let map = L.map(parent).setView([-3.725744878429098, -38.540739894291875], 12); // higher numbers are more zoomed in
let osmTileLayer = L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo( map );
// add a marker for the School of Journalism
let marker = L.marker([-3.736214579666565, -38.55775386999985], {icon: NEUicon}).addTo(map);
let marker2 = L.marker([-3.733154934333791, -38.52892033196093], {icon: coolCat}).addTo(map);
// and label it using the Leaflet Popups
marker
.bindPopup("<b>School of Journalism</b><br>Northeastern University."); // "bind" basically means "connect"
//.openPopup(); // tell it to open by default so no click is required
marker2
.bindPopup("<b>Cool place</b><br>for cool cats")
.openPopup();
}
NEUicon = L.icon({
iconUrl: 'https://web.northeastern.edu/mihc/images/NortheasternLogo.png',
iconSize: [40, 40],
iconAnchor: [20, 20],
popupAnchor: [0, -10],
});
coolCat = L.icon({
iconUrl: 'https://img.pngio.com/download-cool-cat-png-image-library-library-coolcat-boogie-cool-cat-png-352_352.png',
iconSize: [40, 40],
iconAnchor: [20, 20],
popupAnchor: [0, -10],
});
d3 = require("d3@6")
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.
