[GIS] How to get OpenLayers 3 to display png tiles made in TileMill

openlayersopenlayers-2tilemillwmsxyz

So I used TileMill to style the map -> mbtiles export -> mbutil used to extract files to directory.
I'm running GeoServer and moved this files within the webapps directory that I'm using to host the map.

For reference I am using this course page for instruction and guidance. I am trying to build a completely FOSS system; at the end of the provided link, it instructs us to upload the extracted mbtiles to a web accessible directory and then build a layer using ESRI–I did not do that (FOSS or bust–I think I should be able to point at this if hosted on the local server). I just put the files in that aforementioned webapps folder so that I can access it from the localhost.

Now I would like to use these pngs that I've made in TileMill to display on a map in browser using OpenLayers 3. I was following the instruction on this second course page however they are using OpenLayers 2.

My code at the moment is as follows:

    var mercatorProjection = ol.proj.get('EPSG:900913');
    var map;
    function init(){

        // Add the tiled layer
        var tmsPhiladelphia = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://localhost:8080/geog585/PhillyBasemap/{z}/{x}/{y}.png',
                attribution: "Data copyright OpenStreetMap contributors",
                projection: mercatorProjection
            })
        });

        // Make map
        map = new ol.Map({
            // Center the map
            view: new ol.View({
                projection: mercatorProjection,
                center: [40, -75.145],
                zoom: 12
            }),
            layers: [tmsPhiladelphia],
            // Assign to map div
            target: 'map',
            controls: ol.control.defaults({
                attributionOptions: { collapsible: false }
            })
        });

        /*
                    // Add the WMS
                    var wms = new ol.Layer.Tile({
                        source: new ol.source.TileWMS({
                            preload: Infinity,
                            url: 'http://localhost:8080/geoserver/geog585/wms',
                            serverType: 'geoserver',
                            params: {
                                'LAYERS':"geog585:FarmersMarkets", 'TILED':true
                            }
                        })
                    });

                    map.addLayer(wms);

                    // Configure the query on click
                    var info = new ol.Control.WMSGetFeatureInfo({
                        url: 'http://localhost:8080/geoserver/geog585/wms',
                        title: 'Identify features by clicking',
                        queryVisible: true,
                        infoFormat: "application/json",
                        eventListeners: {
                            getfeatureinfo: function(event) {
                                // Read and parse the query response, if there is one
                                var response = JSON.parse(event.text);
                                if(response.features.length !== 0){
                                    var returnedFeature = response.features[0];
                                    // Configure the popup
                                    map.addPopup(new ol.Popup.FramedCloud(
                                            "marketInfo",
                                            map.getLonLatFromPixel(event.xy),
                                            null,
                                            "<b>" + returnedFeature.properties.NAME + "</b><br />" + returnedFeature.properties.ADDRESS,
                                            null,
                                            true
                                    ));
                                }
                            }
                        }
                    });

                    map.addControl(info);
                    info.activate();
         */
    }

When I try accessing the page, I met with a blank map. I check the console and it's given me an error that the tiles I am asking for do not exist. So the best that I can trouble shoot is that these XYZ values are not being generated correctly. I did some digging around and the best I could find was a working example using TSM but that was for OL2.

Best Answer

It seems you are not zooming at the right place. For this reason it's possible you don't have tiles here... (not generated)

Change

view: new ol.View({
    projection: mercatorProjection,
    center: [40, -75.145],
    zoom: 12
}),

with

view: new ol.View({
    center: ol.proj.transform(
              [-75.145, 40], 'EPSG:4326', 'EPSG:3857'),
    zoom: 12
}),

You have a correction but for learning purpose, I will explain:

  • projection: mercatorProjection, was removed because default projection in OpenLayers 3 is EPSG 3857 (also know previously as EPSG 900913)

  • ol.proj.transform is to convert your EPSG coordinates from lon, lat (EPSG 4326) to EPSG 3857. Be careful, you were using lat, lon whereas OpenLayers uses lon, lat. See this link for a reminder about coordinates order; disclosure: I always forget too)

Related Question