myMap = {
apiKey;
const container = html`<div></div>
</div><div id="map" style="height:400px;width:600px;">`;
yield container;
let pos = {
lat: 34.01645,
lng: -117.944
};
const nbmap = (container.value = 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, i) => {
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);
});
randomPoints.features.forEach((pt) => {
console.log(pt);
let el = document.createElement("div");
el.className = "marker";
el.style.backgroundSize = "contain"; // Ensures the SVG scales properly
el.style.backgroundRepeat = "no-repeat";
el.style.backgroundPosition = "center";
el.style.backgroundImage = `url(${imageUrl})`;
el.style.width = 15 + "px";
el.style.height = 15 + "px";
el.addEventListener("click", (e) => {
console.log(e);
});
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.
