SensorUp has created a library in Javascript that allows ArcGIS clients to view and access SensorThings API directly within the Esri map. The minimum code to get you started using the library is shown below.
<!-- 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(); });
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.
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.
Clears all markers or polygons from the map.
Resets map to the default values.
Initalizes the map.
Inits MQTT. User can supply the MQTT settings or if the settings were defined in initialization of the map, then it is not required to define the mqtt settings again (set mqttSettings to undefined).
Reinitalize map with new settings.
Callback function is called when marker is clicked.
Removes click event
Adds the point or polygon to the map. The parameter object should contain the following items:
Updates the marker on the map. The parameter object should contain the following items:
Disconnects MQTT.
Subscribes to all datastreams under the current view.
The base URL to the SensorThings API.
The id of the container where the map will be added.
Type of view that should be displayed on the map. There are 3 views that are implemented in this library:
Specifiy an ID of an element that exist in that view. The map will only display that element on the map.
Specifiy queries on the view.
query: { skip: 3, numOfItems: 5 }
Show the most recent observation of that datastream.
Default: false
Enable MQTT to get realtime messages from sensors. The object can contain the following parameters:
mqtt: { hostname: "example.sensorup.com", port: 9001, onMessageArrived: onMessageArrived }
Callback made once the map has been loaded to the view.
Set the base map.
Default: streets
Set the zoom level of the map.
Default: 10
Set the center of map when map is loaded.
Default: [-114.012545, 51.0455]
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 } }
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 } }