OpenLayers2 Client Zoom Shows Red Tiles

  css, html, javascript, openlayers

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

LEAVE A COMMENT