4

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.

3

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)

  • One follow up, how did you know the projection of that coord was originially 4326? – Jonathan Dec 10 '15 at 16:47
  • Because WGS 84 (GPS system) = EPSG 4326 = longitude, latitude in decimal degrees (see en.wikipedia.org/wiki/World_Geodetic_System#WGS84) = most used. Also because, you seems to be working on Philadelphia because tmsPhiladelphia. Searching Philadelphia at openstreetmap.org gives me an url like http://www.openstreetmap.org/#map=11/40.0024/-75.2385 hence my guess – ThomasG77 Dec 11 '15 at 1:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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