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+

**jpe54** · 28/01/2021, 15h03

Bonjour,

Merci pour ces liens que j'avais effectivement consulté, mais même en ajoutant l'option tileSize:256 on peut déplacer la carte en dehors de ses limites ce qui génère les erreurs constatées dans la console...

Il est vrai que le remaniement des cartes Géoportail n'est peut être pas finalisé et il est très difficile sur leur site ou via la jungle Google de filtrer que les informations récentes !

Reste que cette portion de code semble fonctionner à certaines valeurs de zoom pour la plage Nord-Est, mais il me faudrait trouver les valeurs exactes à placer en variable bounds !

Code :

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

1
2
var bounds = L.latLngBounds([[42, -4.5], [50.73037, 8.43063]]);
 map.on('drag', function() { map.panInsideBounds(bounds, { animate: false }); });

**NoSmoking** · 28/01/2021, 18h11

Tu as choisi la clé « pratique » donc il ne faut pas s'attendre à avoir tout le catalogue, Géoservices IGN !

• Fait l’acquisition d'une autre niveau de clé ;
• Change de service de cartographie, OpenStreetMap par exemple.

**jpe54** · 30/01/2021, 11h02

Effectivement avec la clef "pratique" je sais à quoi m'en tenir en particulier avec les types de carte et la limite France... de même en utilisant la cartographie OpenStreetMap.

Mais le vieux dinosaure que je suis trouve "bizarre" cette possibilité de sortir de la carte sur des tuiles inexistantes même pour de simple test. Peut être lié à des remaniements en cours puisque ce type de licence datant de 2017 précise - Je cite : "une clé “pratique” accessible sans création de compte préalable et proposant les ressources les plus communément utilisées du Géoportail (cartes et photos aériennes)". Or ce n'est plus ou pas encore le cas pour une carte satellite.

Ce n'est nullement bloquant et je suppose non dommageable pour leur site mais soit c'est lié à un mauvais codage, comme un zoom "client" Maxi à 18 accepté à tort pour ce type de clef, soit il est entre chaise et clavier de l'utilisateur que je suis. Je présume que des clefs spécifiques selon liste de pays pourraient être source de revenus...

Faute d'une clef "officielle" provisoire je ne peux tester avant "achat".

Une carte raster "rectangulaire", vu la position de la Bretagne, laisserai visible les tuiles de l'Angleterre, de fait il serait plus propre de bloquer la requête ou renvoyer une tuile "générique" vierge ou floutée, fonction de la clef présente... codage laissé à la discrétion du code client, ou présent dans l'API propriétaire au site Géoportail.

Un remarque à poster peut-être ici sur le forum "IGN API Géoportail" à défaut d'un contact direct depuis leur site.

Excellente fin de journée et amitiés à vous tous pour ces échanges.

**NoSmoking** · 30/01/2021, 11h12

Essaies peut-être avec comme service : https://wxs.ign.fr/choisirgeoportail/geoportail/wmts, vu sur Géoservices IGN, c'est plus « pratique » mais « choisirgeoportail ».

**jpe54** · 30/01/2021, 11h15

" choisirgeoportail " ne fonctionne plus et d'ailleurs une question a été posée sur ce forum : https://www.developpez.net/forums/d2...il-interdites/

**NoSmoking** · 30/01/2021, 11h52

Ah oui il faut changer également la couche et le format, par exemple :
https://wxs.ign.fr/choisirgeoportail...5&TileRow=5655

**jpe54** · 30/01/2021, 15h21

Oups !

En fait je me suis fait piéger par une interruption de service qui m'a conduit à rechercher une réponse sur votre site lors d'une actualisation de fichiers HTML pour répondre aux exigences de Edge Chrominuim https://dequeuniversity.com/rules/axe/4.1.

L'accès étant toujours impossible en tenant compte du seul changement de couche, j'ai ensuite modifié format et clef, et de fait considéré hâtivement que l'ancienne clef était caduque.

Grace à votre post je constate que, la clef "choisirgeoportail" est à nouveau opérationnelle avec une carte satellite (ORTHOIMAGERY.ORTHOPHOTOS) de format inchangé (jpeg).

Reste ces erreurs dans la console hors de la zone France pour les 2 types de couche, qui étaient latentes et bien antérieures à cette mise à jour du site Géoportail.

1000 Mercis !

**cat75** · 22/02/2021, 14h23

Bonjour,

Peut-être un peu tard mais voici un exemple de solution à ce lien :

https://stackoverflow.com/questions/...nds-in-leaflet

Reste à définir correctement la zone !

**NoSmoking** · 22/02/2021, 15h44

Reste à définir correctement la zone !

C'est cela visiblement le problème !

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

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager