viewof roMap = { apiKey; function groupStepsByLocation(steps) { const grouped = {}; steps.forEach((step) => { const key = `${step.location[0]}-${step.location[1]}`; if (!grouped[key]) { grouped[key] = []; } grouped[key].push(step); }); return grouped; } function createPopupContent(steps) { return `

${new Date( step.arrival * 1000 ).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false })} ${step.type}: ${ step.description ? step.description : "" } ${ index < steps.length - 1 ? '
' : "" }

` ) .join("")}

`; } const container = html`
`; yield container; let routePolyline = null; let originMarker = null; let destinationMarker = null; let waypoints = []; let pos = { lat: 49.21233385, lng: -122.86182 }; const mapRo = (container.value = new nextbillion.maps.Map({ container: document.getElementById("mapRo"), center: pos, zoom: 8, maxZoom: 18, minZoom: 5, style: "https://api.nextbillion.io/maps/streets/style.json", scrollZoom: true })); mapRo.map.on("load", function () { mapRo.map.loadImage( "https://d12qcqjlhp2ahm.cloudfront.net/arrow.png", function (error, image) { if (error) throw error; mapRo.map.addImage("arrow-icon", image); } ); let unescapedPoly = selectedRoute[0].result.routes[0] ? selectedRoute[0].result.routes[0].geometry : ""; let decodedPoly = { type: "FeatureCollection", features: [ { type: "Feature", properties: {}, geometry: { coordinates: nextbillion.utils.polyline .decode(unescapedPoly, 5) .map((c) => c.reverse()), type: "LineString" } } ] }; const firstLabelLayerId = mapRo.map .getStyle() .layers.find((layer) => layer.type === "symbol").id; if (!mapRo.map.getSource("route")) { mapRo.map.addSource("route", { type: "geojson", data: null }); } mapRo.map.getSource("route").setData(decodedPoly); // Remove the route layers if they already exist if (mapRo.map.getLayer("route-casing")) { mapRo.map.removeLayer("route-casing"); } if (mapRo.map.getLayer("route-inner")) { mapRo.map.removeLayer("route-inner"); } // Add outer route line (casing) mapRo.map.addLayer( { id: "route-casing", type: "line", source: "route", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": "#cf9ae2", // Outer color (casing) "line-width": 10 // Outer line thickness } }, firstLabelLayerId ); // Add inner route line (on top of casing) mapRo.map.addLayer( { id: "route-inner", type: "line", source: "route", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": "#ffffff", // Inner color (white) "line-width": 6 // Inner line thickness } }, firstLabelLayerId ); // Add directional arrows along the route mapRo.map.addLayer({ id: "route-arrows", type: "symbol", source: "route", layout: { "symbol-placement": "line", // Place arrows along the line "symbol-spacing": 250, // Adjust the spacing between arrows "icon-image": "arrow-icon", // Use a custom arrow icon "icon-size": 0.35, // Adjust the size of the arrows "icon-allow-overlap": true, // Allow the arrows to overlap with other features "icon-rotation-alignment": "map", // Align arrows to follow the route direction "icon-rotate": 0 // Use the route's bearing to rotate arrows } }); // Animation variables let progress = 0; const arrowSpeed = 0.55; // Control arrow movement speed function animateArrows() { progress += arrowSpeed; // Update the symbol-spacing to create an animation effect mapRo.map.setLayoutProperty( "route-arrows", "symbol-spacing", 50 + (progress % 10) ); // Request the next frame for smooth animation requestAnimationFrame(animateArrows); } // Start the animation //animateArrows(); // Group the steps by location const groupedSteps = groupStepsByLocation( selectedRoute[0].result.routes[0].steps ); Object.values(groupedSteps).forEach((stepsAtLocation) => { const step = stepsAtLocation[0]; // Get the first step for the location (coordinates are the same) const markerElement = document.createElement("div"); markerElement.className = "step-marker"; markerElement.style.backgroundColor = step.description ? step.description.includes("Dump") ? "#f298a1" : "#c1f4c1" : "lightblue"; //if (step.type === "start") { // markerElement.style.backgroundImage = // "url(https://d12qcqjlhp2ahm.cloudfront.net/start_flag4.png)"; // markerElement.style.backgroundSize = "contain"; //} markerElement.style.color = "black"; markerElement.style.fontFamily = "Montserrat"; markerElement.style.fontWeight = "bold"; markerElement.style.borderRadius = "50%"; markerElement.style.padding = "10px"; markerElement.style.width = "5px"; markerElement.style.height = "5px"; markerElement.style.display = "flex"; markerElement.style.alignItems = "center"; markerElement.style.justifyContent = "center"; markerElement.textContent = stepsAtLocation.length.toString(); // Show number of steps at location // Create a marker at the shared location const marker = new nextbillion.maps.Marker({ element: markerElement }) .setLngLat([step.location[1], step.location[0]]) .addTo(mapRo.map); // Create a popup with a summary of the steps at this location const popup = new nextbillion.maps.Popup({ closeButton: false, closeOnClick: false }).setHTML(createPopupContent(stepsAtLocation)); // Show the popup on mouseenter and hide it on mouseleave marker.getElement().addEventListener("mouseenter", () => { popup.setLngLat(marker.getLngLat()).addTo(mapRo.map); }); marker.getElement().addEventListener("mouseleave", () => { popup.remove(); }); }); let bounds = decodedPoly.features[0].geometry.coordinates.reduce(function ( bounds, coord ) { return bounds.extend(coord); }, new nextbillion.maps.LngLatBounds(decodedPoly.features[0].geometry.coordinates[0], decodedPoly.features[0].geometry.coordinates[0])); mapRo.map.fitBounds(bounds, { padding: 20 }); }); return mapRo; }