I want to zoom in more than the max zoom level of 18. I thought that client zoom would do the job as shown here: http://dev.openlayers.org/examples/clientzoom.html
So I got this:
function init_map() {
map = new OpenLayers.Map('map');
basemap = new OpenLayers.Layer.OSM("OpenCycleMap",
["https://a.tile.openstreetmap.de/${z}/${x}/${y}.png",
"https://b.tile.openstreetmap.de/${z}/${x}/${y}.png",
"https://c.tile.openstreetmap.de/${z}/${x}/${y}.png"],
{
resolutions: [156543.03390625, 78271.516953125, 39135.7584765625,
19567.87923828125, 9783.939619140625, 4891.9698095703125,
2445.9849047851562, 1222.9924523925781, 611.4962261962891,
305.74811309814453, 152.87405654907226, 76.43702827453613,
38.218514137268066, 19.109257068634033, 9.554628534317017,
4.777314267158508, 2.388657133579254, 1.194328566789627,
0.5971642833948135, 0.25, 0.1, 0.05],
serverResolutions: [156543.03390625, 78271.516953125, 39135.7584765625,
19567.87923828125, 9783.939619140625,
4891.9698095703125, 2445.9849047851562,
1222.9924523925781, 611.4962261962891,
305.74811309814453, 152.87405654907226,
76.43702827453613, 38.218514137268066,
19.109257068634033, 9.554628534317017,
4.777314267158508, 2.388657133579254,
1.194328566789627, 0.5971642833948135],
transitionEffect: 'resize'
});
map.addLayer(basemap);
epsg4326 = new OpenLayers.Projection("EPSG:4326");
projectTo = map.getProjectionObject();
markers = new OpenLayers.Layer.Markers("Markers");
vectorLayer = new OpenLayers.Layer.Vector("Overlay");
map.addLayer(markers);
map.setCenter(
new OpenLayers.LonLat( stations[0][0][1], stations[0][0][0] ).transform(epsg4326, projectTo),18
);
//----------Station-----------
add_marker(score);
}
Unfortunately this works for only a few seconds. After that it tries to load in tiles that do not exists. Here is a Gif that demonstrates the issue:
https://imgur.com/a/P7UPIYS
Source: Ask Javascript Questions