Openlayers2.13.1Sample

Openlayers2.13.1Sample

HTML

<link rel="stylesheet" href="https://mapapis01.blob.core.windows.net/javascript/openlayers2131/build/theme/default/style.css">
<link rel="stylesheet" href="https://mapapis01.blob.core.windows.net/javascript/openlayers2131/build/style.css">
<script src="https://mapapis01.blob.core.windows.net/javascript/openlayers2131/build/OpenLayers.js"></script>
<div id="map"></div>

CSS

.olImageLoadError {
        display: none;
      }
      
      #map {
        width: 100%;
        height: 230px;
      }

JavaScript

var map, layer, lbllayer;
var apikey = 'f4d3e21d4fc14954a1d5930d4dde3809';
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:3857"); // to Spherical Mercator Projection
var mapBounds = new OpenLayers.Bounds(113.7900, 22.150, 114.5700, 22.6000).transform(fromProjection, toProjection);

var layerExtent = new OpenLayers.Bounds(12712682.71, 2546222.27, 12713645.34, 2546938.87);
//var layerBound = new OpenLayers.Bounds( 12670768.34, 2527425.23, 12737574.31, 2580396.09);

map = new OpenLayers.Map('map', {
  'restrictedExtent': mapBounds,
  maxResolution: 76.43702828507324,
  minResolution: 288895.277144
});

layer = new OpenLayers.Layer.XYZ("BasemapLayer",
  "https://landsd.azure-api.net/tileservices/basemap/WGS84/2017/${z}/${x}/${y}.png?key=" + apikey, {
    sphericalMercator: true,
    isBaseLayer: true
  });
lbllayer = new OpenLayers.Layer.XYZ("LabelLayer",
  "https://landsd.azure-api.net/tileservices/label/WGS84/2017/tc/${z}/${x}/${y}.png?key=" + apikey, {
    sphericalMercator: true,
    isBaseLayer: false
  });
map.addLayers([layer, lbllayer]);
map.zoomToExtent(layerExtent);