- Zvuk u boji').addTo(map); async function getRoute(start) { const query = await fetch(`https://api.mapbox.com/directions/v5/mapbox/driving/${start[0]},${start[1]};${end[0]},${end[1]}?alternatives=false&annotations=distance%2Cspeed&geometries=geojson&language=hr-HR&overview=full&steps=true&access_token=${mapboxgl.accessToken}`, { method: 'GET' }); const json = await query.json(); const data = json.routes[0]; const route = data.geometry.coordinates; const geojson = { type: 'Feature', properties: {}, geometry: { type: 'LineString', coordinates: route } }; if (map.getSource('route')) { map.getSource('route').setData(geojson); } else { map.addLayer({ 'id': 'route', 'type': 'line', 'source': { 'type': 'geojson', 'data': geojson }, 'layout': { 'line-join': 'round', 'line-cap': 'round' }, 'paint': { 'line-color': 'aqua', 'line-width': 5, 'line-opacity': 0.75 } }); } const instructions = document.getElementById('instructions'); const steps = data.legs[0].steps; let tripInstructions = ''; for (const step of steps) { tripInstructions += `${step.maneuver.instruction}`; } instructions.innerHTML = `- do Takt-a: ${Math.floor(data.duration / 60)} min. | ${Math.floor( data.distance/1 )} m
${tripInstructions}
`; } map.on('load', () => { getRoute(semafor); map.addLayer({ 'id': 'point', 'type': 'circle', 'source': { 'type': 'geojson', 'data': { 'type': 'FeatureCollection', 'features': [{ 'type': 'Feature', 'properties': {}, 'geometry': { 'type': 'Point', 'coordinates': end } }] } }, 'paint': { 'circle-radius': 10, 'circle-color': 'aqua', 'circle-stroke-width': 2, 'circle-stroke-color': 'aliceblue' } }); map.on('click', (event) => { const coords = Object.keys(event.lngLat).map((key) => event.lngLat[key]); const start = { 'type': 'FeatureCollection', 'features': [{ 'type': 'Feature', 'properties': {}, 'geometry': { 'type': 'Point', 'coordinates': coords } }] }; if (map.getLayer('start')) { map.getSource('start').setData(start); } else { map.addLayer({ 'id': 'start', 'type': 'circle', 'source': { 'type': 'geojson', 'data': { 'type': 'FeatureCollection', 'features': [{ 'type': 'Feature', 'properties': {}, 'geometry': { 'type': 'Point', 'coordinates': coords } }] } }, 'paint': { 'circle-radius': 10, 'circle-color': 'hotpink' } }); } getRoute(coords); }); });