Arcgis as a layer not base map #1317
Description
I have tried the example where the base map is set. However I am also using a layerswitcher to switch between different base maps. When the page loads all layers are loaded but I think it just overwrites the base layer rather than creating a new one e.g. a layer for arcgis layers like topography, standard, imagery etc. I am missing a trick somewhere. For Google etc I have layers.
Here is an example of my method returning a layer.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title>
<link rel="stylesheet" href="https://github.com/ol.css" />
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/%3Ca%20href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2cdcee2d493928c978c92">[email protected]/ol.css" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/%3Ca%20href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a8ab87b1f6f7e9f2e9f7">[email protected]/dist/ol.js"></script>
<script src="https://cdn.jsdelivr.net/npm/%3Ca%20href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec8380c1818d9c8e8394c19f98958089acdddec2d9c2dc">[email protected]/dist/olms.js"></script>
<script src="https://cdn.jsdelivr.net/npm/%3Ca%20href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="57383b7a3b362e322524203e23343f3225176379667965">[email protected]/dist/ol-layerswitcher.min.js"></script>
<script src="https://unpkg.com/ol-popup@latest/dist/ol-popup.js"></script>
<link rel="stylesheet" href="https://unpkg.com/ol-popup@latest/dist/ol-popup.css" />
</head>
<body>
<h3>Map - ARCGIS 6 - Using div map - multimap</h3>
<div id="map"></div>
<script>
// =======================================================================================
var MAP_TOKEN = "<INSERT_MAP_TOKEN>";
// =======================================================================================
var map = new ol.Map({ target: "map" });
var popup;
var layers = [];
var source = new ol.source.Vector({
wrapX: false
});
var vector = new ol.layer.Vector({
source: source,
});
var pointTooltip = new ol.Overlay({
element: popup,
autoPan: true,
autoPanAnimation: {
duration: 250,
},
});
let mapList = [
{
MapName: "ArcGIS Imagery",
URL: "https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/arcgis/imagery?token=####",
isDefault: false
},
{
MapName: "ArcGIS Standard",
URL: "https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/osm/standard?token=####",
isDefault: false
},
{
MapName: "ArcGIS Outdoor",
URL: "https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/arcgis/outdoor?token=####",
isDefault: false
},
{
MapName: "ArcGIS Topographic",
URL: "https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/arcgis/topographic?token=####",
isDefault: true
}];
var initialZoom = null;
initialiseMap(mapList);
var layerSwitcher = new ol.control.LayerSwitcher();
map.addControl(layerSwitcher);
function initialiseMap(mapList, _centerX = -2.1468331, _centerY = 52.513069) {
if (initialZoom != null && initialZoom != "") {
var roundedZoom = Math.round(initialZoom);
if (roundedZoom == 10 && initialZoom > 10) {
initialZoom = 11;
}
else {
initialZoom = Math.round(initialZoom);
if (initialZoom == 10)
initialZoom = 9;
}
}
var startingView = setMapView([_centerX, _centerY], 7, 'EPSG:3857');
if (initialZoom != null && initialZoom != "") {
startingView = setMapView([_centerX, _centerY], Number(initialZoom), 'EPSG:3857');
}
var mapSession = sessionStorage.getItem("MapVisible");
var newzoom = initialZoom;
startingView.zoom = newzoom;
map = new ol.Map({
layers: [
vector,
],
overlays: [pointTooltip],
target: 'map',
projection: 'EPSG:4326',
view: startingView,
interactions: ol.interaction.defaults.defaults({
dragPan: false
})
});
var currZoom = map.getView().getZoom();
}
var baseLayers = loadMapLayers(mapList);
for (var i = 0; i < baseLayers.length; i++) {
map.addLayer(baseLayers[i]);
}
var currZoom = map.getView().getZoom();
map.on('moveend', function (e) {
var newZoom = map.getView().getZoom();
if (currZoom != newZoom) {
currZoom = newZoom;
}
});
function loadMapLayers(mapList, mapID = null) {
for (var i = 0; i < mapList.length; i++) {
var newLayer = GenerateArcGISLayer(mapList[i].MapName, mapList[i].URL, "EPSG:3857", mapList[i].isDefault, _isUK = false);
layers.push(newLayer);
newLayer.on('change:visible', function () {
if (this.getVisible() == true) {
sessionStorage.setItem("MapVisible", this.get('title'));
var center = map.getView().getCenter();
var centerPosWgs = transformPositionToWgs(center[0], center[1], map.getView().getProjection());
var newView = setMapView(centerPosWgs, map.getView().getZoom(), 'EPSG:3857');
for (var j = 0; j < layers.length; j++) {
if (layers[j].get('title').toLowerCase().includes('road')) {
layers[j].setVisible(false);
}
}
map.setView(newView);
}
});
}
return layers;
}
function GenerateArcGISLayer(_name, _url, _projection, _isDefault, _isUK = false)
{
var isVisible = _isDefault.toString().toLowerCase() == "true";
var mapUrl = _url.replace("####", MAP_TOKEN);
var minZoom = 0;
var maxZoom = 9;
if (_name.toLowerCase().includes("arcgis")) {
olms.apply(map, mapUrl)
.then(() => {
// Add Esri attribution
// Learn more in https://esriurl.com/attribution
source = map.getLayers().item(0).getSource();
const poweredByEsriString = "Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a> | ";
});
var _layer = new ol.layer.Tile({
title: ' ' + _name,
visible: isVisible,
type: 'base',
source: source,
maxZoom: 10,
crossOrigin: 'anonymous',
})
return _layer;
}
else {
var _layer = new ol.layer.Tile({
title: ' ' + _name,
visible: isVisible,
type: 'base',
source: new ol.source.OSM(),
});
return _layer;
}
}
function transformPositionToWgs(x, y, projection) {
if (projection == 'EPSG:4326')
return [x, y];
return ol.proj.transform([x, y], projection, 'EPSG:4326');
}
function transformWGSToMapProjection(x, y, projection) {
if (projection == 'EPSG:4326')
return [x, y];
return ol.proj.transform([x, y], 'EPSG:4326', projection);
}
function setMapView(centerWGS, currentZoom, projection = "EPSG:3857", resolutions = null, isUKExtent = false) {
var extent = [-180, -90, 180, 90];
var currProj = map.getView().getProjection().getCode();
var projectionExtent1 = transformWGSToMapProjection(extent[0], extent[1], projection);
var projectionExtent2 = transformWGSToMapProjection(extent[2], extent[3], projection);
var projectionExtent = [projectionExtent1[0], projectionExtent1[1], projectionExtent2[0], projectionExtent2[1]];
var centerPosProjection = transformWGSToMapProjection(centerWGS[0], centerWGS[1], projection);
var view = new ol.View({
extent: projectionExtent,
center: centerPosProjection,
zoom: currentZoom,
enableRotation: false,
projection: projection,
});
return view;
}
map.setView(
new ol.View({
center: ol.proj.fromLonLat([-6.323486575772683, 53.36377556692718]),
zoom: 12
})
);
</script>
<style>
.layer-switcher.shown.ol-control {
background-color: transparent;
}
.layer-switcher.shown.ol-control:hover {
background-color: transparent;
}
.layer-switcher {
position: absolute;
top: 3.5em;
right: 0.5em;
text-align: left;
}
.layer-switcher.shown {
bottom: 3em;
}
.layer-switcher .panel {
padding: 0 1em 0 0;
margin: 0;
border: 4px solid #eee;
border-radius: 4px;
background-color: white;
color: black;
font-weight: bold;
display: none;
max-height: 100%;
overflow-y: auto;
}
.layer-switcher.shown .panel {
display: block;
}
.layer-switcher button {
float: right;
width: 38px;
height: 38px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAACE1BMVEX///8A//8AgICA//8AVVVAQID///8rVVVJtttgv98nTmJ2xNgkW1ttyNsmWWZmzNZYxM4gWGgeU2JmzNNr0N1Rwc0eU2VXxdEhV2JqytQeVmMhVmNoydUfVGUgVGQfVGQfVmVqy9hqy9dWw9AfVWRpydVry9YhVmMgVGNUw9BrytchVWRexdGw294gVWQgVmUhVWPd4N6HoaZsy9cfVmQgVGRrytZsy9cgVWQgVWMgVWRsy9YfVWNsy9YgVWVty9YgVWVry9UgVWRsy9Zsy9UfVWRsy9YgVWVty9YgVWRty9Vsy9aM09sgVWRTws/AzM0gVWRtzNYgVWRuy9Zsy9cgVWRGcHxty9bb5ORbxdEgVWRty9bn6OZTws9mydRfxtLX3Nva5eRix9NFcXxOd4JPeINQeIMiVmVUws9Vws9Vw9BXw9BYxNBaxNBbxNBcxdJexdElWWgmWmhjyNRlx9IqXGtoipNpytVqytVryNNrytZsjZUuX210k5t1y9R2zNR3y9V4lp57zth9zdaAnKOGoaeK0NiNpquV09mesrag1tuitbmj1tuj19uktrqr2d2svcCu2d2xwMO63N+7x8nA3uDC3uDFz9DK4eHL4eLN4eIyYnDX5OM5Z3Tb397e4uDf4uHf5uXi5ePi5+Xj5+Xk5+Xm5+Xm6OY6aHXQ19fT4+NfhI1Ww89gx9Nhx9Nsy9ZWw9Dpj2abAAAAWnRSTlMAAQICAwQEBgcIDQ0ODhQZGiAiIyYpKywvNTs+QklPUlNUWWJjaGt0dnd+hIWFh4mNjZCSm6CpsbW2t7nDzNDT1dje5efr7PHy9PT29/j4+Pn5+vr8/f39/f6DPtKwAAABTklEQVR4Xr3QVWPbMBSAUTVFZmZmhhSXMjNvkhwqMzMzMzPDeD+xASvObKePPa+ffHVl8PlsnE0+qPpBuQjVJjno6pZpSKXYl7/bZyFaQxhf98hHDKEppwdWIW1frFnrxSOWHFfWesSEWC6R/P4zOFrix3TzDFLlXRTR8c0fEEJ1/itpo7SVO9Jdr1DVxZ0USyjZsEY5vZfiiAC0UoTGOrm9PZLuRl8X+Dq1HQtoFbJZbv61i+Poblh/97TC7n0neCcK0ETNUrz1/xPHf+DNAW9Ac6t8O8WH3Vp98f5lCaYKAOFZMLyHL4Y0fe319idMNgMMp+zWVSybUed/+/h7I4wRAG1W6XDy4XmjR9HnzvDRZXUAYDFOhC1S/Hh+fIXxen+eO+AKqbs+wAo30zDTDvDxKoJN88sjUzDFAvBzEUGFsnADoIvAJzoh2BZ8sner+Ke/vwECuQAAAABJRU5ErkJggg==') /*logo.png*/;
background-repeat: no-repeat;
background-position: 2px;
background-color: white;
border: none;
}
.layer-switcher.shown button {
display: none;
}
.layer-switcher button:focus, .layer-switcher button:hover {
background-color: white;
}
.layer-switcher ul {
padding-left: 2em;
list-style: none;
}
.layer-switcher li.group > label {
font-weight: bold;
}
.layer-switcher li.layer {
display: table;
}
.layer-switcher li.layer label, .layer-switcher li.layer input {
display: table-cell;
vertical-align: middle;
}
.layer-switcher label.disabled {
opacity: 0.4;
}
.layer-switcher input {
margin: 4px;
}
.layer-switcher.touch ::-webkit-scrollbar {
width: 4px;
}
.layer-switcher.touch ::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
.layer-switcher.touch ::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.layer-switcher .group button {
display: inline-block;
vertical-align: top;
float: none;
width: 16px;
height: 16px;
background-position: center 2px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAW0lEQVR4nGNgGAWMyBwXFxcGBgaGeii3EU0tXHzPnj1wQRYsihqQ+I0ExDEMQAYNONgoAN0AmMkNaDSyQSheY8JiaCMOGzE04zIAmyFYNTMw4A+DRhzsUUBtAADw4BCeIZkGdwAAAABJRU5ErkJggg==');
-webkit-transition: -webkit-transform .2s ease-in-out;
-ms-transition: -ms-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
}
.layer-switcher .group.layer-switcher-close button {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
li.group.layer-switcher-fold {
margin-left: -18px;
}
.layer-switcher .group.layer-switcher-fold > ul {
padding-left: 3em;
}
.layer-switcher .group.layer-switcher-fold.layer-switcher-close > ul {
overflow: hidden;
height: 0;
}
</style>
</body>
</html>
Code updated to working example, although you will need own key.
Taken from example here:
https://developers.arcgis.com/openlayers/maps/change-the-basemap-style/