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, "" + returnedFeature.properties.NAME + "
" + 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.
Thank you in advance, Jonathan
أكثر...
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, "" + returnedFeature.properties.NAME + "
" + 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.
Thank you in advance, Jonathan
أكثر...