myMap = {
nextbillion.setApiKey(apiKey);
const container = html`<div id="map" style="height:400px;width:600px;"></div>`;
yield container;
let pos = {
lat: 34.01645,
lng: -117.944
};
const nbmap = new nextbillion.maps.Map({
container: document.getElementById("map"),
center: pos,
zoom: 10,
maxZoom: 15,
minZoom: 5,
style: "https://api.nextbillion.io/maps/streets/style.json",
scrollZoom: true
});
nbmap.map.on("load", function () {
let randomPoints = {
type: "FeatureCollection",
features: []
};
randomVRPInputs.pointsArray.forEach((pt) => {
let feature = {
type: "Feature",
properties: {
business: pt.business,
name: pt.name,
phone: pt.phone
},
geometry: {
type: "Point",
coordinates: [pt.longitude, pt.latitude]
}
};
randomPoints.features.push(feature);
});
// Add markers with popups on hover
randomPoints.features.forEach((pt) => {
let el = document.createElement("div");
el.className = "marker";
el.style.backgroundSize = "contain";
el.style.backgroundRepeat = "no-repeat";
el.style.backgroundPosition = "center";
el.style.backgroundImage = `url(${imageUrl})`;
el.style.width = "15px";
el.style.height = "15px";
const popup = new nextbillion.maps.Popup({
closeButton: false,
closeOnClick: false
}).setHTML(`
<strong>${pt.properties.name}</strong><br>
${pt.properties.business}<br>
${pt.properties.phone}
`);
el.addEventListener("mouseenter", () => {
popup.setLngLat(pt.geometry.coordinates).addTo(nbmap.map);
});
el.addEventListener("mouseleave", () => {
popup.remove();
});
new nextbillion.maps.Marker(el)
.setLngLat(pt.geometry.coordinates)
.addTo(nbmap.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.
