ArcGIS STA lib

<!-- index.html -->

<!DOCTYPE html>
<html>
	<head>
		<title>ArcGIS STA Lib</title>

		<!-- Add path to ArcGIS CSS -->
		<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/4.1/esri/css/main.css">

		<!-- Add path to custom stylesheet -->
		<link rel="stylesheet" type="text/css" href="./css/index.css"/>
	</head>
	<body>
		<!-- Map container -->
		<div id="map"></div>

		<!-- Add path to requirejs library -->
		<script type="text/javascript" src="./lib/require.js"></script>

		<!-- Add path to index.js -->
		<script type="text/javascript" src="./js/index.js"></script>
	</body>
</html>

<!-- index.html -->

<!DOCTYPE html>
<html>
	<head>
		<title>ArcGIS STA Lib</title>

		<!-- Add path to ArcGIS CSS -->
		<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/4.1/esri/css/main.css">

		<!-- Add path to custom stylesheet -->
		<link rel="stylesheet" type="text/css" href="./css/index.css"/>
	</head>
	<body>
		<!-- Map container -->
		<div id="map">
			<div id="outputMessages">
				<div class="title">Incoming Messages:</div><br/>
				<div id="mqttMessages"></div>
			</div>
		</div>

		<!-- Add path to requirejs library -->
		<script type="text/javascript" src="./lib/require.js"></script>

		<!-- Add path to index.js -->
		<script type="text/javascript" src="./js/index.js"></script>
	</body>
</html>

<!-- index.html -->

<!DOCTYPE html>
<html>
	<head>
		<title>ArcGIS STA Lib</title>

		<!-- Add path to ArcGIS CSS -->
		<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/4.1/esri/css/main.css">

		<!-- Add path to custom stylesheet -->
		<link rel="stylesheet" type="text/css" href="./css/index.css"/>
	</head>
	<body>
		<!-- Map container -->
		<div id="map"></div>

		<!-- Add path to plotly library -->
		<script type="text/javascript" src="https://cdn.plot.ly/plotly-1.17.3.min.js"></script>

		<!-- Add path to requirejs library -->
		<script type="text/javascript" src="./lib/require.js"></script>

		<!-- Add path to index.js -->
		<script type="text/javascript" src="./js/index.js"></script>
	</body>
</html>

/* index.css */

html, body, #map{
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}

/* index.css */

html, body, #map{
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}

#map{
	position: relative;
	overflow: hidden;
}

#outputMessages{
	position: absolute;
	z-index: 170;
	top: 0;
	right: 0px;
	width: 300px;
	height: 100%;
	color: white;
	font-size: 16px;
	overflow: auto;
	background-color: rgba(64, 64, 64, 0.8);
	padding: 15px 15px;
}

.title{
	color: #ffa31a; 
	font-size: 18px;
	font-weight: bold;
}

#map, body, html{
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}

.esri-popup__main-container{
	height: 400px !important;
	width: 600px !important;
}
.esri-popup__content{
	min-height: 300px !important;
}

// index.js

requirejs.config({
	paths: {
		"staLib": "/arcgis-sta-lib"
	},
	bundles: {
		"arcgis_sta_lib": ["sta_lib"]
	}
});

require(['sta_lib'],function(staLib){
	staLib.init({
		baseURL: "http://example.sensorup.com/v1.0/",     
		mapContainer: "map",  
		view: "Things"
	});
});

// index.js

requirejs.config({
	paths: {
		"staLib": "/arcgis-sta-lib"
	},
	bundles: {
		"arcgis_sta_lib": ["sta_lib"]
	}
});

require(['sta_lib'],function(staLib){
	staLib.init({
		baseURL: "http://example.sensorup.com/v1.0/",     
		mapContainer: "map",  
		view: "Things",       
		marker: {                 
			color: [0, 153, 0],
			outline: {
				color: [0, 102, 0],
				width: 1
			}
		}
	});
});

// index.js

requirejs.config({
	paths: {
		"staLib": "/arcgis-sta-lib"
	},
	bundles: {
		"arcgis_sta_lib": ["sta_lib"]
	}
});

require(['sta_lib'],function(staLib){
	staLib.init({
		baseURL: "http://example.sensorup.com/v1.0/",     
		mapContainer: "map",  
		view: "Things",
		center: [-114.165175, 51.084577],
		zoom: 14,       
		polygon: {                 
			color: [255, 102, 0],
			outline: {
				color: [230, 92, 0],
				width: 1
			}
		}
	});
});

// index.js

requirejs.config({
	paths: {
		"staLib": "/arcgis-sta-lib"
	},
	bundles: {
		"arcgis_sta_lib": ["sta_lib"]
	}
});

