Interdire scroll et zoom hors des limites d'une carte ?
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:
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 © <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.
