Définir dynamiquement le niveau de zoom en fonction d'un cadre de sélection

13

J'ai une carte de dépliant dont la taille dépend de la taille de la fenêtre du navigateur. Je voudrais que le niveau de zoom soit choisi dynamiquement afin qu'il soit aussi zoomé que possible tout en affichant l'intégralité du cadre de sélection.

En ce moment, je viens de coder en dur le niveau de zoom et le point central basé sur une moyenne de points. 

map = new L.Map('map', {
  center: new L.LatLng(
    latitudeSum/locations.length,
    longitudeSum/locations.length
  )
  zoom: 9
})

Au lieu de cela, je voudrais lui donner un cadre de sélection (deux îles) et avoir le niveau de zoom choisi en fonction de la taille de la fenêtre.

leaflet Mike McKay
la source

Réponses:

26

Vous pouvez simplement utiliser:

var group = new L.featureGroup([marker1, marker2, marker3]);

map.fitBounds(group.getBounds());
Farhat Abbas
la source
1
Réponse utile - c'est une meilleure façon de centrer et de zoomer - avant de simplement centrer avec un calcul manuel. FitBounds était la réponse dont j'avais besoin, mais j'ai compris que vous pouviez simplement passer en deux coordonnées pour fitBounds et terminer.
Mike McKay
2
Utilisez certainement la réponse suivante, sauf si vous avez déjà créé des marqueurs.
Andy
12

En utilisant la réponse de @ Farhat , j'ai compris que tout ce dont j'avais besoin était de passer un tableau de tableaux:

map.fitBounds([
  [-4.8587000, 39.8772333],
  [-6.4917667, 39.0945000]
])
Mike McKay
la source
1
Il manque évidemment un crochet carré droit près de la fin. Je ne sais pas pourquoi vous avez annulé ma modification.
Jan Kyu Peblik
1
Vous avez raison sur le support - merci. Je vais arranger ça. Votre modification comportait également une virgule supplémentaire.
Mike McKay
4
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Code également testé avec une virgule de fin. (Parce que la vie est trop courte pour s'embêter avec des lignes qui diffèrent inutilement de manière significative dans le format.)
Jan Kyu Peblik
0

map.fitBounds() fonctionne également très bien si vous travaillez avec des polylignes Google Map:

<!-- required for Leaflet Polyline support -->
<script type="text/javascript" src="https://cdn.rawgit.com/jieter/Leaflet.encoded/68e78190/Polyline.encoded.js"
crossorigin=""></script>
// polylines require backslashes to be escaped (Jinja example)
let encodedRoute = '{{ activity.strava_data['map']['polyline']|replace("\\", "\\\\")|safe }}';
let coordinates = L.Polyline.fromEncoded(encodedRoute).getLatLngs();
let map = L.map('map').fitBounds(coordinates);
naaman
la source
Pourquoi cette réponse a-t-elle été rejetée?
LeeGee
0

C'est ainsi que je l'ai fait grâce à @Mike McKay! ;)

Notez que j'ai ajouté quelques éléments supplémentaires aux coordonnées en tant que rembourrage intérieur, de sorte que les marqueurs ne sont pas directement sur le côté de la carte. De cette façon, c'est plus beau.


const [ ...coordinates ] = locations.map(marker => [ marker.coordinates.latitude + 
0.055, marker.coordinates.longitude + 0.055 ])

map.fitBounds([ ...coordinates ])

VUE.JS WAY: 

mounted () {
   this.$nextTick(() => {
        this.initialZoom()
   })
}


methods: {
   initialZoom () {
       const map = this.$refs.myMap.mapObject
       const [ ...coordinates ] = this.locations.map(marker => [                                  
                                          marker.coordinates.latitude + 0.055,
                                          marker.coordinates.longitude + 0.055 
                                   ]) 

map.fitBounds([ ...coordinates ])
Despertaweb
la source