From 31219c90f5cecbaa10a99c911fd10f9d6102e4b0 Mon Sep 17 00:00:00 2001 From: tschaub Date: Thu, 1 Mar 2012 13:13:35 -0700 Subject: [PATCH] Adding XYZ example using MapBox tiles. --- examples/mapbox.html | 73 ++++++++++++++++++++++++++++++++++++++++++++ examples/mapbox.js | 31 +++++++++++++++++++ 2 files changed, 104 insertions(+) create mode 100644 examples/mapbox.html create mode 100644 examples/mapbox.js diff --git a/examples/mapbox.html b/examples/mapbox.html new file mode 100644 index 0000000000..3ccbffe776 --- /dev/null +++ b/examples/mapbox.html @@ -0,0 +1,73 @@ + + + + + + + OpenLayers MapBox Example + + + + + +

Basic MapBox OSM Example

+
mapbox xyz osm
+ +
Shows how to use MapBox tiles in an OpenLayers map.
+ +
+ +
+

This example demonstrates the use of an XYZ layer that accesses tiles from MapBox.

+

+ See the mapbox.js source + for details. Make sure to read the Terms of Service + before using MapBox tiles in your application. +

+
+ + + + diff --git a/examples/mapbox.js b/examples/mapbox.js new file mode 100644 index 0000000000..0be24970f5 --- /dev/null +++ b/examples/mapbox.js @@ -0,0 +1,31 @@ +var streets = new OpenLayers.Layer.XYZ( + "MapBox Streets", + [ + "http://a.tiles.mapbox.com/v3/mapbox.mapbox-streets/${z}/${x}/${y}.png", + "http://b.tiles.mapbox.com/v3/mapbox.mapbox-streets/${z}/${x}/${y}.png", + "http://c.tiles.mapbox.com/v3/mapbox.mapbox-streets/${z}/${x}/${y}.png", + "http://d.tiles.mapbox.com/v3/mapbox.mapbox-streets/${z}/${x}/${y}.png" + ], { + attribution: "MapBox | Terms of Service", + sphericalMercator: true, + transitionEffect: "resize", + numZoomLevels: 16 + } +); + +var map = new OpenLayers.Map({ + div: "map", + projeciton: "EPSG:900913", + layers: [streets], + controls: [ + new OpenLayers.Control.Attribution(), + new OpenLayers.Control.TouchNavigation({ + dragPanOptions: { + enableKinetic: true + } + }), + new OpenLayers.Control.ZoomPanel(), + new OpenLayers.Control.Permalink({anchor: true}) + ] +}); +map.setCenter([0, 0], 1);