routePolyline = {
nextbillion.setApiKey(apiKey);
const directionsService = new nextbillion.maps.DirectionsService();
let resp = await directionsService.route({
origin: {
lng: panel.originPoint.split(",")[1],
lat: panel.originPoint.split(",")[0]
},
destination: {
lng: panel.destinationPoint.split(",")[1],
lat: panel.destinationPoint.split(",")[0]
},
mode: panel.routeStyle.value
});
let geojson = {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {},
geometry: {
coordinates: nextbillion.utils.polyline
.decode(resp.routes[0].geometry, 6)
.map((c) => c.reverse()),
type: "LineString"
}
}
]
};
// Here we are reducing the number of points that comprise
// the polyline using a generalizatin/simplification of the line.
// We need to reduce the number of points so we can build a URL that
// doesn't exceed URI length limits - you will see 414 errors if too long
let options = { tolerance: 0.001, highQuality: false };
let generalized = turf.simplify(geojson, options);
return generalized;
}
staticMapImage = function () {
// use route polyline points to build static image request
let pointArray = routePolyline.features[0].geometry.coordinates;
let polyline = `path=stroke:blue|width:${panel.routeWidth}|fill:none`;
pointArray.forEach((pt, idx) => {
polyline += `|${pt[1]},${pt[0]}`;
});
// Add green marker at departure and red marker at end
let markers = `markers=${pointArray[0][1]},${pointArray[0][0]},green|${
pointArray[pointArray.length - 1][1]
},${pointArray[pointArray.length - 1][0]},red`;
const container = html`<div></div>`;
container.value = null;
var image = new Image();
image.src = `https://api.nextbillion.io/maps/${panel.mapStyle.value}/static/auto/${panel.imageHeight}x${panel.imageWidth}.png?key=${apiKey}&attribution=false&${polyline}&${markers}`;
image.onload = () => {
container.value = image;
container.dispatchEvent(new CustomEvent("input"));
};
return container;
}
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.
