JSFiddle - React, Tailwind, and code Playground

by lochnguyen

HTML

<script src="http://dev.openlayers.org/releases/OpenLayers-2.11/lib/OpenLayers.js"></script>
<script src="http://dev.openlayers.org/releases/OpenLayers-2.11/lib/OpenLayers/Layer/ArcGISCache.js"></script>
<div id="map" class="box"></div>

CSS

.box {
    width: 500px;
    height: 300px;
    border: solid grey 1px;
    margin: 0 auto;
}

JavaScript

var arcGisUrl = 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer';

var yorkUrl = 'http://ww4.yorkmaps.ca/ArcGIS/rest/services/CacheMaps/YR_StreetMap/MapServer';

var map;

function getArcGisInfo() {
    var jsonp_url = arcGisUrl + '?f=json&pretty=true&callback=?';
    $.getJSON(jsonp_url, function(data) {
        getYorkInfo(data);
    });
}

function getYorkInfo(baseLayerInfo) {
    var jsonp_url = yorkUrl + '?f=json&pretty=true&callback=?';
    $.getJSON(jsonp_url, function(data) {
        initMap(baseLayerInfo, data);
    });
}

function initMap(baseLayerInfo, yorkLayerInfo) {
    var baseLayer = new OpenLayers.Layer.ArcGISCache("AGSCache", arcGisUrl, {
        layerInfo: baseLayerInfo,
        isBaseLayer: false
    });
    // baseLayer.sphericalMercator is set to true, EPSG:102100       
    
    
    var yorkLayer = new OpenLayers.Layer.ArcGISCache("York", yorkUrl, {
        layerInfo: yorkLayerInfo,
        isBaseLayer: true
    });
    // yorkLayer.sphericalMercator is set to false even though EPSG:102113 is the same as EPSG:102100?
    
 
    // Do differing resolutions affect whether York can overlay?
    console.log('baseLayer', baseLayer.resolutions);
    console.log('yorkLayer', yorkLayer.resolutions);

    
    map = new OpenLayers.Map('map', {
        maxExtent: baseLayer.maxExtent,
        units: baseLayer.units,
        // resolutions: baseLayer.resolutions,
        resolutions: yorkLayer.resolutions,
        numZoomLevels: baseLayer.numZoomLevels,
        tileSize: baseLayer.tileSize,
        projection: baseLayer.projection           
    });

    map.addLayers([baseLayer, yorkLayer]);

    map.addControls([new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.MousePosition()]);

    // Zoom into York region where the overlay is          
    map.zoomToExtent(new OpenLayers.Bounds(-8947885.50310341, 5424741.63893325, -8736603.08782257, 5523192.60731018));

}

$(function() { getArcGisInfo() });