ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add OpenSeaMap layer to localized-openstreetmap example

Browse Source
This commit is contained in:
Tom Payne
2013-12-13 22:03:24 +01:00
parent 46f63f1358
commit aa10a542ae
2 changed files with 39 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/localized-openstreetmap.html
View File

@@ -32,11 +32,11 @@
<div class="span12">
<h4 id="title">Localized OpenStreetMap example</h4>
<p id="shortdesc">Example of a localized OpenStreetMap map with a custom tile server and a custom attribution.</p>
<p id="shortdesc">Example of a localized OpenStreetMap map with a custom tile server and a custom attribution. The base layer is <a href="http://www.opencyclemap.org/">OpenCycleMap</a> with an overlay from <a href="http://www.openseamap.org/">OpenSeaMap</a>. The OpenSeaMap tile server does not support <a href="http://enable-cors.org/">CORS</a> headers.</p>
<div id="docs">
<p>See the <a href="localized-openstreetmap.js" target="_blank">localized-openstreetmap.js source</a> to see how this is done.</p>
</div>
<div id="tags">localized-openstreetmap, openstreetmap</div>
<div id="tags">cors, localized-openstreetmap, openseamap, openstreetmap</div>
</div>
</div>

53
examples/localized-openstreetmap.js
View File

@@ -1,31 +1,52 @@
goog.require('ol.Attribution');
goog.require('ol.Map');
goog.require('ol.RendererHints');
goog.require('ol.RendererHint');
goog.require('ol.View2D');
goog.require('ol.layer.Tile');
goog.require('ol.source.OSM');
// tiles.openseamap.org does not set CORS headers, so we have to disable
// crossOrigin and we cannot use WebGL.
var openCycleMapLayer = new ol.layer.Tile({
source: new ol.source.OSM({
attributions: [
new ol.Attribution({
html: 'All maps &copy; ' +
'<a href="http://www.opencyclemap.org/">OpenCycleMap</a>'
}),
ol.source.OSM.DATA_ATTRIBUTION
],
url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
})
});
var openSeaMapLayer = new ol.layer.Tile({
source: new ol.source.OSM({
attributions: [
new ol.Attribution({
html: 'All maps &copy; ' +
'<a href="http://www.openseamap.org/">OpenSeaMap</a>'
}),
ol.source.OSM.DATA_ATTRIBUTION
],
crossOrigin: null,
url: 'http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png'
})
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
attributions: [
new ol.Attribution({
html: 'All maps &copy; ' +
'<a href="http://www.opencyclemap.org/">OpenCycleMap</a>'
}),
ol.source.OSM.DATA_ATTRIBUTION
],
url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
})
})
openCycleMapLayer,
openSeaMapLayer
],
renderers: ol.RendererHints.createFromQueryData(),
renderer: ol.RendererHint.CANVAS,
target: 'map',
view: new ol.View2D({
maxZoom: 18,
center: [-172857, 5977746],
zoom: 12
center: [-244780.24508882355, 5986452.183179816],
zoom: 15
})
});