nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Visualization Options

Ingeborgvan_der_Giessen

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

Vind meer berichten getagd met

Accepted answers

All comments

JonPeck

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>

JonPeck

I was able to get this working how I wanted. I found this sample on ESRI's website. I just modified the field names and the stream layer url. I'm no JavaScript whiz, but it was pretty easy to modify their sample code and plug in my field names. Took me only about 30 mins. Hope it helps you.

http://https://developers.arcgis.com/javascript/jssamples/layers_streamlayer.html

Ingeborgvan_der_Giessen

Hi,

No I did not. I had contact with Esri and they confirmed that it is possible after editing the stream layer with JavaScript. I do not have enough JavaScript knowledge to do so, unfortunately.

Good luck!

JonPeck

Did you ever figure out how to have a pop-up display the info of the StreamLayer? I'm working on doing the same thing and haven't figured it out yet.

Thanks.

RJSunderman

Hi Ingeborg,

My knowledge in the area of JavaScript and HTML isn't going to be sufficient to tell you how to do what you're asking, but I believe that the stream layer object in the HTML should have the information necessary to allow the "identification" of features. That is, you should be able to add code which will allow users to retrieve attributes associated with an event such as the event's date/time by clicking on a feature's location. I say that because part of the edits you can make to the HTML within the <script> tag as a developer includes a variable declaration for the layer (var layerDefinition = ...) which includes attribute fields.

If you look in the attached Twitter.zip archive you'll find a TwitterStreamLayer.html which was updated for the revised Twitter tutorial. (This tutorial should be up on the product gallery soon...)

Look for the first block of code below the layerDefinition declaration. You should see code which identifies the basemap, the map's center, and zoom level, then code which invokes a setClickEvents() function to establish callbacks for click events on the HTML form's two buttons. I'm assuming that with a sufficient knowledge of JavaScript you could establish a callback for a mouse click or double-click overtop the basemap which would find the nearest feature within a tolerance and report back to the user the attributes of that feature in some sort of pop-up. I just don't know how do actually do that.

Hope this helps -
RJ

TwitterConnector.zip

Ingeborgvan_der_Giessen

Hi RJ,

I tested the tutorial with the data and it worked, thanks for that!

Now I want to use it for my case: visualization of georeferenced tweets. I used a Twitter input, with a Filter (geolocated = true) and connected this to the stream layer output. The tweets are visualized by dots on the map, but I want more information than just the dot. I would like some information about the message and the time of the tweet.

Is it possible to adjust the streamlayer to my own wishes? And how?

Thanks a lot,
Ingeborg

RJSunderman

Hey Ingeborg,

Sorry for the confusion ... using a stream layer to visualize the geographic locations contained in tweets should be compliant with the Twitter "Rules". We are reworking the tutorial exercise to not collect the twitter content in a feature class; this I feel is a violation of the terms of service.

I've attached a file 'WebSocketsSupportFiles.zip' which contains the supporting files from a draft tutorial on working with WebSockets.

- RJ

WebSocketsSupportFiles.zip

image001.jpg

Ingeborgvan_der_Giessen

Hi RJ,

I tried out the tutorial, but it looks like I'm missing the correct data for the streamlayer.
Step 11 and 12 wants you to add data to your �??<GEP install folder>/assets�?? directory, but I do not have that data.
Could you provide the correct data?

Thanks a lot.

Greets,
Ingeborg

Ingeborgvan_der_Giessen

Hi RJ,

Thanks a lot for your eleborate answer! I will try the tutorial provided, it looks pretty simple.

What do you mean with your last comment about Twitter? Am i going to 'break the rules' by using this method?

Thanks!

Greets,
Ingeborg

RJSunderman

Hello Ingeborg -

Your best option for viewing Twitter posts on a map will be to push the GeoEvent data as Feature JSON (as opposed to Generic JSON) out to a web socket and use either Chrome or Firefox to create a "stream layer". This leverages JavaScript and WebSocket technology to stream the twitter events in near real time to a map for visualization.

The Twitter tutorial is being reworked for the 10.2.1 product release. The approach above will be reflected in the tutorial. Twitter's terms of service prohibit developers from caching or storing data harvested from tweets - which means that you cannot use the GEP Cache or Feature Service outputs and remain compliant with the Twitter TOS.

Attached is a PDF with draft material from the tutorial which is currently being developed. Hope this helps you in the near term.

- RJ

Using-JavaScript-StreamLayers.pdf

parameters.png

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.