Skip to content

Instantly share code, notes, and snippets.

@pgiraud
Last active September 29, 2020 20:14
Show Gist options
  • Select an option

  • Save pgiraud/927b1d0b7cc8de761387 to your computer and use it in GitHub Desktop.

Select an option

Save pgiraud/927b1d0b7cc8de761387 to your computer and use it in GitHub Desktop.
OpenLayers 2 ESRI XYZ layers
var map, layer;
function init(){
map = new OpenLayers.Map('map', {
layers: [new OpenLayers.Layer.OSM()]
});
layer = new OpenLayers.Layer.XYZ( "ESRI",
"https://services1.arcgis.com/rMlsWo8szOzlrpCq/arcgis/rest/services/danger_d_avalanche/MapServer/tile/${z}/${y}/${x}",
{sphericalMercator: true, isBaseLayer: false}
);
map.addLayer(layer);
map.zoomToExtent(new OpenLayers.Bounds(815281.104334,5791105.74738,893552.621287,5830241.505857));
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers Basic ESRI Map Cache Example</title>
<link rel="stylesheet" href="http://dev.openlayers.org/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="http://dev.openlayers.org/examples/style.css" type="text/css">
<style>
.olImageLoadError {
display: none;
}
</style>
<script src="http://dev.openlayers.org/OpenLayers.js"></script>
<script src="app.js"></script>
</head>
<body onload="init()">
<h1 id="title">Basic ESRI Map Cache Example</h1>
<div id="tags">
XYZ, layer, tile
</div>
<div id="shortdesc">Show a Simple ESRI map using the layer from <a href="http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer">ESRI's server</a>. </div>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>Show the use of the XYZ layer to access a map cache provided in
spherical mercator by ESRI.</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment