Mettre latitude, longitude et zoom en url

Version imprimable

20/02/2023, 14h26
sylvain257

Mettre latitude, longitude et zoom en url

Bonjour,

Je cherche à mettre en paramètres d'url la latitude, la longitude et le zoom pour l'affichage d'une carte et que ces paramètres changent suivant que l'on se déplace dans cette carte.

Je travaille sur Mapbox/Maplibre et en JS/Jquery (pas de Vue, React ou Angular du coup)

Il s'agit, semble t il d'utiliser UrlParams mais je ne sais pas comment faire.

Est ce que quelqu'un aurait des pistes ?

Merci :-)

Bonjour,
tu récupères la position de ton marqueur, le zoom actif de la carte et tu crées ton paramètre.
Quelque chose comme :
Code:

1 2 3 4 const pos = marker.getLatLng(); const zoom = map.getZoom(); const search = "lat=" + pos.lat.toFixed(6) + "&lon=" + pos.lng.toFixed(6) + "&z=" + zoom; document.location.search = search;
à adapter bien sûr !

Merci pour ton retour,

J'en suis là actuellement :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
  map.on('moveend', (e) => {
 
      var zoom = map.getZoom() || 7;
      var latitude = map.getCenter().lat || 47;
      var longitude = map.getCenter().lng || 2;
 
      var params = "lat=" + latitude + "&lon=" + longitude + "&zoom=" + zoom;
 
      var new_url = new URL('https://monurl.fr/index.php?' + params);
 
document.location.search = new_url;
 
 
    })
 
    map.on('zoomend', (e) => {
 
      var zoom = map.getZoom() || 7;
      var latitude = map.getCenter().lat || 47;
      var longitude = map.getCenter().lng || 2;
 
      var params = "lat=" + latitude + "&lon=" + longitude + "&zoom=" + zoom;
 
      var new_url = new URL('https://monurl.fr/index.php?' + params);
 
document.location.search = new_url;
 
 
    })

Le problème est que le document.location.search = new_url rafraichit la page...

Des idées ?

merci pour vos retours

Sylvain

21/02/2023, 11h43
JérémieL

Pour construire la query string je recommande d'utiliser un objet URLSearchParams, puis d'appeler History.pushState, ou History.replaceState, selon que l'on veut créer ou non une entrée dans l'historique.

Code:

window.history.replaceState({}, '', '?zoom=7')

Pour les gens qui se poseraient la même question que moi, cad comment faire une URL dynamique avec la longitude, la latitude et le zoom avec une carte Mapbox/Maplibre.

Je met ce code, je ne sais pas trop pourquoi ça marche mais ça se comporte comme je le souhaite. Surement que ce code est un peu gras et mérite d'être optimisé.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
var defaultZoom = 10;
var defaultLat = 45;
var defaultLng = 5;
 
function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}
 
//convert URL parameter to a variable and a number
var urlZoom = +getQueryVariable("zoom");
var urlLat = +getQueryVariable("lat");
var urlLng = +getQueryVariable("lng");
 
//check if URL parameters are set, if not, fallback to default
if (urlZoom == 0) {
    myZoom = defaultZoom;
} else {
    myZoom = urlZoom;
}
if (urlLat == 0 ) {
    myLat = defaultLat;
} else {
    myLat = urlLat;
}
if (urlLng == 0) {
    myLng = defaultLng;
} else {
    myLng = urlLng;
}
 
    const map = new maplibregl.Map({
      container: 'map', // container's id or the HTML element in which MapLibre GL JS will render the map
      style: {
        version: 8,
        sources: {},
        layers:[]
      },
      center: [myLng, myLat], // starting position [lng, lat]
      zoom: myZoom, // starting zoom
      pitch: 0,
      bearing: 0,
      maxPitch: 80,
      maxZoom: 21
    });
 
 
    map.on('moveend', (e) => {
 
      var new_url = new URLSearchParams();
 
      var myZoom = new_url.get('zoom') || map.getZoom().toFixed(0);
      var myLat = new_url.get('lat') || map.getCenter().lat.toFixed(4);
      var myLng = new_url.get('lng') || map.getCenter().lng.toFixed(4);
 
      var params = "zoom="+ myZoom +'&lng='+ myLng + '&lat=' + myLat;
 
      window.history.pushState({}, '', '?'+params)
 
    })
 
    map.on('zoomend', (e) => {
 
      var new_url = new URLSearchParams();
 
      var myZoom = new_url.get('zoom') || map.getZoom().toFixed(0);
      var myLat = new_url.get('lat') || map.getCenter().lat.toFixed(4);
      var myLng = new_url.get('lng') || map.getCenter().lng.toFixed(4);
})

Tu ne peux pas utiliser ton pushState comme cela et il vaut mieux utiliser replaceState pour éviter que l'historique ne s'allonge.
Code:

1 2 3 4 5 const url = new URL(window.location); url.searchParams.set("lat", map.getCenter().lat.toFixed(6)); url.searchParams.set("lon", map.getCenter().lng.toFixed(6)); url.searchParams.set("z", map.getZoom()); window.history.replaceState({}, "", url);