Simple Map Switcher / Floor Switcher Widget

ChadRicks · ‎10-10-2016

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.checked==true) {
//console.log(services.value + ' you got a value');

return services.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.checked==true) {
//console.log(test.id + ' you got a id');
//console.log(map.getLayer());
return test.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.id)
if (radioListAll.id != layerOptionId && map.getLayer(radioListAll.id)) {
console.log('Removing ', radioListAll.id);
map.removeLayer(map.getLayer(radioListAll.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;
});

ChadRicks · ‎10-10-2016

My floor switcher uses the same Service but switches out he definition query at each click.

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 FloorSwitcher(params) {
this.constructor(params);
}
var map, baseStartup;

var InteriorURL = "https://SERVICE/arcgis/rest/services/Interior_Space/MapServer";

var buildingPopup = new PopupTemplate({
title: "{structure_type_snfs00} -- {asset_code_snfs00} -- {asset_id_snfs00}",
"fieldInfos": [
{
"fieldName": "structure_type_snfs00",
"label": "Structure Type",
"visible": false
},{
"fieldName": "asset_code_snfs00",
"label": "Asset Code",
"visible": true
},
{
"fieldName": "asset_id_snfs00",
"label": "Asset ID",
"visible": false
},
{
"fieldName": "asset_name_snfs00",
"label": "Asset Name",
"visible": true
},
{
"fieldName": "property_type",
"label": "Property Type",
"visible": false
},
{
"fieldName": "operational_status_snfs00",
"label": "Operational Status",
"visible": true
},
{
"fieldName": "fdw_link_snfs00",
"label": "FDW Link",
"visible": true
}
],
"showAttachments": false
});

var popupTemplate = new PopupTemplate({
title: "{Room_ID} -- {Floor} -- {Asset_Code}",
"fieldInfos": [
{
"fieldName": "Asset_Code",
"label": "Asset Code",
"visible": false
},
{
"fieldName": "Floor",
"label": "Floor Name",
"visible": false
},
{
"fieldName": "Room_ID",
"label": "Room ID",
"visible": false
},
{
"fieldName": "Space_Type",
"label": "Space Type",
"visible": true
},
{
"fieldName": "Square_Footage",
"label": "Square Footage",
"visible": true
},
{
"fieldName": "Status",
"label": "Status",
"visible": true
},
{
"fieldName": "Organization",
"label": "Organization Code",
"visible": true
},
{
"fieldName": "Charge_Code",
"label": "Charge Code",
"visible": true
}
],
"showAttachments": false
});

FloorSwitcher.prototype = BaseWidget.prototype;
FloorSwitcher.prototype.templateString =
' <div><b><u> Choose a floor to view </u></b><br><br>\
<input type="radio" name= "FLOOR" value="Basement" id="Basement"><b> Basement<br><br>\
<input type="radio" name= "FLOOR" value="1st Flr" id="First Floor" checked=true> First Floor<br><br>\
<input type="radio" name= "FLOOR" value="2nd Flr" id="Second Floor"> Second Floor<br><br>\
<input type="radio" name= "FLOOR" value="3rd Flr" id="Third Floor"> Third Floor<br><br>\
<input type="radio" name= "FLOOR" value="4th Flr" id="Fourth Floor"> Fourth Floor<br><br>\
<input type="radio" name= "FLOOR" value="Mezzanine" id="Mezzanine"> Mezzanine<br><br>\
<input type="radio" name= "FLOOR" value="Attic" id="Attic"> Attic<br><br>\
<input type="radio" name= "FLOOR" value="Roof" id="Roof"> Roof</div> ';

baseStartup = FloorSwitcher.prototype.startup;

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

var elembase = document.getElementById('Basement');
var elem1 = document.getElementById('First Floor');
var elem2 = document.getElementById('Second Floor');
var elem3 = document.getElementById('Third Floor');
var elem4 = document.getElementById('Fourth Floor');
var elemattic = document.getElementById('Attic');
var elemMez = document.getElementById('Mezzanine');
var elemRoof = document.getElementById('Roof');

elembase.addEventListener('click', SwitchFloor);
elem1.addEventListener('click', SwitchFloor);
elem2.addEventListener('click', SwitchFloor);
elem3.addEventListener('click', SwitchFloor);
elem4.addEventListener('click', SwitchFloor);
elemattic.addEventListener('click', SwitchFloor);
elemMez.addEventListener('click', SwitchFloor);
elemRoof.addEventListener('click', SwitchFloor);

};

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

//console.log('sizes', sizes);
for (i=0; i < sizes; i++)
{
if (test.checked==true) {
//console.log(test.value + ' you got a value');
return test.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.checked==true) {
//console.log(test.value + ' you got a value');
return test.id;
}
}

}

function SwitchFloor()
{
var FLOOR = findFloor("FLOOR");
var layerOptionId = findLayerOptionId("FLOOR");
console.log('Floor value = ', FLOOR);
console.log('layerOptionId = ', layerOptionId);

var floorType = document.getElementsByName("FLOOR");
var sizes = floorType.length;

for (i=0; i < sizes; i++)
{
//console.log(floorType.id)
if (floorType.id != layerOptionId && map.getLayer(floorType.id)) {
console.log('Removing ', floorType.id);
map.removeLayer(map.getLayer(floorType.id));
}
}

if (map.getLayer(layerOptionId)) {
console.log(layerOptionId, " is already open")
} else {
console.log(FLOOR, " wasnt loaded--adding", FLOOR)
var imageParameters = new ImageParameters();
var layerDefs = [];
layerDefs[1] = "floor_name_snfs02 = '" + FLOOR +"'";
layerDefs[2] = "floor_name_snfs02 = '" + FLOOR +"'";
layerDefs[3] = "floor_name_snfs01 = '" + FLOOR +"'";
layerDefs[4] = "floor_name_snfs02 = '" + FLOOR +"'";
layerDefs[5] = "Floor = '" + FLOOR +"'";
layerDefs[6] = "floor_name_snfs02 = '" + FLOOR +"'";
layerDefs[7] = "floor_name_snfs02 = '" + FLOOR +"'";
imageParameters.layerDefinitions = layerDefs;

}

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