Discussion :

[sylvain257]

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 :-)

[NoSmoking]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[sylvain257]

Merci pour ton retour,

J'en suis là actuellement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[sylvain257]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
})

[NoSmoking]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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);