Visualization Options

Ingeborgvan_der_Giessen · ‎11-18-2013

Hi,

I'm using the GeoEvent Processor for analyzing georeferenced Tweets concering the weather in the Netherlands.
The tutorial (introduction & twitter) provides information about visualization with the Operations Dashboard Application. Unfortunately, that application does not work on my computer due to an old version of Windows.

What are the other options for visualizing the georeferenced tweets (on a map), besides Operations Dashboard?

Thanks a lot,

Greets,
Ingeborg

JonPeck · ‎02-20-2014

Im going to attach the finished code I used that works with ESRI's twitter sample:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>StreamLayer using ArcGIS API for JavaScript and ArcGIS GeoEvent Processor for Server</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style type="text/css">
      html, body {
        height: 100%; width: 100%;
        margin: 0; padding: 0;
      }
      body{
        background-color: #fff; overflow:hidden;
        font-family: sans-serif;
      }
      #map {
        width: 100%;
        height: 80%;
      }

    </style>
    <script src="http://js.arcgis.com/3.8/"></script>
  </head>
  <body class="tundra">
      <div id="map"></div>
      <div>
        <span>Enter websocket connection: </span><input type="text" id="txtWsUrl" value="ws://localhost.esri.com:6180/StreamService" style="width: 400px"/><br/>
        <input type="button" id="cmdNewStream" value="Make Stream Layer" />
        <input type="button" id="cmdDisconnect" value="Disconnect Stream Layer" />
      </div>
  </body>

  <script>
      var curTime = new Date();
      var curTimeStamp = Date.parse(curTime.toUTCString());
      var layerDefinition = {
        "geometryType": "esriGeometryPoint",
        "timeInfo": {
          "startTimeField": "created_at",
          "endTimeField": null,
          "trackIdField": "id_str",
          "timeReference": null,
          "timeInterval": 1,
          "timeIntervalUnits": "esriTimeUnitsSeconds",
          "exportOptions": {
           "useTime": true,
           "timeDataCumulative": false,
           "timeOffset": null,
           "timeOffsetUnits": null
          },
          "hasLiveData": true
         },
        "fields": [
          {
            name: "text",
            type: "esriFieldTypeString",
            alias: "text"
          },
          {
            name: "created_at",
            type: "esriFieldTypeDate",
            alias: "created at"
          },
          {
            name: "retweet_count",
            type: "esriFieldTypeInteger",
            alias: "retweet count"
          },
          {
            name: "id_str",
            type: "esriFieldTypeString",
            alias: "id_str"
          }
        ]
      };

      var map, featureCollection, streamLayer;

      require(["esri/map",
        "esri/TimeExtent",
        "esri/layers/StreamLayer",
        "esri/InfoTemplate",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/renderers/SimpleRenderer",
        "esri/renderers/TimeClassBreaksAger",
        "esri/renderers/TemporalRenderer",
        "dojo/_base/Color",
        "dojo/dom",
        "dojo/on",
        "dojo/domReady!"
      ], function(Map, TimeExtent, StreamLayer, InfoTemplate, SimpleMarkerSymbol, SimpleLineSymbol, SimpleRenderer, TimeClassBreaksAger, TemporalRenderer, Color, dom, on){
          var trackedBusses = {}, cnt = 0;

          map = new Map("map",{
            basemap: "gray",
            center: [-96, 36.428],
            zoom: 4 
          });

          // event listeners for button clicks
          on(dom.byId("cmdNewStream"), "click", makeNewStreamLayer);
          on(dom.byId("cmdDisconnect"), "click", disconnectStreamLayer);

          function makeStreamLayer(){
            //Make FeatureCollection to define layer without using url
            featureCollection = {
            "layerDefinition": null,
            "featureSet": {
              "features": [],
              "geometryType": "esriGeometryPoint"}
            };
            featureCollection.layerDefinition = layerDefinition;

            // Instantiate StreamLayer
            // 1. socketUrl is the url to the GeoEvent Processor web socket.
            // 2. purgeOptions.displayCount is the maximum number of features the
            //    layer will display at one time
            // 3. trackIdField is the name of the field that groups features
            var layer = new StreamLayer(featureCollection, {
              socketUrl: txtWsUrl.value,
              purgeOptions: { displayCount: 500 },
              trackIdField: featureCollection.layerDefinition.timeInfo.trackIdField,
              infoTemplate: new InfoTemplate("tweet: ${text}", "Timestamp: ${created_at}" )
            });
            console.log("TrackID: ", featureCollection.layerDefinition.timeInfo.trackIdField);
            console.log("TrackID: ", layer.timeInfo.trackIdField);

            //Make renderer and apply it to StreamLayer
            var renderer = makeRenderer();
            layer.setRenderer( renderer );

            //Subscribe to onMessage event of StreamLayer so can adjust map time
            layer.on("message", processMessage);
            return layer;
          }

          // Process message that StreamLayer received.
          function processMessage(message){
            if (featureCollection.layerDefinition.timeInfo && 
                featureCollection.layerDefinition.timeInfo.startTimeField) {
              var timestamp = message[0].attributes[featureCollection.layerDefinition.timeInfo.startTimeField];
              if (! map.timeExtent){
                map.setTimeExtent(new esri.TimeExtent(new Date(timestamp), new Date(timestamp)));
                console.log("TIME EXTENT: ", map.timeExtent);
              } else {
                var tsEnd = Date.parse(map.timeExtent.endTime.toString());
                if (timestamp > tsEnd){
                  map.setTimeExtent(new esri.TimeExtent(map.timeExtent.startTime, new Date(timestamp)));
                  console.log("TIME EXTENT: ", map.timeExtent);
                }
              }
            }
          }

          // Make new StreamLayer and add it to map.
          function makeNewStreamLayer(){
            disconnectStreamLayer();
            streamLayer = makeStreamLayer();
            map.addLayer( streamLayer );
          }

          // Disconnect StreamLayer from websocket and remove it from the map
          function disconnectStreamLayer(){
            if (streamLayer){
              streamLayer.suspend();
              streamLayer.disconnect();
              streamLayer.clear();
              map.removeLayer(streamLayer);
              streamLayer = null;
              //map.timeExtent = null;
            }
          }

          // Make temporal renderer with latest observation renderer
          function makeRenderer(){
            var obsRenderer = new SimpleRenderer(
              new SimpleMarkerSymbol("circle", 8,
              new SimpleLineSymbol("solid",
              new Color( [5, 112, 176, 0] ), 1),
              new Color( [5, 112, 176, 0.4] )
            ));

            var latestObsRenderer = new SimpleRenderer(
              new SimpleMarkerSymbol("circle", 12,
              new SimpleLineSymbol("solid",
              new Color( [5, 112, 176, 0] ), 1),
              new Color( [5, 112, 176] )
            ));

            var temporalRenderer = new TemporalRenderer(obsRenderer, latestObsRenderer, null, null);
            return temporalRenderer;
          }
        });
  </script>

</html>

JP