don/pilgrim
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simple routing with GH

Browse Source
This commit is contained in:
don philipe
2024-08-04 20:26:32 +02:00
parent 0e378867c1
commit 54fd1e4704
8 changed files with 188 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/main/webapp/index.html
View File

@@ -2,9 +2,10 @@
<html>
<head>
<meta charset="utf-8">
<title>Display a map</title>
<title>Pilgrim</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<script src="lib.js"></script>
<script src="jquery-3.7.1.min.js"></script>
<script src="lib.js"></script>
<script src="https://unpkg.com/maplibre-gl@3.1.0/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@3.1.0/dist/maplibre-gl.css" rel="stylesheet">
<style>
@@ -34,52 +35,10 @@
</style>
</head>
<body>
<div id="map">
</div>
<div id="map"></div>
<pre id="features"></pre>
<script>
var map = new maplibregl.Map({ container: 'map', // container id
//style: 'https://demotiles.maplibre.org/style.json', // style URL
style: 'spacedon.json', // style URL
center: [13, 51], // starting position [lng, lat]
zoom: 6 // starting zoom
});
map.addControl(new maplibregl.NavigationControl());
map.on('mousemove', function (e) {
var features = map.queryRenderedFeatures(e.point);
// Limit the number of properties we're displaying for
// legibility and performance
var displayProperties = [ 'type', 'properties', 'id', 'layer', 'source', 'sourceLayer', 'state' ];
var displayFeatures = features.map(function (feat) {
var displayFeat = {};
displayProperties.forEach(function (prop) {
displayFeat[prop] = feat[prop];
});
return displayFeat;
});
document.getElementById('features').innerHTML = JSON.stringify( displayFeatures, null, 2 );
});
map.on('click', function (e) {
var coordinates = e.lngLat;
// Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new maplibregl.Popup()
.setLngLat(coordinates)
.setHTML('<button>start</button></br><button>via</button></br><button>finish</button>')
.addTo(map);
});
const startMarker = new maplibregl.Marker({draggable: true})
.setLngLat([0, 0]);
const finishMarker = new maplibregl.Marker({draggable: true})
.setLngLat([0, 0]);
const viaMarkers = new Array();
lib.init();
</script>
</body>
</html>