Interdire scroll et zoom hors des limites d'une carte ?

**jpe54** · 25/01/2021, 14h23

Bonjour,

En utilisant un fond de carte telle celui de Géoportail comment limiter zoom et scroll aux dalles présentes ?

Voici un code exemple HTML pour visualiser cette problèmatique :

Code html :

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
        <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>		
    </head>
    <style>
        html, body { height: 100% }
    </style>
 
    <body onload="initialize()">
        <div id="map" style="width:100%; height:100%"></div>
    </body>
</html>
<script>
    function initialize() {
        var map = L.map('map').setView([48.833, 2.333], 6); 
 
 
                var osmGeoportailFrUrl = L.tileLayer('https://wxs.ign.fr/pratique/geoportail/wmts?layer=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&style=normal&tilematrixset=PM&Service=WMTS&Request=GetTile&Version=1.0.0&format=image/png&TileMatrix={z}&TileCol={x}&TileRow={y}', {
                        attribution: 'Map data &copy; <a target="_blank" href="https://www.geoportail.gouv.fr/">Geoportail France</a>',
                        minZoom: 6,
                        maxZoom: 18,
                        maxBoundsViscocity: 1.0
        });
                var bounds = L.latLngBounds([[42, -4.5], [51, 8]]);
                
                map.setMaxBounds(bounds);
                
        map.addLayer(osmGeoportailFrUrl);
                
                map.on('drag', function() { map.panInsideBounds(bounds, { animate: false }); });
                // map.on('drag', function() { map.bounceAtZoomLimits(bounds, { animate: false }); });
 
    }
 
</script>

En zoomant sur des villes comme Strasbourg ou Nice on peut dépasser les limites de la carte Géopartail France...

Est-ce du à des limites inappropriées "Sud-Ouest, Nord-Est" pour la carte "France" traitées par les instructions setMaxBounds voire bounceAtZoomLimits ou panInsideBounds ?

Bref comment procéder ?

Merci par avance.

Amitiés à toutes et tous.

**NoSmoking** · 26/01/2021, 18h30

Bonjour,

En zoomant sur des villes comme Strasbourg ou Nice on peut dépasser les limites de la carte Géopartail France...

il te faut peut-être ajuster tes valeurs pour mieux coller aux vraies valeurs liées au dimensionnement des « tiles » en tenant compte du niveau de zoom.

**jpe54** · 26/01/2021, 20h39

Bonsoir,

Merci pour cette intervention mais où trouver les vraies valeurs liées au dimensionnement des « tiles » en tenant compte du niveau de zoom.

Le niveau maxi de 18 est celui précisé sur géoportail...

Pour le test de la ville de Strasbourg, j'ai essayé d'affiner les coordonnées Nord-Est dans la variable bounds en récupérant le haut de la dernière tuile en zoom 18 mais cela ne change rien. Qu'en aux variables x, y ou z elles sont - sauf erreur - issues des function Leaflet.js...

Code :

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

var bounds = L.latLngBounds([[42, -4.5], [50.73037, 8.43063]]);

**Doksuri** · 27/01/2021, 11h05

salut, quand tu definis ton template de tuiles, tu peux definir un maxNativeZoom, ainsi, si tu le parametres a 5 (par exemple), leaflet continuera de d'autoriser a "zoomer" dans la carte, meme au dela du zoom 5, mais sera bloque aux tuiles de zoom 5 : du coup, plus tu zoomera, plus ce sera pixelise. (ce qui est different du maxZoom, qui lui, bloque la carte)

**jpe54** · 27/01/2021, 13h24

Bonjour,
Merci pour cette idée. Malheureusement un maxNativeZoom: 18, (zoom maximum pour cette carte selon information sur site propriétaire), n'empêche pas en se plaçant sur Strasbourg à partir d'un zoom valeur 13 si déplacement de la carte vers l'ouest de générer des erreurs dans la console.

Erreurs qui se produisent uniquement sur les limites des dalles. Obtenir des coordonnées précises pour tout le contour Nord-est / Sud-Ouest est impossible car les limites de la carte fournie ne représente pas un rectangle...

Nom : Capture.GIF
Affichages : 615
Taille : 145,7 Ko

Nom : Capture.GIF
Affichages : 615
Taille : 145,7 Ko

**cat75** · 27/01/2021, 14h04

Bjr,

Ce lien dont les informations semblent dater de 2017 peut être utile :

https://geoservices.ign.fr/documenta...n-leaflet.html

plus précisément :

https://geoservices.ign.fr/documenta...s-leaflet.html

où on retrouve une option tileSize:256

A+

Interdire scroll et zoom hors des limites d'une carte ?

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager