Develop Reference

Methods to get coordinates on Leaflet

I have a button to show me a text with the coordinates of the center of the bounds. Like the example shown on easybutton
L.easyButton('fa-crosshairs fa-lg', function(btn, map){
alert('coordinates:'map.getCenter().toString())
}).addTo(Map);
But it only works with getCenter, if I change to getSouthEast or any of the corners of the bounds it doesn't work.
What am I missing here?
According to the documentation it's the very same.

Ok, I need to add getBounds() so it'd be like
L.easyButton('fa-crosshairs fa-lg', function(btn, map){
alert('coordinates:'map.getBounds.getSouthEast().toString())
}).addTo(Map);

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: How do I prevent map panning to last drawn marker?

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

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);

Leaflet circleMarkers don´t show up

I am trying to draw hundres of circleMarker in a Leaflet map, I am using flask and foundation.js, the same code work in different app built with bootstrap.js
This is my code:
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<script>
var map = L.map('map').setView([40,-4], 6);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-cnkhv76j/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery CloudMade',
maxZoom: 18
}).addTo(map);
var geojsonMarkerOptions = {
radius: 100,
fillColor: "#FFF803",
color: "#DDFF03",
weight: 1,
opacity: 0.8,
fillOpacity: 0.8
};
{% for item in data['data'] %}
L.circleMarker([{{item[0]}},{{item[1]}}],geojsonMarkerOptions).addTo(map);
{% endfor %}
var marker = L.marker([41.5, -0.09]).addTo(map);
marker.bindPopup("I am a circle.");
var circle = L.circle([51.508, -0.11], 500, {color: 'red',
fillColor: '#f03',
fillOpacity: 1
}).addTo(map);
</script>
At the bottom I tried a fixed marker which appears and fixed circle which doesn´t, could it be a problem with foundation.js? Because in a previous project with other framework worked perfectly.

I tried your code, replacing 51.508 with 41.508 (so the red circle is near the marker) and adding just a single circleMarker. It works. So the problem is not in the code.
Please check that you have included leaflet.css from the same locations as leaflet.js. Also check there are no errors in a javascript console (Ctrl+Shift+J in Firefox). Check that coordinates from {{item[0/1]}} are properly formatted (decimal separator is a dot, no extra symbols). Try using more recent version of Leaflet library, 0.7.3.

Ilja, many thanks. You were right the circles were pushed behind the map by a css. In this case, I was also using d3.js for some chart, and as soon as I got rid of nvd3's css the circles showed up.

I've been having the same issue, and it turns out that it is the nv.d3.css file. I found that commenting out these lines will allow you to draw a circle:
display: block;
width: 100%;
height: 100%;'
I don't know what potential side effects this might have on your page, but I think the main issue is that d3 decides to hijack any svgs that you put on the page.
EDIT: my case was with circles, but I wouldn't be surprised if it is the same problem between circles and circle markers.
EDIT 2:
It's been a while, but someone just liked this, so I feel like I should inform you that in the end, these didn't play nice together. I didn't have the time to really tinker with it, so I was forced to remove the leaflet circles and pass on the project with a recommendation that it might just be easier to plug in Google Maps. Hope that's helpful.

That question was posted long ago.
But May my answer helps someone.
When we instanciate L.CircleMarker(...), the circle is created, but not showing.
In my case, i noticed that it wait for the window resize event in order to display.
So juste trigger that event after L.CircleMarker(...).addTo(map) and the circle will appear like a charm.
With JS
window.dispatchEvent(new Event('resize'));
With Jquery
$(window).trigger('resize');