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.

Highlight custom icons in Leaflet

I'm using markers with custom images in Leaflet, like this:
// A template for icons when they get instantiated on the map
var UnitIcon = L.Icon.extend({
options: {
iconSize: [40, 40],
iconAnchor: [20, 35]
}
});
function PlaceIconOnMapAtLatLng(iconURL, lat, lng)
{
var newIcon = new UnitIcon({iconUrl: iconURL});
var myMarker = L.marker([lat, lng], {icon: newIcon, draggable: true}).addTo(map);
}
The custom images sit in a folder and get read at run-time. The idea is that the user can change these and have as many as they want.
My problem is that when it comes to highlighting these, e.g. on click, there doesn't seem to be any straightforward way to do this in Leaflet. Initially I thought about just drawing a shape around the icon, but then this would be treated as its own separate thing that would be dragged around separately, whereas I want it to stay with its associated icon at all times.
A horrible first attempt would be something like having an update running constantly that sets the position of the highlight to whatever the selected marker's position is.
Or is there some way to associate objects e.g. as "children" so that when their parent object moves, the child moves with it?
I would preferably like an explicit highlight instead of doing something like changing the size or opacity of the selected marker, or giving it a pop-up, although these could be fall-back options. The reason I want a highlight is because ultimately I want to be able to highlight multiple icons at once, and having loads of pop-ups etc. doesn't seem like a very nice way of doing that.

You can add a CSS-Class to the Icon.
marker.on('click', function (e){
var layer = e.target;
if(!L.DomUtil.hasClass(layer._icon, 'dash-border')){
L.DomUtil.addClass(layer._icon,'dash-border');
}else{
L.DomUtil.removeClass(layer._icon,'dash-border');
}
});
.dash-border {
border: 2px dashed #3388ff;
background-color: #3388ff4d;
}
https://jsfiddle.net/falkedesign/r9onevq2/

Leaflet: Image Overlay and zoom levels

I added an image to my map (image overlay). Can I "adjust" the zoom levels due to the image?
At zoomlevel 17, the resolution of the raster map is too low compared to the screen resolution. At zoomlevel 16, the raster map isn't readable anymore.
Is it possible to define something like "zoomlevel 17: 1px of the image = 1px of the screen"?
Please excuse my bumpy English.
Thank you very much!
var map = L.map('image-map', {
minZoom: 16,
maxZoom: 18,
}).setView([46.975768, 7.436308], 17);
var imageUrl = '../Bilder/Karten/Normalansicht.png',
imageBounds = [[46.966635, 7.415942], [46.998849, 7.470108]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
map.setMaxBounds(imageBounds);

Is it possible to define something like "zoomlevel 17: 1px of the
image = 1px of the screen"?
No.
What you can do, however, is use CRS.Simple. In this coordinate system, 1 map unit = 1px at zoom level 0. You'll have to adjust the image overlay coordinates to achieve the screen resolution/image resolution ratio you want.
Check the tutorial on CRS.Simple at http://leafletjs.com/examples/crs-simple/crs-simple.html
Another option is to use fractional zoom controls (available only in Leaflet 1.0.0-beta, not in the 0.7.x series). By setting the zoomSnap and zoomDelta options, the user will be able to set zoom levels e.g. 16.25, 16.5 and 16.75.
There is no tutorial for this, but you can check some test code at https://github.com/Leaflet/Leaflet/blob/master/debug/map/zoom-delta.html

gmaps4rails gem, always use cluster icon instead of marker icon

Working with Google-Maps-for-Rails gem. Useful gem!
For privacy reasons, we're clustering markers. When there is only one marker however, the marker icon appears instead of the cluster icon.
When there is only one marker, instead of the individual marker icon, we would like the cluster icon to appear with a "1" on it. Is this possible? If so how?
Currently, clustering is on.
<%= gmaps("markers" =>
{
"data" => #fundings_for_map,
"options" => {"clusterer_gridSize" => 50,
"do_clustering" => true,
"clusterer_maxZoom" => 100}
}, etc...
Tried messing with maxZoom, but individual markers still appear as markers instead of clusters.
Anyone have any ideas if it's possible to display only cluster icons and if so how to do it?
Thanks!

Change Icon of Single Vector Feature in Layer

Currently I am trying to change the icon of a particular feature of a vector layer that the user is focusing on. I add each feature to the map like so:
var point = new OpenLayers.Geometry.Point(pt.lon, pt.lat);
var markerStyle = OpenLayers.Util.extend(OpenLayers.Feature.Vector.style['default'], {
externalGraphic: iconURL
});
var marker = new OpenLayers.Feature.Vector(point, attributes, markerStyle);
Later I do the following to update the feature's icon:
var marker = this.findSelectedMarker();
if (marker) {
marker.style.externalGraphic = newIconUrl;
this.layer.redraw();
}
But when the layer redraws, all features in my layer use the newIconUrl, not simply the selected marker that I am trying to update.
How can I change the icon of the one selected feature of my layer? Thanks.

There were two issues I needed to fix in order to solve this. The first was related to using multiple OpenLayers styles, both at the layer level as well as the individual feature level. I removed the styling for each individual feature, so that only the following layer style was being implemented:
this.layerStyle = new OpenLayers.StyleMap({
'default': {
externalGraphic: media_url + '${iconURL}',
graphicHeight: 32,
graphicWidth: 32,
graphicXOffset: -16,
graphicYOffset: -32,
fillOpacity: 0.75
}
});
The second change I made was to use attribute replacement syntax to designate the icon URL with a feature attribute called '${iconURL}'. This allowed me to change the icon url by simply changing an attribute of the selected feature and redraw the layer:
focusedMarker.attributes.iconURL = this.focusedURL;
this.layer.redraw();