Develop Reference

How to solve this problem with pop-ups in Leaflet

I have a website featuring a map with a marker for different places of interest. I am using the js code below that works perfectly :
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(mymap);
//. t is an array containing gps positions of the different places
for(i=0;i<t.length;i++){
var marker = L.marker([t[i][lat], t[i][lon]]).addTo(mymap);
}
But when I try to add a pop-up for each marker with the code below, the whole map is moved to the left, and not centered anymore on the initial position defined with setView :
for(i=0;i<t.length;i++){
var marker = L.marker([t[i][lat], t[i][lon]]).addTo(mymap);
marker.bindPopup("<b>mon titre"</b><br>mon texte").openPopup();
}
Any idea of what is going on and the best way to solve the problem ?
Thank you in advance.

I found the solution : the problem comes from the fact that the pop-ups are open.
Using the following line of code works :
marker.bindPopup("<b>mon titre"</b><br>mon texte").closePopup();

How align gpx track with leaflet map Javascript

I have a problem with my gpx track on leaflet map.
My track is displayed on the map but not aligned with road.
I use this library to display the track :
https://github.com/mpetazzoni/leaflet-gpx
I don't kwo if the library have a problem or if i configure my leaflet map with wrong data.
I make the website with laravel
L.tileLayer('https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png', {
maxZoom: 20,
attribution: 'CyclOSM | Map data: © OpenStreetMap contributors'
}).addTo(mymap);

how to display leaflet map in specific div tag?

i am trying to display leaflet map but i need to display map in specific div tag using id like document.getElementById("map") like this, i have given code below and i am using vuejs.
below is my div tag to render map
<div id="map">
</div>
below is my script
mounted () {
// L.Icon.Default.imagePath = 'assets/vendor/leaflet' TODO: make it work with webpack
Leaflet.Icon.Default.imagePath = 'https://unpkg.com/leaflet#1.0.3/dist/images'
let map = Leaflet.map(this.$el).setView([51.505, -0.09], 13)
Leaflet.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors',
}).addTo(map)
Leaflet.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup()
},

I don't know Vue, but normally you don't need to make a document.getElementById ("map").
you just have to pass the id in L.map like that
let map = Leaflet.map("map").setView([51.505, -0.09], 13)
And you have to give a height to your div "map", for example
<div id="map" height="500px">
</div>
Edit
What's wrong ? on my codesandbox you can see an example in html and javascrip which is displayed normally. Here is a link to a tutorial that uses Leaflet and Vuejs

Leaflet.js - Tilelayer visible above geojson layer. GeoJSON interactivity issue

I have a leaflet.js project where I have a baselayer, a polygon geojson layer, and another tilelayer above the geojson layer which shows placenames. I've managed to get the placenames tilelayer to visualise above the geojson layer by adding it to a map pane. However, this has disabled click and hover events on the geojson layer. I'm thinking I probably have to add the goejson layer to it's own pane, or possibly the same pane as the placenames tilelayer, but I'm not sure.
Here's my code which add my placenames layer to a pane:
var topPane = map.createPane('leaflet-top-pane', map.getPanes().mapPane);
topPane.appendChild(CartoDB_PositronOnlyLabels.getContainer());
Here's my CSS code for the pane:
.leaflet-top-pane {
pointer-events: none;
}
I've tried adding my geojson layer to the same pane, and changing the pointer-events option, but either it won't work, or I haven't hit on the right combination. Has anyone any ideas as to how I can resolve this so that I can have my tilelayer overlay above my geojson layer but still be able to interact with the geojson layer?

You're not using the Leaflet library properly (e.g. manually appending a layer to a HTML container), assuming you will know the CSS class of the pane, etc).
Use this instead:
map.createPane('labels');
map.getPane('labels').style.zIndex = 1000;
map.getPane('labels').style.pointerEvents = 'none';
var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors, © CartoDB'
}).addTo(map);
var positronLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors, © CartoDB',
pane: 'labels'
}).addTo(map);
You can see a working example here.

LeafLet to show between places

I am using leaflet map in my project.
Suppose I have two markers in my map say A and B
then how can i show direction from A to B place using leaflet.
Any Example related to this??
Or any other open source Map i can use??

You can use Leaflet Routing Machine plug-in as shown in this link. You just need to include the appropriate css and js files:
<link rel="stylesheet" href="leaflet-routing-machine.css" />
<script src="leaflet-routing-machine.min.js"></script>
and do something like this:
var map = L.map('map');
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.Routing.control({
waypoints: [
L.latLng(57.74, 11.94), //first marker position
L.latLng(57.6792, 11.949) //second marker position
]
}).addTo(map);