parcoursmob-default-theme/web/layouts/journeys/_partials/map.html

223 lines
7.1 KiB
HTML

{{define "map"}}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a default marker</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.css' rel='stylesheet' />
<script src=https://cdnjs.cloudflare.com/ajax/libs/mapbox-polyline/1.1.1/polyline.js></script>
<script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
<link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
</head>
<body>
<input id="de" type="hidden" value="{{.ViewState.group.Data.depart.geometry.coordinates}}">
<input id="ar" type="hidden" value="{{.ViewState.group.Data.arrive.geometry.coordinates}}">
<input id="des" type="hidden" value="{{.ViewState.group.Data.depart.geometry.coordinates}}">
<input id="arri" type="hidden" value="{{.ViewState.group.Data.arrive.geometry.coordinates}}">
<div>
<span id="polyline-info-content"></span>
<div id='map' style='width: 730px; height: 300px;'></div>
<script>
function routeNotOptimized(body) {
$.ajax({
url: 'https://routing.geo.scity.coop/route?json=' + JSON.stringify(body),
type: "GET",
success : retrievePolylineInfo,
error: errorRoute,
});
}
function errorRoute() {
console.log("errorRoute : couldn't find a route")
}
function reverseCoord(geojsonCoord){
if(geojsonCoord != null) {
var tmpGeojsonCoord =[];
for (var i=0; i<geojsonCoord.length; i++) {
tmpGeojsonCoord.push([geojsonCoord[i][1],geojsonCoord[i][0]]);
}
return tmpGeojsonCoord;
}
}
function drawPolylineOnMap(polylineCoord) {
var memberSource;
var mapLayer = map.getLayer('route');
var memberSource = map.getSource('route');
if(typeof mapLayer !== 'undefined') {
map.removeLayer('route')
map.removeSource('route')
}
map.addLayer({
'id': 'route',
'type': 'line',
'source': {
"type": "geojson",
"data": {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": reverseCoord(polylineCoord)
},
}
},
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#03A9F4',
'line-width': 7
}
});
var i = document.getElementById('de').value
var words = i.split(' ');
const w = words[0].split('[')
const ww = words[1].split(']')
a = (w[1]);
b = (ww[0])
depCoord = [a, b]
var ar = document.getElementById('ar').value
var wordsr = ar.split(' ');
const wr = wordsr[0].split('[')
const wwr = wordsr[1].split(']')
var r = (wr[1]);
var br = (wwr[0])
destCoord = [r, br]
map.setZoom(9);
//console.log("Ici : " [depCoord[0],depCoord[1]],[destCoord[0],destCoord[1]])
map.fitBounds([[depCoord[0],depCoord[1]],[destCoord[0],destCoord[1]]],{padding: 40});
}
function retrievePolylineInfo(polylineInfo) {
var polylineString = ""
for (var i=0; i < polylineInfo.trip.legs.length ; i++){
polylineString = polylineString + polylineInfo.trip.legs[i].shape
}
var polylineCoord = polyline.decode(polylineString, 6)
var rideDuration = polylineInfo.trip.summary.time
var rideDistance = polylineInfo.trip.summary.length
if (rideDuration != null && rideDistance != null) {
document.getElementById("polyline-info-content").innerHTML = "Durée : " + (Math.round(((rideDuration / 60) + Number.EPSILON) * 100) / 100) + " min<br/>Distance : " + rideDistance + " km";
}
// $("#polyline-str").val(polylineString);
// $("#ride-duration").val(rideDuration);
// $("#ride-distance").val(rideDistance);
console.log("rideDuration :", rideDuration, ", rideDistance ",rideDistance)
if(polylineCoord != null && polylineCoord.length > 0 ){
drawPolylineOnMap(polylineCoord)
}
}
function createPolyline() {
origin= [a, b]
destination = [r, br]
console.log("origin : ", origin)
if(origin != null && destination != null && origin != "" && destination != ""){
console.log("Get polyline infos")
var hash_locs = [];
hash_locs.push({
'lat' : (origin[1]),
'lon' : (origin[0])
})
hash_locs.push({
'lat' : (destination[1]),
'lon' : (destination[0])
})
var body = {"locations":[{
'lat' : (origin[1]),
'lon' : (origin[0])
},{
'lat' : (destination[1]),
'lon' : (destination[0])
}],"costing":"auto"}
$.ajax({
url: 'https://routing.geo.scity.coop/route?json=' + JSON.stringify(body),
type: "GET",
success : retrievePolylineInfo,
error: routeNotOptimized(body),
});
console.log("JSON.stringify(body)",JSON.stringify(body))
}
}
var depCoord = []
var destCoord = []
var a, b
depCoord = [a, b]
console.log("yeeesss: ", a)
//////////////////////////////
//mapboxgl.accessToken = 'pk.eyJ1Ijoic291a2FpbmFsYWZkaWxpIiwiYSI6ImNsYjB1djUxNjAwaWQzdm82dnJ5OXJrZzcifQ.0i8xkskwRps3W1PFwApL_Q';
const map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
center: [-74.5, 40],
zoom: 9,
});
map.addControl(new maplibregl.NavigationControl(), 'bottom-right');
var markers = []
//destination
var i = document.getElementById('de').value
var words = i.split(' ');
const w = words[0].split('[')
const ww = words[1].split(']')
a = (w[1]);
b = (ww[0])
depCoord = [a, b]
console.log("yeeesss: ", depCoord[0])
console.log(b)
//arrive
var ar = document.getElementById('ar').value
var wordsr = ar.split(' ');
const wr = wordsr[0].split('[')
const wwr = wordsr[1].split(']')
var r = (wr[1]);
var br = (wwr[0])
destCoord = [r, br]
console.log(br)
/////
{var marker = new maplibregl.Marker();
marker.setLngLat([a, b])//starting position
departureMarker = marker.addTo(map);
map.flyTo({
center: [a, b]
});
console.log("again: ", a , b)
markers.push(marker)
createPolyline()
}
{var marker = new maplibregl.Marker();
marker.setLngLat([r, br])//ending position
destinationMarker = marker.addTo(map);
createPolyline()
}
markers.push(marker)
</script>
</body>
</html>
{{end}}