I've got a problem with openlayers3 and my local tiles server. I have downloaded some offline google map tiles from zoomLevel 0 to zoomLevel 16. All of the tiles are 256 * 256. And they are distributed in some local folders, which name from "0" to "16". Then i copied these tiles into my local apache server path, and i can access these tiles with my web browser such as google Chrome,and the url is "http://localhost:8089/Maps/15/26933/12364.png". I created a html with openlayers3 , and tried to access the tiles on my apache server. The content in html is below:

    var TileLayer = function (options) {
        var layer = new ol.layer.Tile({
            extent: ol.proj.transformExtent(options.mapExtent, options.fromProject, 

            source: new ol.source.XYZ({
                attributions: [options.attribution],
                url: options.url,
                tilePixelRatio: options.tilePixelRatio, // THIS IS IMPORTANT
                minZoom: options.mapMinZoom,
                maxZoom: options.mapMaxZoom
        return layer;

    var defaults = {
        url: 'http://localhost:8089/Maps/{z}/{x}/{y}.png',
        mapExtent: [115.89752197265625,39.63319206567459,116.9000244140625,40.34445080136368],
        mapMinZoom: 1,
        mapMaxZoom: 16,
        attribution: new ol.Attribution({
            html: 'Tiles © GoogleMap'
        tilePixelRatio: 1,
    // all of the project can not work
        fromProject: "EPSG:102100",
        //fromProject: "EPSG:900913",
        toProject: "EPSG:3857"
    var layer = new TileLayer(defaults);

    var map = new ol.Map({
     layers: [layer],
     target: 'map',
     view: new ol.View({
     center: [115.886536, 39.842286],
     zoom: 8

When i browse to this html the following error happens: Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8089/Maps/10/509/512.png Failed to load resource: the server responded with a status of 404 (Not Found).

I have searched for a while, but i can't find some useful information about my problems. Any help?

  • Could you open development tools (F12 usually) and trace http requests, which OL sends, and checks, are they correct, and there is no mess with {x}, {y} and {z} order and values. Commented Aug 7, 2015 at 7:45

2 Answers 2


Ok, so you said that you can directly access the .pngs from your browser with the following link http://localhost:8089/Maps/15/26933/12364.png. Now if you have that working you know for sure its not your servers fault. Which then points to the code you made. Error 404 usually means that the data you requested doesn't exist or you are trying to access something that isn't there. So first of all I would try to copy http://localhost:8089/Maps/10/509/512.png into chrome. If you get the same error you know for sure that the following request is incorrect -> the png is not where you are saying it is, which means the code you are using, is creating incorrect values causing your server to reply with 404.


Thanks for your quick reply. As you pointed out , the tiles such as "10/509/512.png " didn't exist. The question is that the tile url parse scheme which i used doesn't match my local tile server. Fortunately, i have found the solution. http://tileserver.maptiler.com/#nasa/ol3cesium.code I followed this method, and i can show my local tiles now. Openlayers3 + Google map offline tile server .

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.