diff --git a/examples/xyz-seturl.html b/examples/xyz-seturl.html new file mode 100644 index 0000000000..2adb6c1310 --- /dev/null +++ b/examples/xyz-seturl.html @@ -0,0 +1,62 @@ + + + + + + + + + + + SetURL example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
    • +
+
+
+
+ +
+ +
+
+
+ + + + + +
+
+ +
+ +
+

XYZ set URL example

+

Example of a setting the URL on an XYZ source

+
+

See the xyz-seturl.js source to see how this is done.

+
+
xyz, seturl
+
+ +
+ +
+ + + + + + + diff --git a/examples/xyz-seturl.js b/examples/xyz-seturl.js new file mode 100644 index 0000000000..f412819514 --- /dev/null +++ b/examples/xyz-seturl.js @@ -0,0 +1,34 @@ +goog.require('ol.Map'); +goog.require('ol.RendererHints'); +goog.require('ol.View2D'); +goog.require('ol.layer.Tile'); +goog.require('ol.source.XYZ'); + + +var source = new ol.source.XYZ({ + url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png' +}); +var map = new ol.Map({ + layers: [ + new ol.layer.Tile({ + source: source + }) + ], + renderers: ol.RendererHints.createFromQueryData(), + target: 'map', + view: new ol.View2D({ + center: [0, 0], + zoom: 4 + }) +}); + +$('#set-stamen').click(function() { + source.setUrl('http://{a-d}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg'); +}); +$('#set-opencyclemap').click(function() { + source.setUrl('http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'); +}); +$('#set-esri').click(function() { + source.setUrl('http://server.arcgisonline.com/ArcGIS/rest/services/' + + 'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'); +});