Public
Edited
Jun 17, 2023
function drawEmoji(
map,
location,
emoji = "🚗",
options = { size: "30px", className: "marker" }
) {
const el = document.createElement("div");
el.className = options.className;
el.innerText = emoji;
el.style.fontSize = options.size;
const marker = new nextbillion.maps.Marker({ element: el })
.setLngLat({ lat: location[1], lng: location[0] })
.addTo(map);
return marker;
}
async function getPoints(city, count) {
const url = `https://m4aqpzp5ah6n7ilzunwyo5ma2u0ezqcc.lambda-url.us-east-2.on.aws/?region=${city}&number=${count}&vehicles=10&type=darp`;
const response = await fetch(url);
const json = await response.json();
return json.pointsArray.map((point) => [
parseFloat(point.pickup_longitude),
parseFloat(point.pickup_latitude)
]);
}
// data = getPoints()
function findExtremeCoordinates(coords) {
const [minLat, minLng, maxLat, maxLng] = coords.reduce(
([minLat, minLng, maxLat, maxLng], [lat, lng]) => [
Math.min(minLat, lat),
Math.min(minLng, lng),
Math.max(maxLat, lat),
Math.max(maxLng, lng)
],
[Infinity, Infinity, -Infinity, -Infinity]
);
return [
[minLat, minLng],
[maxLat, maxLng]
];
}
function renderPolygon(map, polygon, color, opacity = 0.4) {
const id = randomId();
map.addSource(`polygon-source-${id}`, {
type: "geojson",
data: {
type: "FeatureCollection",
features: [polygon]
}
});
map.addLayer({
id: `polygon-layer-${id}`,
type: "fill",
source: `polygon-source-${id}`,
paint: {
"fill-color": color,
"fill-opacity": opacity
}
});
}
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.
