Develop Reference

Leaflet map doesn’t work after adding a new control

After adding Leaflet.MousePosition my map doesn’t show.
var lmap = new L.map("lmap", {
zoomControl: false,
maxZoom: 11,
minZoom: 3,
}).setView([34.543896, 63.160652], 6);
L.control.zoom({
position: 'topright'
}).addTo(lmap);
lmap.addControl(new L.Control.Fullscreen({position: 'bottomleft'}));
L.control.mousePosition({position: 'bottomright'}).addTo(lmap);

You are using map but you have to use lmap
L.control.mousePosition({position: 'bottomright'}).addTo(lmap);
Also you have to add the library src to your project.
Add following to your html file:
<script src="https://cdn.jsdelivr.net/npm/leaflet-mouse-position#1.2.0/src/L.Control.MousePosition.min.js"></script>

Leaflet map "center" option not working

I have a map and I want to center it to concrete point. Following implementation is working correctly:
var map = L.map('map', {
crs: crs
}
);
map.setView([58.66, 25.05], 2);
However, implementation below is not working correctly and does not center the map. Why it is happening? I get just blank grey area instead of my map. According to the documentation it does completely the same as the code above.
var map = L.map('map', {
crs: crs,
center: L.latLng(58.66, 25.05)
}
);
map.setZoom(2);
Why?

I think if you specify the center option when creating the map you also have to specify the zoom option or leaflet doesn't know what tiles to request.
var map = L.map('map', {
center: L.latLng(58.66, 25.05),
zoom: 2
});
When you use setView, you are setting center and zoom so leaflet knows the tiles to request.

Have you tried
var map = L.map('map', {
crs: crs,
center: L.latLng(58.66, 25.05),
zoom: 2
});
?

Google maps does not zoom in past a certain point

Here is the project
var map = new google.maps.Map(document.getElementById('map-canvas'), {
disableDoubleClickZoom: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
zoom: 15,
center: new google.maps.LatLng(34.239415, -118.529339),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
https://jsfiddle.net/yxg7spbp/2/
the problem is i want to zoom in closer to see the buildings outlines of the campus however if i change the zoom value past 15 it does not have any effect, how can i zoom in closer.

The Terrain map type is limited to a zoom of 15. If you want to zoom in more, use the ROADMAP map type (up to about 19) or SATELLITE map type (use the MaxZoom Service to determine the maximum zoom available)
related question: Google maps: change from map view to satellite view
fiddle that changes the mapType when the current type reaches its maxZoom
google.maps.event.addListener(map, 'zoom_changed', function () {
var maptype = map.getMapTypeId();
if (map.getZoom() >= map.mapTypes[maptype].maxZoom) {
if (map.getMapTypeId() == google.maps.MapTypeId.TERRAIN) {
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
} else if (map.getMapTypeId() != google.maps.MapTypeId.HYBRID) {
map.setMapTypeId(google.maps.MapTypeId.HYBRID)
map.setTilt(0); // disable 45 degree imagery
}
}
});;
The Google Maps API provides map tiles at various zoom levels for map type imagery. Most roadmap imagery is available from zoom levels 0 to 18, for example. Satellite imagery varies more widely as this imagery is not generated, but directly photographed.

Load markers before map

I'm trying to reproduce Foursquare's web user interface.
What I noticed is that on the tip map, the markers are load way before the map was loaded.
is this possible with leaflet ?
With this piece of code, I don't think it's possible
L.marker([lat, lng], {icon: iconMarker}).addTo(map);
How are they doing it?

I think I know how:
They're loading the Tiles after positioning the markers, something like :
markers = L.marker([lat, lng], {icon: iconMarker}).addTo(map);
L.tileLayer('https://{s}.tiles.mapbox.com/v4/MapID/{z}/{x}/{y}.png?access_token=Token').addTo(map);

Ofcourse, just as long as the Leaflet library is loaded, you can create markers, layers, polygons, whatever. There doesn't have to be an instance of L.Map to do this.
// Define marker first
var marker = L.marker([0,0]);
// Define map later
var map = L.map('map', {
'center': [0, 0],
'zoom': 1,
'layers': [
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © OpenStreetMap contributors'
})
]
});
// Add afterwards
marker.addTo(map);
Working example on Plunker: http://plnkr.co/edit/0zaogf?p=preview
Or include the marker when defining the map:
// Define marker first
var marker = L.marker([0,0]);
// Define map later include marker
var map = L.map('map', {
'center': [0, 0],
'zoom': 1,
'layers': [
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © OpenStreetMap contributors'
}),
marker
]
});

Leaflet JS auto pan longitude

I'm trying to build a map that pans by a few relative degrees a second by longitude, but I'm only seeing a way to pan by a number of pixels. This means it pans farther when zoomed out than zoomed in. What's a clean way to do this?
Here's the code I'm using to pan right now:
var map = L.map('map', {
minZoom: 1,
maxZoom: 6,
worldCopyJump: true,
}).setView([0, 0], 3);
L.tileLayer('maps/{z}/{x}/{y}.png', {
maxNativeZoom: 3,
reuseTiles: true,
unloadInvisibleTiles: false
}).addTo(map);
setInterval(function(){map.panBy([100, 0], {animate: true, duration: 1});}, 1000);

You can always convert latlng to pixels http://leafletjs.com/reference.html#map-project
Or you just use panTo http://leafletjs.com/reference.html#map-panto Which takes latlng