I have a leaflet map on my website with markers. However, I can't centered it well on Paris. This code works :
map.setView([lat,lng],zoom);
The map shows Paris as it's supposed to but the point I chose is not in the middle of my map. The map is centered on its lower left corner
Does someone know how to center the point in the middle of my map?
Thank's
Edit : full code
var map = L.map('map', {
scrollWheelZoom: false
})
map.setView(<?php echo "[".$latVille.", ".$lngVille."], ".$zoomVille;?>);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v8',
tileSize: 512,
zoomOffset: -1,
accessToken: ''
}).addTo(map);
Array.from($(".js-marker")).forEach((item) => {
let marker = L.popup({
autoClose: false,
closeOnEsacapeKey: false,
closeOnClick: false,
closeButton: false,
className: 'marker',
maxWidth: 300
})
.setLatLng([item.dataset.lat,item.dataset.lng])
.setContent(item.dataset.prix ' €')
.openOn(map);})
Result : Screenshot
CodePudding user response:
Not sure if it's the best way to do it but I used setView after setting the markers and it works !
CodePudding user response:
Can you show the rest of the code please, if your adding markers it may be because of that, set the view after the markers are added, but hard to tell without the code.
I use for the tiles and this code will centre on the point
L.mapbox.accessToken = 'Your token';
var map = L.mapbox.map('map')
.setView([52.462610, -1.588580], 14) .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
You have to set the view properly like :
This works
