/
index.html
110 lines (97 loc) · 3.35 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9,IE=10">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Instagram ArcGIS Streamlayer via ArcGIS GeoEvent Processor</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.6/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: 100%;
}
</style>
<script src="http://js.arcgis.com/3.6/"></script>
</head>
<body class="tundra">
<div id="map"></div>
</body>
<script>
var layerDefinition = {
"geometryType": "esriGeometryPoint",
"hasLiveData": true,
"fields": [
{
name: "ObjectId",
type: "esriFieldTypeOID",
alias: "ObjectId"
},
{
name: "DateStamp",
type: "esriFieldTypeDate",
alias: "DateStamp"
},
{
name: "link",
type: "esriFieldTypeString",
alias: "link"
},
{
name: "username",
type: "esriFieldTypeString",
alias: "username"
}
]
};
var map, featureCollection, streamLayer;
require(["dojo/_base/event","esri/map",
"esri/layers/StreamLayer",
"esri/InfoTemplate",
"esri/symbols/PictureMarkerSymbol"
], function(event, Map, StreamLayer, InfoTemplate, PictureMarkerSymbol){
map = new Map("map",{
basemap: "gray",
center: [-30.402, 45.642],
zoom: 3
});
makeNewStreamLayer();
function makeStreamLayer(){
featureCollection = {
"layerDefinition": null,
"featureSet": {
"features": [],
"geometryType": "esriGeometryPoint"}
};
featureCollection.layerDefinition = layerDefinition;
var layer = new StreamLayer(featureCollection, {
socketUrl: "ws://88.190.45.92:6180/instaws",
purgeOptions: { displayCount: 1000 },
trackIdField: "Link"
});
layer.on("message", processMessage);
layer.on("mouse-over", function (e){e.graphic.symbol.setHeight(150);e.graphic.symbol.setWidth(150);e.graphic.setGeometry(e.graphic.geometry);} );
layer.on("mouse-out", function (e){e.graphic.symbol.setHeight(25);e.graphic.symbol.setWidth(25);e.graphic.setGeometry(e.graphic.geometry);} );
layer.on("click", function (e){event.stop(e);window.open(e.graphic.attributes["Link"],'_blank');} );
return layer;
}
function processMessage(message){
var miniPicture = new PictureMarkerSymbol(message.graphic.attributes["Link"]+"media", 25, 25);
message.graphic.setSymbol(miniPicture);
}
function makeNewStreamLayer(){
streamLayer = makeStreamLayer();
map.addLayer( streamLayer );
}
});
</script>
</html>