require(['sta_lib'],function(staLib){
	staLib.init({
		baseURL: "http://example.sensorup.com/v1.0/",     
		mapContainer: "map",  
		view: "Things",       
		marker: {
			url: "../img/icon.png",
			width: "28px",
			height: "28px"
		}
	});
});

// index.js

requirejs.config({
	paths: {
		"staLib": "/arcgis-sta-lib"
	},
	bundles: {
		"arcgis_sta_lib": ["sta_lib"]
	}
});

require(['sta_lib'],function(staLib){
	staLib.init({
		baseURL: "http://example.sensorup.com/v1.0/",     
		mapContainer: "map",  
		view: "ObservedProperties"
	});
});

// index.js

requirejs.config({
	paths: {
		"staLib": "/arcgis-sta-lib"
	},
	bundles: {
		"arcgis_sta_lib": ["sta_lib"]
	}
});

require(['sta_lib'],function(staLib){
	staLib.init({
		baseURL: "http://example.sensorup.com/v1.0/",     
		mapContainer: "map",  
		view: "Things",
		basemap: "osm",
		center: [-87.811184, 41.888935],
		zoom: 7
	});
});

// index.js

requirejs.config({
	paths: {
		"jquery": 'https://code.jquery.com/jquery-2.2.4.min',
		"arcgis_sta_lib": "../lib/arcgis-sta-lib",
		'stachart': "http://sdk.sensorup.com/sta-chart/sta-chart-0.0.2.min"
	},
	bundles: {
		"arcgis_sta_lib": ["sta_lib"]
	},
	shim: {
		"arcgis_sta_lib": {
			deps: ["jquery", "stachart"]
		},
		"stachart": {
			deps: ['jquery']
		}
	}
});

require(['jquery', 'sta_lib','stachart'], function($, staLib, stachart){
	var mapObj;

	function addMarkerToMap(dsObj, settings){
		settings["id"]=dsObj["Thing"]["@iot.id"];

		settings["popupTemplate"]={
			title: dsObj["Thing"]['description'],
			content: [
				{
					type: "text",
					text: "<div id='vis1'></div><div id='vis2'></div><div id='vis3'></div>"
				}
			]
		};

		mapObj.addPointToMap(settings);
	}

	function init(){
		var processor = staLib.processor({
			baseURL: "http://example.sensorup.com/v1.0/",     
			mapContainer: "map",  
			view: "Things",
			query: {
				retrieveAll: false
			}
		}, true);

		processor.then(function(obj){
			mapObj=obj;
			var data = mapObj.data;
 
			for(var key in data["Things"]){
				var dsIDArr=data["Things"][key];
	 
				for(var i=0; i<dsIDArr.length; i++){
					var dsObj=data["Datastreams"][dsIDArr[i]];
 
					if(dsObj["Thing"]["Locations"].length ==0){
						continue;
					}
 
					var locationObj={
						"coordinates": dsObj["Thing"]["Locations"][0]["location"]["coordinates"],
						"type": dsObj["Thing"]["Locations"][0]["location"]["type"]
					};

					addMarkerToMap(dsObj, locationObj);
				}
			}

			$.get("http://example.sensorup.com/v1.0/Things?$expand=Datastreams($select=id)",function(response){
				var thingDSHashmap={};

				response.value.forEach(function(curr, i, arr){
					for(var i=0; i<curr["Datastreams"].length; i++){
						if(thingDSHashmap.hasOwnProperty(curr["@iot.id"])){
							thingDSHashmap[curr["@iot.id"]].push(curr["Datastreams"][i]["@iot.id"]);
						}else{
							thingDSHashmap[curr["@iot.id"]]=[curr["Datastreams"][i]["@iot.id"]];
						}
					}
					
				});

				var popupCallback=function(graphic){
					var dsIDArr = thingDSHashmap[graphic.id];

					for(var i=0; i<dsIDArr.length; i++){
						stachart.generateChart({
						  'targetId': 'vis'+(i+1),
						  'staBaseUrl': 'http://example.sensorup.com/v1.0',
						  'datastreamId': dsIDArr[i],
						  'plotlyLayout': {
							"width": 600,
							"height": 330
						  }
						});
					}
				};
				mapObj.markerOnClickEvent(popupCallback);
			});
		});
	}

	init();
});

// index.js

requirejs.config({
	paths: {
		"staLib": "/arcgis-sta-lib"
	},
	bundles: {
		"arcgis_sta_lib": ["sta_lib"]
	}
});

require(['sta_lib'],function(staLib){
	staLib.init({
		baseURL: "http://example.sensorup.com/v1.0/",     
		mapContainer: "map",  
		view: "Things",
		ids: [90310, 90303]
	});
});

