var dojoConfig = {
paths: {
extras: location.pathname.replace(/\/[^/]+$/, "") + "/extras"
}
};
define(['dojo/_base/declare', 'jimu/BaseWidget', "widgets/GPS_Photos/extras/ClusterLayer", "esri/request","esri/dijit/PopupTemplate","esri/geometry/Point","esri/geometry/webMercatorUtils","esri/symbols/PictureMarkerSymbol",
"esri/renderers/ClassBreaksRenderer","esri/symbols/SimpleMarkerSymbol","esri/SpatialReference", "dojo/_base/array", "esri/InfoTemplate"],
function (declare, BaseWidget, ClusterLayer, esriRequest,PopupTemplate, Point, webMercatorUtils, PictureMarkerSymbol, ClassBreaksRenderer,SimpleMarkerSymbol,SpatialReference, arrayUtils, InfoTemplate) {
//To create a widget, you need to derive from BaseWidget.
return declare([BaseWidget, ], {
// Custom widget code goes here
baseClass: 'jimu-widget-myWidget',
//this property is set by the framework when widget is loaded.
//name: 'CustomWidget',
//methods to communication with app container:
// postCreate: function() {
// this.inherited(arguments);
// console.log('postCreate');
// },
startup: function () {
this.inherited(arguments);
var theMap = this.map;
// get the latest 1000 photos from instagram/laguna beach
var photos = esriRequest({
url: "widgets/GPS_Photos/data/1000-photos.json",
handleAs: "json"
});
photos.then(addClusters, error);
function addClusters(resp) {
var photoInfo = {};
var wgs = new SpatialReference({
"wkid": 4326
});
photoInfo.data = arrayUtils.map(resp, function (p) {
var latlng = new Point(parseFloat(p.lng), parseFloat(p.lat), wgs);
var webMercator = webMercatorUtils.geographicToWebMercator(latlng);
var attributes = {
"Caption": p.caption,
"Name": p.full_name,
"Image": p.image,
"Link": p.link
};
return {
"x": webMercator.x,
"y": webMercator.y,
"attributes": attributes
};
});
// popupTemplate to work with attributes specific to this dataset
var popupTemplate = new PopupTemplate({
"title": "Caption",
"fieldInfos": [{
"fieldName": "Caption",
visible: true
}, {
"fieldName": "Name",
"label": "By",
visible: true
}, {
"fieldName": "Link",
"label": "On Instagram",
visible: true
}],
"mediaInfos": [{
"title": "",
"caption": "",
"type": "image",
"value": {
"sourceURL": "{Image}",
"linkURL": "{Link}"
}
}]
});
var photoIcon = new PictureMarkerSymbol("widgets/GPS_Photos/images/photoIcon_50.png", 20, 20).setOffset(0, 3);
// cluster layer that uses OpenLayers style clustering
clusterLayer = new ClusterLayer({
"data": photoInfo.data,
"distance": 100,
"id": "clusters",
"labelColor": "#fff",
"labelOffset": 0,
"resolution": theMap.extent.getWidth() / map.width,
"singleColor": "#888",
"singleTemplate": popupTemplate,
"singleSymbol":photoIcon
});
var defaultSym = new PictureMarkerSymbol("widgets/GPS_Photos/images/cluster20.png", 20, 20);
var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
var small = new PictureMarkerSymbol("widgets/GPS_Photos/images/cluster20.png", 20, 20).setOffset(0, 3);
var medium = new PictureMarkerSymbol("widgets/GPS_Photos/images/cluster30.png", 30, 30).setOffset(0, 3);
var big = new PictureMarkerSymbol("widgets/GPS_Photos/images/cluster50.png", 50, 50).setOffset(0, 3);
var huge = new PictureMarkerSymbol("widgets/GPS_Photos/images/cluster50.png", 65, 65).setOffset(0, 3);
renderer.addBreak(0, 2, small);
renderer.addBreak(2, 200, medium);
renderer.addBreak(200, 1000, big);
renderer.addBreak(1000, 10000, huge);
clusterLayer.setRenderer(renderer);
theMap.addLayer(clusterLayer);
/*
// close the info window when the map is clicked
theMap.on("click", cleanUp);
// close the info window when esc is pressed
theMap.on("key-down", function (e) {
if (e.keyCode === 27) {
cleanUp();
}
});
*/
}
function error(err) {
console.log("something failed: ", err);
}
}
// onOpen: function(){
// console.log('onOpen');
// },
// onClose: function(){
// console.log('onClose');
// },
// onMinimize: function(){
// console.log('onMinimize');
// },
// onMaximize: function(){
// console.log('onMaximize');
// },
// onSignIn: function(credential){
// /* jshint unused:false*/
// console.log('onSignIn');
// },
// onSignOut: function(){
// console.log('onSignOut');
// }
// onPositionChange: function(){
// console.log('onPositionChange');
// },
// resize: function(){
// console.log('resize');
// }
//methods to communication between widgets:
});
});
function addLayerToMap() {
dynaLayer1 = new esri.layers.ArcGISDynamicMapServiceLayer("https://longgagp01.corp.tullowoil.local/arcgis/rest/services/Tullow_Assets/MapServer", {
opacity: 0.8,
id: "Tullow Assets"
});
this.map.addLayer(dynaLayer1);
}