Dépliant maxBounds - limites ne fonctionnent pas

J'ai essayé Leafletjs maxBounds avec exemple de code que j'ai trouvé à Mapbox.

Vous trouverez ci-dessous mon code complet, également dans un jsfiddle ici.

<!DOCTYPE HTML>
<html>
<head>
    <title>map - leaflet test bounds</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <!-- leafletjs -->
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
        <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

        <style>
            body {
                margin: 0;
                padding: 0;
            }
            html, body, #map {
                height: 100%;
                width: 100%;
            }
        </style>
</head>

<body>
    <div id="map">
        <script>

            var southWest = L.latLng(40.712, -74.227),
                northEast = L.latLng(40.774, -74.125),
                mybounds = L.latLngBounds(southWest, northEast);

            var map = L.map('map').setView([40.743, -74.176], 17);
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png' , {
                maxBounds: mybounds,
                maxZoom: 18,
                minZoom: 16,
                attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
            }) .addTo(map);

            L.marker([40.743, -74.176]) .addTo(map);

        </script>
    </div>        
</body>

Le jsfiddle résultat a l'air bizarre, je ne sais pas pourquoi.

Pourquoi ne pas le code supérieur, comme le Mapbox exemple?

OriginalL'auteur wolfmuc | 2015-03-22

  1. 3

    Vous devez utiliser des limites comme une option de L. tileLayer, et pas maxBounds.

    Limites de référence

    Aussi, il semble que vous avez chargé un fichier erroné pour le dépliant.css dans JSFiddle, la source correcte est: est-ce http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css

    Enfin, évitez d'utiliser le pourcentage de tailles dans JSFiddle, utiliser des pixels à la place.
    Voici un travail JSFiddle: http://jsfiddle.net/1zyL4q4a/4/

     L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png' , {
            bounds: mybounds,
            maxZoom: 18,
            minZoom: 16,
            attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
  }).addTo(map);
    Je pense que maxBounds est droit. "Lorsque cette option est activée, la carte de la limite de la vue de la donnée géographique limites, rebondissant à l'utilisateur lorsqu'il tente de pan en dehors de la vue." [lien](leafletjs.com/reference.html)[/lien] je veux que l'utilisateur a rebondi. J'ai vérifié le css dans jsfidlle. C'était mal. Maintenant, il fonctionne. Merci.
    maxBounds est pour la restriction de la mapview (à utiliser avec la carte, pas avec L. tileLayer), les limites est de la restriction de carreaux de chargement
    maxBounds et des limites est très similaire de mon point de vue. Malades essayer.
    jsfiddle.net/wolfmuc/1zyL4q4a/7 - et il ne fonctionne pas.
    Strage, votre jsfiddle fonctionne très bien pour moi. La vue de la carte qu'il bondit en arrière quand j'arrive à la limite.

    OriginalL'auteur Alexandru Pufan

  2. 7

    C'est la (ma) du code final.

    var map = L.map('map', {
    maxZoom: 18,
    minZoom: 16,
    maxBounds: [
        //south west
        [40.712, -74.227],
        //north east
        [40.774, -74.125]
        ], 
}).setView([40.743, -74.176], 17);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
}) .addTo(map);

L.marker([40.743, -74.176]) .addTo(map);

    OriginalL'auteur wolfmuc