|
| 1 | +<!DOCTYPE html> |
| 2 | +<html> |
| 3 | +<head> |
| 4 | + |
| 5 | + <title>Quick Start - Leaflet</title> |
| 6 | + <link rel=" stylesheet" href=" https://unpkg.com/[email protected]/dist/leaflet.css" |
| 7 | + integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" |
| 8 | + crossorigin=""/> |
| 9 | + <script src=" https://unpkg.com/[email protected]/dist/leaflet.js" |
| 10 | + integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" |
| 11 | + crossorigin=""></script> |
| 12 | + |
| 13 | +</head> |
| 14 | +<body> |
| 15 | + |
| 16 | + |
| 17 | +<div id="mapid" style="width: auto; height: 800px;"></div> |
| 18 | +<script> |
| 19 | + |
| 20 | + var mymap = L.map('mapid').setView([61.9241, 25.7482], 5); |
| 21 | + L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { |
| 22 | + maxZoom: 18, |
| 23 | + attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + |
| 24 | + '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + |
| 25 | + 'Imagery � <a href="https://www.mapbox.com/">Mapbox</a>', |
| 26 | + id: 'mapbox/streets-v11' |
| 27 | + }).addTo(mymap); |
| 28 | + |
| 29 | + |
| 30 | + const response = fetch('http://lcoalhost:3000/api/route?start=24.793591586422792,60.0862026252685&end=24.91836707142648,60.0277445910978', { |
| 31 | + method: 'GET', |
| 32 | + headers: {'Content-Type': 'application/json'} |
| 33 | + }).then( |
| 34 | + response => response.json() |
| 35 | + ).then((json) => { |
| 36 | + let data=(json).route; |
| 37 | + let wkt=[]; |
| 38 | + for(let i=0; i< data.length; i++){ |
| 39 | + wkt.push(JSON.parse(data[i].geojson).coordinates); |
| 40 | + |
| 41 | + } |
| 42 | + console.log(wkt); |
| 43 | + var polyline= L.polyline(wkt, {color: 'red'}).addTo(mymap); |
| 44 | + mymap.fitBounds(polyline.getBounds()); |
| 45 | + }) |
| 46 | +</script> |
| 47 | + |
| 48 | + |
| 49 | +</body> |
| 50 | +</html> |
0 commit comments