// index.js

requirejs.config({
	paths: {
		"staLib": "/arcgis-sta-lib"
	},
	bundles: {
		"arcgis_sta_lib": ["sta_lib"]
	}
});

require(['sta_lib'],function(staLib){
	staLib.init({
		baseURL: "http://example.sensorup.com/v1.0/",     
		mapContainer: "map",  
		view: "Things",
		showObservations: true
	});
});

// index.js

requirejs.config({
	paths: {
		"staLib": "/arcgis-sta-lib"
	},
	bundles: {
		"arcgis_sta_lib": ["sta_lib"]
	}
});

require(['sta_lib'],function(staLib){
	staLib.init({
		baseURL: "http://example.sensorup.com/v1.0/",     
		mapContainer: "map",  
		view: "Things",
		query: {
			skip: 2,    //skip the first two elements
			numOfItems: 5      //return the first five elements
		}
		
	});
});

// index.js

requirejs.config({
	paths: {
		"jquery": 'https://code.jquery.com/jquery-2.2.4.min',
		"arcgis_sta_lib": "../lib/arcgis-sta-lib"
	},
	bundles: {
		"arcgis_sta_lib": ["sta_lib"]
	},
	shim: {
		"arcgis_sta_lib": {
			deps: ["jquery"]
		}
	}
});

require(['jquery','sta_lib'],function($,staLib){
	var onMessageArrived=function(message){
		var messageObj=JSON.parse(message.payloadString);
		var result=messageObj["result"];

		$.get(messageObj["@iot.selfLink"]+"/Datastream?$expand=Thing,ObservedProperty",function(response){
			//output message to the screen
			var element=document.getElementById("mqttMessages");
			var text;

			var divElement = document.createElement("div");
			text = document.createTextNode(response["Thing"]["description"]);
			divElement.appendChild(text);
			element.appendChild(divElement);

			var resultNode = document.createElement("div");
			text = document.createTextNode(response["ObservedProperty"]["name"]+": "+result+response["unitOfMeasurement"]["symbol"]);
			resultNode.appendChild(text);
			element.appendChild(resultNode);

			var br = document.createElement("br");
			element.appendChild(br);

		});
	};

	var init=function(){
		staLib.init({
			baseURL: "http://example.sensorup.com/v1.0/",     
			mapContainer: "map",  
			view: "Things",
			mqtt: {
				hostname: "example.sensorup.com",
				port: 9001,
				onMessageArrived: onMessageArrived
			}
		});
	};
	init();
});

// index.js

requirejs.config({
	paths: {
		"jquery": 'https://code.jquery.com/jquery-2.2.4.min',
		"arcgis_sta_lib": "../lib/arcgis-sta-lib"
	},
	bundles: {
		"arcgis_sta_lib": ["sta_lib"]
	},
	shim: {
		"arcgis_sta_lib": {
			deps: ["jquery"]
		}
	}
});

require(['jquery','sta_lib'],function($,staLib){
	var mapObj;
	var thresholdValue=12.1;

	var onMessageArrived=function(message){
		var messageObj=JSON.parse(message.payloadString);
		var result=Number(messageObj["result"]);

		$.get(messageObj["@iot.selfLink"]+"/Datastream?$expand=Thing,ObservedProperty",function(response){
			filterResult(response, result, undefined);
		});
	};

	var filterResult=function(response, result, locationObj){
		var thingID=response["Thing"]["@iot.id"];
		var settings={};

		if(locationObj != undefined){
			settings=locationObj;
		}

		settings["marker"]={
			"color": [0, 153, 0],
			"outline": {
				"color": [0, 102, 0],
				"width": 1
			}
		};

		if(response["ObservedProperty"]["name"] == "PM2.5 Particulates"){
			if(result >= thresholdValue){
				settings["marker"]={
					"color": [255, 0, 0],
					"outline": {
						"color": [204, 0, 0],
						"width": 1
					}
				};
			}

			settings["popupTemplate"]={
				title: response["Thing"]['description'],
				content: [
					{
						type: "text",
						text: result+response["unitOfMeasurement"]["symbol"]
					}
				]
			};
			settings["id"]=thingID;

			if(locationObj != undefined){
				mapObj.addPointToMap(settings);
			}else{
				mapObj.updatePoint(settings);
			}
			
		}
	};

	var init=function(){
		var promise=staLib.processor({
			baseURL: "http://example.sensorup.com/v1.0/",     
			mapContainer: "map",  
			view: "Things",
			mqtt: {
				hostname: "example.sensorup.com",
				port: 9001,
				onMessageArrived: onMessageArrived
			}
		}, true);

		promise.then(function(obj){
			mapObj=obj;
			var data = mapObj.data;

			for(var key in data["Things"]){
				var dsIDArr=data["Things"][key];
				var result="N/A";
	 
				for(var i=0; i<dsIDArr.length; i++){
					var dsObj=data["Datastreams"][dsIDArr[i]];

					if(dsObj["Thing"]["Locations"].length ==0){
						continue;
					}

					var locationObj={
						"coordinates": dsObj["Thing"]["Locations"][0]["location"]["coordinates"],
						"type": dsObj["Thing"]["Locations"][0]["location"]["type"]
					};
	 
					if(data["Observations"].hasOwnProperty(dsIDArr[i])){
						result=Number(data["Observations"][dsIDArr[i]]["result"]);
					}

					filterResult(dsObj, result, locationObj);
				}
			}
		});
	};
	init();
});

