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);
Related
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();
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);
I haven't looked at the page for a while but it was working a couple months back. Now when I go there I can see my popup with text in it and the map container as well as the + and - signs. Basically everything is there except the actual map! It is just a grey background. Any ideas?
I am using the latest version css and js from can
https://unpkg.com/leaflet#1.7.1/dist/leaflet.css
https://unpkg.com/leaflet#1.7.1/dist/leaflet.js
some basic map code
var map = L.map('testmap').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
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.
I have a basic Leaflet map where I need to draw several markers and lines on. How do I prevent the map from panning to the last drawn object?
I've read about setting autopan : False for popups from here.
Can the autopan : false option work for leaflet markers?
Without you supplying any code, it's hard to say. Normally (per default) it doesn't pan to a new marker. Take this code for example:
// HTML
<button onclick="setMarker()">Draw marker on Paris</button>
<div id="map"></div>
// Default map
var map = L.map('map', {
'center': [0, 0],
'zoom': 0,
'layers': [
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © OpenStreetMap contributors'
})
]
});
// Fit map to view London
map.fitBounds([
[51.286839, -0.510350],
[51.692322, 0.334030]
]);
// Function to draw marker on Paris
function setMarker () {
L.marker([48.8567, 2.3508]).addTo(map);
}
It sets the map to fit London and when you click the button, it draws a marker on Paris but the map doesn't pan. If you're seeing panning behaviour on your map, it must be something else you're doing to your map. Here you can test it for yourself:
Working example on Plunker: http://plnkr.co/edit/C2qblP?p=preview