myMap = {
apiKey;
await visibility();
const container = html`<div></div>
</div><div id="map" style="height:800px;width:1100px;">`;
yield container;
let pos = {
lat: panel.city.centroid.split(",")[0],
lng: panel.city.centroid.split(",")[1]
};
const nbmap = (container.value = new nextbillion.maps.Map({
container: document.getElementById("map"),
center: pos,
zoom: 8,
maxZoom: 15,
minZoom: 5,
style: panel.styles.value,
scrollZoom: true
}));
loadMapActions(nbmap);
}
async function loadMapActions(nbmap) {
nbmap.map.on("load", function () {
let draw = new drawtool({
displayControlsDefault: false,
controls: {
polygon: false,
combine_features: false,
uncombine_features: false,
trash: true
},
styles: drawToolStyle
});
panel.city.onchange = function () {
let pos = {
lat: panel.city.centroid.split(",")[0],
lng: panel.city.centroid.split(",")[1]
};
nbmap.map.flyTo({
center: pos,
zoom: 13,
speed: 9.0,
curve: 0.8
});
};
//nbmap.map.addControl(draw, 'top-left');
loadPolygonToolActions(nbmap, draw);
nbmap.map.addControl(draw, "top-left");
});
}
async function loadPolygonToolActions( nbmap, draw ) {
// events firing from the polygon draw tool
nbmap.on('draw.create', updateSelectionArea);
nbmap.on('draw.delete', updateSelectionArea);
nbmap.on('draw.update', updateSelectionArea);
nbmap.on('draw.modechange', updateSelectionArea);
function updateSelectionArea(e) {
console.log(e);
let polygon = draw.getAll();
let mapPoints = [];
console.log(polygon);
mutable customerPoints = undefined;
if (nbmap.map.getLayer('customers')) {
nbmap.map.removeLayer('customers');
}
if (nbmap.map.getLayer('customers-cluster-count')) {
nbmap.map.removeLayer('customers-cluster-count');
}
if (nbmap.map.getLayer('unclustered-customer')) {
nbmap.map.removeLayer('unclustered-customer');
}
randomPoints.pointsArray.forEach(ptLocation => {
let turfPoint = turf.point([ptLocation.longitude,ptLocation.latitude]);
try {
if (turf.booleanPointInPolygon(turfPoint,turf.polygon(polygon.features[0].geometry.coordinates))) {
mapPoints.push(ptLocation);
}
} catch {
// we haven't defined a complete polygon so capture all points
mapPoints.push(ptLocation);
}
});
let firstSymbolId;
const layers = nbmap.map.getStyle().layers;
for (const layer of layers) {
if (layer.type === 'symbol') {
firstSymbolId = layer.id;
break;
}
}
// remove points layer and then readd selected points based on geofence
let customersjson = {
type: 'FeatureCollection',
features: []
};
mapPoints.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]
}
}
customersjson.features.push(feature);
});
// passing these points out to a workbook cell
mutable customerPoints = customersjson;
if (!nbmap.map.getSource('customers')) {
nbmap.map.addSource('customers', {
type: 'geojson',
data: null,
cluster: true,
clusterRadius: 20,
clusterMaxZoom: 14
});
}
nbmap.map.getSource('customers').setData(customersjson);
if (nbmap.map.getLayer('customers')) {
nbmap.map.removeLayer('customers');
}
nbmap.map.addLayer({
type: 'circle',
source: 'customers',
id: 'customers',
filter: ['has', 'point_count'],
paint: {
'circle-color': [
'step',
['get', 'point_count'],
'#51bbd6',
100,
'#51bbd6',
750,
'#51bbd6'
],
'circle-radius': 5,
"circle-radius": ["case", ["get", "cluster"], 10, 5],
'circle-stroke-opacity': 0.4,
'circle-stroke-width': 1.5
}
}, firstSymbolId);
if (nbmap.map.getLayer('customers-cluster-count')) {
nbmap.map.removeLayer('customers-cluster-count');
}
nbmap.map.addLayer({
id:'customers-cluster-count',
type: 'symbol',
source: 'customers',
layout: {
'text-field': '{point_count_abbreviated}',
},
paint: {
'text-color': 'white'
}
});
if (nbmap.map.getLayer('unclustered-customer')) {
nbmap.map.removeLayer('unclustered-customer');
}
nbmap.map.addLayer({
id: 'unclustered-customer',
type: 'circle',
source: 'customers',
filter: ['!', ['has', 'point_count']],
paint: {
'circle-color': '#93CEA3',
'circle-radius': 10,
'circle-stroke-width': 1,
'circle-stroke-color': '#fff'
}
});
}
}
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.