init(settings)

Parameters Type: Object

Return Type: object

Requires an object specifying the settings for the map. Creates a map with the corresponding view. Returns a promise, if the promise is resolved it returns a map object.

processor(settings, initMap)

Parameters: object, boolean

Return Type: object

Expects an object that contians the settings for the map and a boolean indicating whether to initialize the map. Returns a promise, if the promise is resolved it returns a map object.

Settings Object

baseURL

Required

Type: String

The base URL to the SensorThings API.

mapContainer

Required

Type: String

The id of the container where the map will be added.

view

Required

Type: String

Type of view that should be displayed on the map. There are 3 views that are implemented in this library:

Things
ObservedProperties
Sensors

ids

Optional

Type: Array

Specifiy an ID of an element that exist in that view. The map will only display that element on the map.

query

Optional

Type: Object

Specifiy queries on the view.

skip - type: int, skip the number of elemnts
numOfElements - type: int, return the number of elements specified by the user.
retrieveAll - type: boolean, if false do not follow nextLink navigation links, default true.

query: {
	skip: 3,
	numOfItems: 5
}

showObservations

Optional

Type: Boolean

Show the most recent observation of that datastream.
Default: false

mqtt

Optional

Type: Object

Enable MQTT to get realtime messages from sensors. The object can contain the following parameters:

hostname - type: String (Required)
port - type: number (Required)
onMessageArrived - type: function (Required)
onConnect - type: function (Optional)

mqtt: {
	hostname: "example.sensorup.com",
	port: 9001,
	onMessageArrived: onMessageArrived
}

viewLoaded

Optional

Type: function

Callback made once the map has been loaded to the view.

baseMap

Optional

Type: String

Set the base map.
Default: streets

zoom

Optional

Type: int

Set the zoom level of the map.

Default: 10

center

Optional

Type: Array

Set the center of map when map is loaded.

Default: [-114.012545, 51.0455]

marker

Optional

Type: Object

Set the styling of the marker. You can either set the color and outline of the marker or you can set an image as the markers icon. For image set the URL, width, and height of the image.
Note: If the color and URL is defined, the library will make the marker icon be an image.

Default:

marker: {
	color: [0, 153, 255],
	outline: {
		color: [0, 138, 230],
		width: 1
	}
}

polygon

Optional

Type: Object

Set the styling of the polygon. You can set the color and outline of the polygon. If only marker is defined, then it takes the value of the marker, unless the polygon object is defined.

Default:

polygon: {
	color: [0, 153, 255],
	outline: {
		color: [0, 138, 230],
		width: 1
	}
}

ArcGIS SensorThings Javascript Library

Options:

Docs

init(settings)

Parameters Type: Object

Return Type: object

processor(settings, initMap)

Parameters: object, boolean

Return Type: object

Map Object Methods

clearMap()

Parameters: none

Return Type: none

resetMap()

Parameters: none

Return Type: none

initMap()

Parameters: none

Return Type: none

initMQTT(mqttSettings)

Parameters: Object

Return Type: none

mapView(settings)

Parameters: Object

Return Type: none

markerOnClickEvent(callback)

Parameters: function

Return Type: none

markerRemoveClickEvent()

Parameters: none

Return Type: none

addPointToMap(graphSettings)

Parameters Type: Object graphSettings

Return Type: none

updatePoint(graphSettings)

Parameters Type: Object graphSettings

Return Type: none

mqtt.mqttDisconnect()

Parameters: none

Return Type: none

mqtt.mqttSubscribe()

Parameters: none

Return Type: none

Settings Object

baseURL

Type: String

mapContainer

Type: String

view

Type: String

ids

Type: Array

query

Type: Object

showObservations

Type: Boolean

mqtt

Type: Object

viewLoaded

Type: function

baseMap

Type: String

zoom

Type: int

center

Type: Array

marker

Type: Object

polygon

Type: Object