Develop Reference

Leaflet Remove Old/Error Tiles from Offline Map

I have a Leaflet map that points to some offline tiles on a local machine. Initially, tiles that aren't found are shown as a grey image:
If the user then zooms out, the corresponding tiles will be fetched for the current zoom level as usual. However, when the user zooms back in, the old "zoomed out" tiles persist, so you end up with a blurry image outside the bounds of the current tiles:
Is there some way to delete these tiles or just not load tiles for which there is no data in the first place?
Here's what I currently have:
L.tileLayer("offline_map/{z}/{x}/{y}.png",{
maxZoom: 18,
minZoom: 3,
}).addTo(map);
L.TileLayer.include({
_tileOnError: function (done, tile, e) {
map.removeLayer(tile);
}
});

Since you seem to be caching a small rectangular area, you probably want to use the bounds option of L.TileLayer, e.g.:
L.tileLayer("offline_map/{z}/{x}/{y}.png",{
maxZoom: 18,
minZoom: 3,
bounds: L.latLngBounds([[50,10],[60,15]])
}).addTo(map);
Specifying such a bounds option will avoid loading tiles outside of that bounding box (instead of trying and then failing), and will change the way tiles are pruned when changing zoom levels.

Leaflet geoJson layers hidden outside viewport

I have a leaflet map with a few layers on it.
Whenever layers are not in the viewport, they are hidden untill panning has completed:
Regular view with layers:
Panning right, to show layers outside viewport:
Panning stopped:
As illustrated above, the layers will first become visible once panning has stopped and mouse(finger) released.
I have tried the following, which didn't work
var map = L.map('map',{ bounceAtZoomLimits: false, removeOutsideVisibleBounds: false}).setView([40, 0], 2);
L.geoJson(mapData).addTo(map);

Seems the solution was right in front of me
Adding the following will render the entire map:
var map = new L.Map('map');
map.getRenderer(map).options.padding = 100;
Solution found 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

RotateControl not getting displayed in Google Maps

Here is the relevant code:
var map;
var chicago = new google.maps.LatLng(41.850033,-87.6500523);
var mapDiv = document.getElementById('map-canvas');
var mapOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.SATELLITE,
panControl: true,
rotateControl: true,
rotateControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
},
center: chicago
}
map = new google.maps.Map(mapDiv, mapOptions);
I tried mapTypeId of HYBRID too. I tried disabling/enabling rotateControl, panControl, rotateControlOptions, etc. The Map shows with pancontrol but without rotate control. If relevant, here is the div markup:
<div id="map-canvas" style="position:absolute;top:50px;left:100px;width:800px;height:500px;
border:red 2px solid;-webkit-border-radius: 10px;-moz-border-radius:10px;
border-radius: 10px;"></div>
Included the styles inline here just for brevity in presenting the question.

If zoom doesn't help then enabling of rotateControl won't either if there is no 45° imagery for specific place.
rotateControl enables/disables the appearance of a Rotate control for controlling the orientation of 45° imagery. By default, the control's appearance is determined by the presence or absence of 45° imagery for the given map type at the current zoom and location. You may alter the control's behavior by setting the map's rotateControlOptions to specify the RotateControlOptions to use (though you cannot make the control appear if no 45° imagery is currently available).

Try with zoom:20.
You need to zoom to see your position closely. Then you'll see the Rotation Control

google map with multiple routes - auto zoom and center map

I have managed to modify a script I found to suite my needs.
my only current issue is that I have to set the center of the map manually in the code and the zoom level.
how can I modify this so the api automatically selects the correct zoom level and center point for the map.
fiddle is here
I need to remove this manual code:
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-30.559, 22.937),
zoom: 4
}),
and configure it to zoom and center automatically based on the routes given (routes array)
you will see in the fiddle that the costa rica route is off the map so zoom needs to go out. if it was a short trip then zoom in to fit all contents into the map
Thanks as always:

You cannot get rid of that code. Option center and zoom are the only required parameters of google.maps.MapOptions object. See docs of MapOptions.
You can get rid of option preserveViewport or set it to false instead of true so your map will be centered and properly zoomed.