Convert X-Z examples to strapless template
This commit is contained in:
Tim Schaub
@@ -1,13 +1,9 @@
|
||||
---
|
||||
layout: example.html
|
||||
title: XYZ Esri EPSG:4326 tileSize 512 example
|
||||
layout: strapless.html
|
||||
title: ArcGIS REST with 512x512 Tiles
|
||||
shortdesc: Example of a XYZ source in EPSG:4326 using Esri 512x512 tiles.
|
||||
docs: >
|
||||
ArcGIS REST tile services with custom tile sizes (here: 512x512 pixels) and projection (here: EPSG:4326) are supported by `ol.source.XYZ`. A custom tile url function is used to handle zoom level offsets.
|
||||
tags: "xyz, esri, tilesize, custom projection"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="map" class="map"></div>
|
||||
|
||||
@@ -1,13 +1,9 @@
|
||||
---
|
||||
layout: example.html
|
||||
title: XYZ Esri example
|
||||
layout: strapless.html
|
||||
title: XYZ Esri
|
||||
shortdesc: Example of a XYZ source using Esri tiles.
|
||||
docs: >
|
||||
ArcGIS REST tile services are supported by `ol.source.XYZ`.
|
||||
tags: "xyz, esri, arcgis rest"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="map" class="map"></div>
|
||||
|
||||
@@ -1,13 +1,9 @@
|
||||
---
|
||||
layout: example.html
|
||||
title: XYZ Retina tiles example
|
||||
layout: strapless.html
|
||||
title: XYZ Retina Tiles
|
||||
shortdesc: Example of Retina / HiDPI mercator tiles (512x512px) available as XYZ.
|
||||
docs: >
|
||||
The ol.source.XYZ must contain `tilePixelRatio` parameter. The tiles were prepared from a GeoTIFF file with [MapTiler](http://www.maptiler.com/).
|
||||
tags: "retina, hidpi, xyz, maptiler, @2x, devicePixelRatio"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="map" class="map"></div>
|
||||
|
||||
@@ -1,13 +1,9 @@
|
||||
---
|
||||
layout: example.html
|
||||
title: XYZ Example
|
||||
layout: strapless.html
|
||||
title: XYZ
|
||||
shortdesc: Example of a XYZ source.
|
||||
docs: >
|
||||
The XYZ source is used for tile data that is accessed through URLs that include a zoom level and tile grid x/y coordinates.
|
||||
tags: "xyz"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="map" class="map"></div>
|
||||
|
||||
@@ -1,41 +1,15 @@
|
||||
goog.require('ol.Attribution');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.OSM');
|
||||
goog.require('ol.source.XYZ');
|
||||
|
||||
|
||||
var attribution = new ol.Attribution({
|
||||
html: 'Tiles © <a href="http://maps.nls.uk/townplans/glasgow_1.html">' +
|
||||
'National Library of Scotland</a>'
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
target: 'map',
|
||||
controls: ol.control.defaults({
|
||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
||||
collapsible: false
|
||||
})
|
||||
}),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM({
|
||||
attributions: [
|
||||
new ol.Attribution({
|
||||
html: 'Tiles © <a href="http://www.opencyclemap.org/">' +
|
||||
'OpenCycleMap</a>'
|
||||
}),
|
||||
ol.source.OSM.ATTRIBUTION
|
||||
],
|
||||
url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.XYZ({
|
||||
attributions: [attribution],
|
||||
url: 'http://geo.nls.uk/maps/towns/glasgow1857/{z}/{x}/{-y}.png'
|
||||
url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
|
||||
})
|
||||
})
|
||||
],
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
layout: example.html
|
||||
title: Zoom Constrained Example
|
||||
layout: strapless.html
|
||||
title: Constrained Zoom
|
||||
shortdesc: Example of a zoom constrained view.
|
||||
docs: >
|
||||
This map has a view that is constrained between zoom levels 9 and 13. This is done using the `minZoom` and `maxZoom` view options.
|
||||
@@ -8,8 +8,4 @@ tags: "bing, zoom, minZoom, maxZoom"
|
||||
cloak:
|
||||
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="map" class="map"></div>
|
||||
|
||||
@@ -1,13 +1,9 @@
|
||||
---
|
||||
layout: example.html
|
||||
title: Zoomify example
|
||||
layout: strapless.html
|
||||
title: Zoomify
|
||||
shortdesc: Example of a Zoomify source.
|
||||
docs: >
|
||||
Zoomify is a format for deep-zooming into high resolution images. This example shows how to use the Zoomify source with a pixel projection.
|
||||
tags: "zoomify, deep zoom, pixel, projection"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="map" class="map"></div>
|
||||
|
||||
@@ -5,17 +5,8 @@ goog.require('ol.proj');
|
||||
goog.require('ol.proj.Projection');
|
||||
goog.require('ol.source.Zoomify');
|
||||
|
||||
// This server does not support CORS, and so is incompatible with WebGL.
|
||||
//var imgWidth = 8001;
|
||||
//var imgHeight = 6943;
|
||||
//var url = 'http://mapy.mzk.cz/AA22/0103/';
|
||||
//var crossOrigin = undefined;
|
||||
|
||||
var imgWidth = 9911;
|
||||
var imgHeight = 6100;
|
||||
var url = 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?zoomify=' +
|
||||
'/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF/';
|
||||
var crossOrigin = 'anonymous';
|
||||
|
||||
var imgCenter = [imgWidth / 2, - imgHeight / 2];
|
||||
|
||||
@@ -29,9 +20,10 @@ var proj = new ol.proj.Projection({
|
||||
});
|
||||
|
||||
var source = new ol.source.Zoomify({
|
||||
url: url,
|
||||
url: 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?zoomify=' +
|
||||
'/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF/',
|
||||
size: [imgWidth, imgHeight],
|
||||
crossOrigin: crossOrigin
|
||||
crossOrigin: 'anonymous'
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
@@ -40,12 +32,11 @@ var map = new ol.Map({
|
||||
source: source
|
||||
})
|
||||
],
|
||||
renderer: common.getRendererFromQueryString(),
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
projection: proj,
|
||||
center: imgCenter,
|
||||
zoom: 0,
|
||||
zoom: 2,
|
||||
// constrain the center: center cannot be set outside
|
||||
// this extent
|
||||
extent: [0, -imgHeight, imgWidth, 0]
|
||||
|
||||
@@ -1,22 +1,16 @@
|
||||
---
|
||||
layout: example.html
|
||||
title: Zoom slider example
|
||||
layout: strapless.html
|
||||
title: Zoom Sliders
|
||||
shortdesc: Example of various ZoomSlider controls.
|
||||
docs: >
|
||||
This example shows how to add a zoom slider to a map and how to customize it.
|
||||
tags: "zoom, zoomslider, slider, style, styling, css, control"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span4">
|
||||
<h4>Default style</h4>
|
||||
<div id="map1" class="map"></div>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h4>Placed between zoom controls</h4>
|
||||
<div id="map2" class="map"></div>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h4>Horizontal and completely re-styled</h4>
|
||||
<div id="map3" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
<h4>Default style</h4>
|
||||
<div id="map1" class="map"></div>
|
||||
|
||||
<h4>Placed between zoom controls</h4>
|
||||
<div id="map2" class="map"></div>
|
||||
|
||||
<h4>Horizontal and completely re-styled</h4>
|
||||
<div id="map3" class="map"></div>
|
||||
|
||||
Reference in New Issue
Block a user