chricks

Simple Map Switcher / Floor Switcher Widget

Discussion created by chricks on Oct 10, 2016
Latest reply on Oct 10, 2016 by chricks

I made a map switching widget based on the local layer widget that uses services and doesn't destroy the map (the widgets stay open) there are probably lots of examples out there for map switching widgets but this was a simple compact map switcher that uses radio buttons and doesn't take up a lot of map space. 

It's based off the simple sample widget and doesn't have a config file.

Just replace the var baseURL with your rest service url location and the Radio List value and id.

The popup template just copy from the localLayer config file. 

 

Main config

{
"position": {
"left": 65,
"top": 20,
"width": 250,
"height": 400
},

"placeholderIndex": 1,
"id": "_24",
"positionRelativeTo": "map",
"name": "FIMSSwitcher",
"label": "FIMS Display",
"version": "2.1",
"uri": "widgets/FIMSSwitcher/Widget"
},

 

Widget.js

 

define([
'jimu/BaseWidget',
"esri/dijit/BasemapLayer",
"esri/dijit/Popup",
"esri/dijit/PopupTemplate",
"esri/InfoTemplate",
'esri/layers/layer',
'esri/layers/ArcGISDynamicMapServiceLayer',
'esri/layers/ImageParameters',
'dojo/domReady!'
], function(
BaseWidget,
BasemapLayer,
Popup,
PopupTemplate,
InfoTemplate,
layer,
ArcGISDynamicMapServiceLayer,
ImageParameters) {
function FIMSSwitcher(params) {
this.constructor(params);
}
var map, baseStartup;

var baseURL = "https://SERVER/arcgis/rest/services/";

var buildingPopup = new PopupTemplate({
title: "{Property_Name}",
"fieldInfos": [
{
"fieldName": "Property_Name",
"label": "Property Name",
"visible": true
},
{
"fieldName": "Annual_Actual_Maintenance",
"label": "2015 Annual Actual Maintenance $",
"visible": true,
"format": {
"places": "0",
"digitSeparator": true
}
},
{
"fieldName": "Total_Operating_Cost",
"label": "Total Operating Cost $",
"visible": true,
"format": {
"places": "0",
"digitSeparator": true
}
}
],
"showAttachments": false
});

FIMSSwitcher.prototype = BaseWidget.prototype;
FIMSSwitcher.prototype.templateString =
' <div><b><u> Choose a FIMS Building View </u></b><br><br>\
<input type="radio" name= "RadioBuildings" value="US_FIMS_Buildings/MapServer" id="FIMS Buildings" checked=true><b> Buildings<br><br>\
<input type="radio" name= "RadioBuildings" value="US_FIMS_Decade_Built/MapServer" id="Decade Built"><b> Decade Built<br><br>\
<input type="radio" name= "RadioBuildings" value="US_FIMS_LOB_Condition/MapServer" id="Lob Condition"> Overall Asset Condition (LOB)<br><br>\
<input type="radio" name= "RadioBuildings" value="US_FIMS_Mission_Dependency/MapServer" id="Mission Dependency"> Mission Dependency<br><br>\
<input type="radio" name= "RadioBuildings" value="US_FIMS_Status/MapServer" id="Status"> Status<br><br>\
<input type="radio" name= "RadioBuildings" value="US_FIMS_Core_Capability_Primary/MapServer" id="Core Capability Primary"> Core Capability Primary<br><br>\
<input type="radio" name= "RadioBuildings" value="US_FIMS_Core_Capability_Secondary/MapServer" id="Core Capability Secondary"> Core Capability Secondary<br><br>\
<input type="radio" name= "RadioBuildings" value="US_FIMS_Core_Capability_Tertiary/MapServer" id="Core Capability Tertiary"> Core Capability Tertiary<br><br>\
<input type="radio" name= "RadioBuildings" value="US_FIMS_Operating_Cost/MapServer" id="Total Operating Cost"> Total Operating Cost<br><br>\
<input type="radio" name= "RadioBuildings" value="US_FIMS_Annual_Maintenance/MapServer" id="Annual Actual Maintenance"> Annual Actual Maintenance<br><br>\
</div> ';

baseStartup = FIMSSwitcher.prototype.startup;

FIMSSwitcher.prototype.startup = function() {
console.log('FIMSSwitcher startup');
baseStartup.call(this);
map = this.map;
//console.log(map)

var Buildings = document.getElementById('FIMS Buildings');
var DecadeBuilt = document.getElementById('Decade Built');
var LOBCondition = document.getElementById('Lob Condition');
var MissionDependency = document.getElementById('Mission Dependency');
var Status = document.getElementById('Status');
var CoreCapabilityPrimary = document.getElementById('Core Capability Primary');
var CoreCapabilitySecondary = document.getElementById('Core Capability Secondary');
var CoreCapabilityTertiary = document.getElementById('Core Capability Tertiary');
var TotalOperatingCost = document.getElementById('Total Operating Cost');
var AnnualActualMaintenance = document.getElementById('Annual Actual Maintenance');

 

Buildings.addEventListener('click', SwitchMap);
DecadeBuilt.addEventListener('click', SwitchMap);
LOBCondition.addEventListener('click', SwitchMap);
MissionDependency.addEventListener('click', SwitchMap);
Status.addEventListener('click', SwitchMap);
CoreCapabilityPrimary.addEventListener('click', SwitchMap);
CoreCapabilitySecondary.addEventListener('click', SwitchMap);
CoreCapabilityTertiary.addEventListener('click', SwitchMap);
TotalOperatingCost.addEventListener('click', SwitchMap);
AnnualActualMaintenance.addEventListener('click', SwitchMap);


};

function FindCheckedService(field){
var services = document.getElementsByName(field);
var sizes = services.length;

console.log('sizes', sizes);
for (i=0; i < sizes; i++)
{
if (services[i].checked==true) {
//console.log(services[i].value + ' you got a value');

return services[i].value;
}
}

}

function findLayerOptionId(field){
var test = document.getElementsByName(field);
var sizes = test.length;

console.log('sizes', sizes);
for (i=0; i < sizes; i++)
{
if (test[i].checked==true) {
//console.log(test[i].id + ' you got a id');
//console.log(map.getLayer());
return test[i].id;
}
}

}

function SwitchMap()
{
//Find the service that is currently checked on in the radio button list
var serviceName = FindCheckedService("RadioBuildings");
//Find the layerOptionId that is currently check on in the radio button list
var layerOptionId = findLayerOptionId("RadioBuildings");
console.log('URL value = ', serviceName);
console.log('layerOptionId = ', layerOptionId);

var radioListAll = document.getElementsByName("RadioBuildings");
console.log('radioListAll = ', radioListAll);
var sizes = radioListAll.length;

//Remove the map layer if the checked radio button isn't the same as what is on the screen
for (i=0; i < sizes; i++)
{
//console.log('radioListAll ID= ',radioListAll[i].id)
if (radioListAll[i].id != layerOptionId && map.getLayer(radioListAll[i].id)) {
console.log('Removing ', radioListAll[i].id);
map.removeLayer(map.getLayer(radioListAll[i].id));
}
}

//If the checked radio button is already on the screen don't do anything. else add the new layer based on the service url
if (map.getLayer(layerOptionId)) {
console.log(layerOptionId, " is already open")
}
else
{
//console.log(FIMS, " wasnt loaded--adding", serviceName)
var imageParameters = new ImageParameters();

var layerOptions = {
"imageParameters": imageParameters,
"id": layerOptionId,
"showAttribution": false
};
var layer = new ArcGISDynamicMapServiceLayer(baseURL + serviceName, layerOptions);
layer.setInfoTemplates({
0: {infoTemplate: buildingPopup}
});
console.log('layerOptions.id= ',layerOptions.id)
layer.showLegend = true;
//layer.setVisibleLayers([0, 1]);
layer._titleForLegend = "FIMS Buildings";
console.log('TITLE set =', layer._titleForLegend)
console.log('layer = ', layer)
map.addLayer(layer);
}

}

FIMSSwitcher.hasStyle = false;
FIMSSwitcher.hasUIFile = false;
FIMSSwitcher.hasLocale = false;
FIMSSwitcher.hasConfig = false;
return FIMSSwitcher;
});

Outcomes