// CONST_NO ( type: esriFieldTypeString , alias: CONST_NO , length: 2 )
// CONST_NAME ( type: esriFieldTypeString , alias: CONST_NAME , length: 40 )
// REGION_NO ( type: esriFieldTypeString , alias: REGION_NO , length: 2 )
// PARISH_NAME ( type: esriFieldTypeString , alias: PARISH_NAME , length: 20 )
// PD_NO_ ( type: esriFieldTypeString , alias: PD_NO_ , length: 4 )
// ELECTOR_CNT ( type: esriFieldTypeInteger , alias: ELECTOR_CNT )
// OLD_PD_NO ( type: esriFieldTypeString , alias: OLD_PD_NO , length: 50 )
// INTER_PD_NO ( type: esriFieldTypeString , alias: INTER_PD_NO , length: 50 )
// PD_NO_INT ( type: esriFieldTypeSmallInteger , alias: INTEGER PD NUMBER )
// Shape ( type: esriFieldTypeGeometry , alias: Shape )
//Shape.STArea() ( type: esriFieldTypeDouble , alias: Shape.STArea() )
//Shape.STLength() ( type: esriFieldTypeDouble , alias: Shape.STLength() )
var view;
var removeViewOutline;
var highlightSelect;
var circleBuffer;
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/LayerList",
"esri/widgets/DistanceMeasurement2D",
"esri/widgets/AreaMeasurement2D",
"esri/widgets/Search",
"esri/widgets/Home",
"esri/widgets/Expand",
"esri/widgets/BasemapGallery",
"esri/tasks/support/Query",
"esri/tasks/QueryTask",
"esri/layers/support/LabelClass",
"esri/layers/GraphicsLayer",
"esri/layers/MapImageLayer",
"esri/layers/FeatureLayer",
"esri/layers/TileLayer",
"esri/layers/support/Sublayer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/TextSymbol",
"esri/core/watchUtils",
"esri/PopupTemplate",
"esri/widgets/Sketch/SketchViewModel",
"esri/Graphic",
"esri/Color",
"esri/core/watchUtils",
"esri/geometry/Extent",
"esri/tasks/FindTask",
"esri/tasks/support/FindParameters",
"esri/geometry/geometryEngine",
"esri/geometry/Circle",
"esri/geometry/Polyline",
"esri/geometry/Point",
"esri/symbols/TextSymbol",
"dojo/dom",
"dojo/dom-class",
"dojo/on",
"dojo/mouse",
"dojo/domReady!"
], function(Map,
MapView,
LayerList,
DistanceMeasurement2D,
AreaMeasurement2D,
Search,
Home,
Expand,
BasemapGallery,
Query,
QueryTask,
LabelClass,
GraphicsLayer,
MapImageLayer,
FeatureLayer,
TileLayer,
Sublayer,
SimpleFillSymbol,
SimpleLineSymbol,
SimpleMarkerSymbol,
TextSymbol,
watchUtils,
PopupTemplate,
SketchViewModel,
Graphic,
Color,
WatchUtils,
Extent,
FindTask,
FindParameters,
GeometryEngine,
Circle,
Polyline,
Point,
TextSymbol,
Dom,
DomClass,
On,
Mouse) {
//VARIABLES
let canClickAgain = true;
let activeWidget = null;
let geometryArr = [];
let initialExtent = null;
let officeLayer = null;
let colorPool = ['#324851','#4CB5F5','#1E0000','#BCBABE', '#4D648D','#2988BC','#9a9EAB','#5D535E','#4C3F54','#B38867'];
let edresults =[],consresults =[],parishresults = [], officeresults = [];
var polylineSymbol = {
type: "simple-line", // autocasts as SimpleLineSymbol()
color: [226, 119, 40],
width: 4
};
var pointKnob = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: [226, 119, 40],
style: "circle",
size: "20px", // pixels
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 2
}
};
let polygonSymbol = new SimpleFillSymbol({
color: "#265CC5EF",
style: "none",
outline: { // autocasts as esri/symbols/SimpleLineSymbol
color: "#58cbff",
width: 5
}
});
var circleSymb = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_NULL,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
new Color([105, 105, 105]),
2),
new Color([255, 255, 0, 0.25])
);
//LAYERS
// var consti = new FeatureLayer({
// url: "https://services6.arcgis.com/3R3y1KXaPJ9BFnsU/arcgis/rest/services/WEB_MAP2/FeatureServer/1",
// spatialReference : 102100,
// outFields: ["*"],
// visible: false
// });
var officeLabel = { // autocasts as new LabelClass()
symbol: {
type: "text", // autocasts as new TextSymbol()
color: "blue",
haloColor: [255, 255, 255, 255], // black
haloSize: 3,
font: { // autocast as new Font()
family: "sans-serif",
size: 7
},
horizontalAlignment: "right",
lineWidth: 32
},
labelExpressionInfo: {
expression: "$feature.OFFICE_NAME + ' (' +$feature.LOCATION + ')'"
},
labelPlacement: "below-center"
};
var parishLabels = { // autocasts as new LabelClass()
symbol: {
type: "text", // autocasts as new TextSymbol()
color: "black",
haloColor: [255, 255, 255, 255], // black
haloSize: 3,
font: { // autocast as new Font()
family: "sans-serif",
size: 13,
weight: "bold"
}
},
//labelPlacement: "center-along",
labelExpressionInfo: {
expression: "$feature.PARISH_NAM"
}//s,
//deconflictionStrategy: "none"
};
var constLabels = { // autocasts as new LabelClass()
symbol: {
type: "text", // autocasts as new TextSymbol()
color: [76,0,118,1],
haloColor: "white",//[255, 255, 255, 255], // black
haloSize: 2,
font: { // autocast as new Font()
family: "sans-serif",
size: 7,
weight: "bold"
}
},
//labelPlacement: "center-along",
labelExpressionInfo: {
expression: "$feature.CONST_NAME"
}//s,
//deconflictionStrategy: "none"
};
var popupAdminDetails = {
"title": "<b>{OFFICE_NAME}</b>",
"content": [{
type: "fields",
fieldInfos: [
{
fieldName: "REGION",
label: "<b>REGION<b>"
},{
fieldName: "FULL_ADDRESS",
label: "<b>ADDRESS</b>"
},{
fieldName: "LOCATION",
label: "<b>LOCATION<b>"
}]},{
type: "media", // MediaContentElement
mediaInfos: [
{
//title: "<b>test</b>",
type: "image",
//caption: "office",
value: {
sourceURL:
"officeimgs/{GEO_TAG}.JPG"
}
}]
}]
//"content": "<b>REGION:</b> {REGION}<br><b>ADDRESS:</b> {FULL_ADDRESS}<br><b>LOCATION:</b> {LOCATION}"
}
var popupAdminDetails2 = {
"title": "<b>{OFFICE_NAME}</b>",
"content": "<b>REGION:</b> {REGION}<br><b>ADDRESS:</b> {FULL_ADDRESS}<br><b>LOCATION:</b> {LOCATION}"
}
// var popupAdminDetails = {
// "title": "<b>{OFFICE_NAME}</b>",
// "content": [{
// type: "fields",
// fieldInfos: [
// {
// fieldName: "REGION",
// label: "<b>REGION<b>"
// },{
// fieldName: "FULL_ADDRESS",
// label: "<b>ADDRESS</b>"
// },{
// fieldName: "LOCATION",
// label: "<b>LOCATION<b>"
// }]},{
// type: "media", // MediaContentElement
// mediaInfos: [
// {
// //title: "<b>test</b>",
// type: "image",
// //caption: "office",
// value: {
// sourceURL:
// "img/office pics/{GEO_TAG}.JPG"
// }
// }]
// }]
// //"content": "<b>REGION:</b> {REGION}<br><b>ADDRESS:</b> {FULL_ADDRESS}<br><b>LOCATION:</b> {LOCATION}"
// }
//
// var popupPdDetails = {
// "title": "<b>PD #:<b> {PD_NO_}</b>",
// "content": [{type: "fields",
// fieldInfos: [{
// fieldName: "CONST_NAME",
// label: "<b>CONSTITUENCY<b>"
// },{
// fieldName: "ED_NAME",
// label: "<b>ED NAME</b>"
// },{
// fieldName: "ED_NO",
// label: "<b>ED #<b>"
// },{
// fieldName: "ELECTOR_CNT",
// label: "<b>ELECTOR COUNT<b>"
// }]
// }],
// //"content": "<b>CONSTITUENCY:</b> {CONST_NAME}<br><b>ED NAME:</b> {ED_NAME}<br><b>ED #:</b> {ED_NO}<br><b>" + "ELECTOR COUNT:</b> {ELECTOR_CNT}",
// "actions": [measureAreaAction, measurePerimeterAction, clearAction]
// }
var popupConstiDetails = {
"title": "<b>{CONST_NAME}</b>",
"content": [{type: "fields",
fieldInfos: [
// {
// fieldName: "SITTING_MP",
// label: "<b>SITTING MP<b>"
// },{
// fieldName: "MP_AFFILIATION",
// label: "<b>MP AFFILIATION</b>"
// },
{
fieldName: "REGION_NO",
label: "<b>REGION<b>"
},{
fieldName: "CONST_NO",
label: "<b>CONST. #<b>"
}]
}],
//"content": "<b>SITTING MP:</b> {SITTING_MP}<br><b>MP AFFILIATION:</b> {MP_AFFIL}<br><b>REGION:</b> {REGION_NO}<br><b>" + "CONST. #:</b> {CONST_NO}",
//"actions": [measureAreaAction, measurePerimeterAction, clearAction]
}
consti = new FeatureLayer({
url: "https://services6.arcgis.com/3R3y1KXaPJ9BFnsU/arcgis/rest/services/ECJWEB_MAP/FeatureServer/6",
visible: true,
title: "Constituency Boundaries",
labelsVisible: true,
//minScale: 289000,
//maxScale: 73000,
labelingInfo: [constLabels],
popupTemplate: popupConstiDetails
});
anamolies = new FeatureLayer({
url: "https://services6.arcgis.com/3R3y1KXaPJ9BFnsU/arcgis/rest/services/ECJWEB_MAP/FeatureServer/7",
visible: true,
title: "Constituency Anamolies",
labelsVisible: true,
//minScale: 289000,
//maxScale: 73000
//labelingInfo: [constLabels]
});
offices = new FeatureLayer({
url: "https://services6.arcgis.com/3R3y1KXaPJ9BFnsU/arcgis/rest/services/ECJWEB_MAP/FeatureServer/3",
visible: true,
labelsVisible: true,
title: "Admin Offices",
labelingInfo: [officeLabel],
minScale: 289000,
maxScale: 0,
//popupTemplate: popupAdminDetails2
popupTemplate: null
});
//consti.labelingInfo[0].symbol.font.family = "Arial Unicode MS";
ed = new FeatureLayer({
url: "https://services6.arcgis.com/3R3y1KXaPJ9BFnsU/arcgis/rest/services/ECJWEB_MAP/FeatureServer/7",
//renderer: ed_renderer,
visible: true,
labelsVisible: false,
title: "Electoral Division Boundaries",
minScale: 73000,
maxScale: 0//,
//labelingInfo: [labelClass]
});
ed_colored = new FeatureLayer({
url: "https://services6.arcgis.com/3R3y1KXaPJ9BFnsU/arcgis/rest/services/ECJWEB_MAP/FeatureServer/8",
//renderer: ed_renderer,
visible: true,
labelsVisible: true,
title: "Electoral Division Colour-Fill",
//popupTemplate: popupEdDetails,
minScale: 200000,
maxScale: 0//,
// labelingInfo: [labelClass]
});
parish = new FeatureLayer({
url: "https://services6.arcgis.com/3R3y1KXaPJ9BFnsU/arcgis/rest/services/ECJWEB_MAP/FeatureServer/5",
//renderer: parish_renderer,
visible: true,
labelsVisible: true,
title: "Parish Boundaries",
minScale: 0,
maxScale: 289000,
labelingInfo: [parishLabels]
});
pd = new FeatureLayer({
url: "https://services6.arcgis.com/3R3y1KXaPJ9BFnsU/arcgis/rest/services/ECJWEB_MAP_ANDROID/FeatureServer/10",
//visible: false,
title: "Polling Division Boundaries",
minScale: 72000,
maxScale: 0//,
//labelingInfo: [labelClass]
});
streets = new FeatureLayer({
url: "https://services6.arcgis.com/3R3y1KXaPJ9BFnsU/arcgis/rest/services/STREETS_AND_PDS/FeatureServer/0",
//visible: false,
title: "Streets layer",
minScale: 72000,
maxScale: 0//,
//labelingInfo: [officeLabel2]
});
community = new FeatureLayer({
url: "https://services6.arcgis.com/3R3y1KXaPJ9BFnsU/arcgis/rest/services/ECJWEB_MAP/FeatureServer/2",
//visible: false,
title: "Community layer",
minScale: 100000,
maxScale: 0//,
//labelingInfo: [officeLabel2]
});
consti.on("layerview-destroy", function(event){
// The LayerView for the layer that emitted this event
console.log("Testing consti");
});
// parishlabel = new FeatureLayer({
// url: "https://services6.arcgis.com/3R3y1KXaPJ9BFnsU/arcgis/rest/services/parish_layer/FeatureServer/0",
// //renderer: parish_renderer,
// visible: true,
// labelsVisible: true,
// title: "Parish Boundaries",
// minScale: 0,
// maxScale: 289000
// });
//gis2014d:6080
//192.168.100.89:6080
//https://goj.maps.arcgis.com/home/item.html?id=3be05c467aa34c549420e21c143b8406
//http://192.168.100.89:6080/arcgis/rest/services/ECJWEB_MAP/FeatureServer/1
//https://services6.arcgis.com/3R3y1KXaPJ9BFnsU/arcgis/rest/services/WEB_MAP2/FeatureServer
//http://192.168.100.89:6080/arcgis/rest/services/ECJWEB_MAP/MapServer
// var boundaryLayer = new MapImageLayer({
// url: "https://tiles.arcgis.com/tiles/3R3y1KXaPJ9BFnsU/arcgis/rest/services/WEB_MAP2/MapServer", //LINK TO SERVER MANAGER ARCGIS WEB SERVICE
// spatialReference : 102095,
// outFields: ["*"],
// mode: FeatureLayer.MODE_ONDEMAND,
// sublayers: [
// {
// id: 6, //ED LAYER
// visible: true,
// labelsVisible: true,
// minScale: 73000,
// maxScale: 0
// },
// {
// id: 5, //ED LAYER
// visible: true,
// labelsVisible: false,
// minScale: 73000,
// maxScale: 0
// },
// {
// id: 3, //CONSTITUENCY LAYER
// visible: true,
// labelsVisible: true,
// minScale: 289000,
// maxScale: 73000
// },
// {
// id: 2, //ADMIN OFFICES LAYER
// visible: true,
// labelsVisible: false,
// minScale: 289000,
// maxScale: 0
// },
// {
// id: 2, //PARISH LAYER
// visible: true,
// labelsVisible: true,
// minScale: 0,
// maxScale: 289000
// },
// {
// id: 1, //ADMIN OFFICES LAYER
// visible: true,
// labelsVisible: true,
// minScale: 73000,
// maxScale: 0,
// popupTemplate: null
// }
// ]
// });
var graphicsLayer = new GraphicsLayer();
var map = new Map({
basemap: "topo-vector",
layers: [consti, parish, anamolies, offices, community, streets, pd, ed_colored, graphicsLayer]//boundaryLayer,consti, graphicsLayer]//[parish, parishlabel, consti, ed, ed_colored, offices, graphicsLayer]
});
view = new MapView({
container: "mapView",
map: map,
center: [-77.2627, 18.0927],
zoom: 10//,
// constraints: {
// minScale: 0, // User cannot zoom out beyond a scale of 1:500,000
// maxScale: 140000
// }
});
view.when(() => {
const layerList = new LayerList({
view: view
});
const expand = new Expand({
view: view,
content: layerList
});
// Add widget to the top right corner of the view
view.ui.add(expand, "top-left");
});
view.ui.add("topbar", "bottom-right");
document
.getElementById("distanceButton")
.addEventListener("click", function () {
setActiveWidget(null);
if (!this.classList.contains("active")) {
setActiveWidget("distance");
} else {
setActiveButton(null);
}
});
document
.getElementById("areaButton")
.addEventListener("click", function () {
setActiveWidget(null);
if (!this.classList.contains("active")) {
setActiveWidget("area");
} else {
setActiveButton(null);
}
});
function setActiveWidget(type) {
switch (type) {
case "distance":
activeWidget = new DistanceMeasurement2D({
view: view
});
// skip the initial 'new measurement' button
activeWidget.viewModel.start();
view.ui.add(activeWidget, "top-right");
setActiveButton(document.getElementById("distanceButton"));
break;
case "area":
activeWidget = new AreaMeasurement2D({
view: view
});
// skip the initial 'new measurement' button
activeWidget.viewModel.start();
view.ui.add(activeWidget, "top-right");
setActiveButton(document.getElementById("areaButton"));
break;
case null:
if (activeWidget) {
view.ui.remove(activeWidget);
activeWidget.destroy();
activeWidget = null;
}
break;
}
}
function setActiveButton(selectedButton) {
// focus the view to activate keyboard shortcuts for sketching
view.focus();
let elements = document.getElementsByClassName("active");
for (let i = 0; i < elements.length; i++) {
elements[i].classList.remove("active");
}
if (selectedButton) {
selectedButton.classList.add("active");
}
}
var search = new Search({
view: view,
allPlaceholder: "Search",
sources: []
});
search.viewModel.sources = [{
layer: offices,
searchFields: ["OFFICE_NAME"],
displayField: "OFFICE_NAME",
exactMatch: false,
outFields: ["OFFICE_NAME", "LOCATION"],
name: "Admin Offices",
placeholder: "example: Kingston"
},
{
layer: parish,
searchFields: ["PARISH_NAM"],
displayField: "PARISH_NAM",
exactMatch: false,
outFields: ["OBJECTID", "PARISH_NAM"],
name: "Parishes",
placeholder: "example: Kingston"
},
{
layer: ed_colored,
searchFields: ["ED_NAME"],
displayField: "ED_NAME",
exactMatch: false,
outFields: ["ED_NO", "ED_NAME"],
name: "Electoral Divisions",
placeholder: "example: Kingston"
},
{
layer: community,
searchFields: ["COMM_NAME"],
displayField: "COMM_NAME",
exactMatch: false,
outFields: ["COMM_NAME", "PARISH"],
name: "Community",
placeholder: "Communities"
},
{
layer: consti,
searchFields: ["CONST_NAME"],
displayField: "CONST_NAME",
exactMatch: false,
enableInfoWindow: true,
outFields: ["CONST_NO", "CONST_NAME"],
name: "Constituency",
placeholder: "example: Kingston Central"
}];
view.ui.add(search, "bottom-left"); //Add to the map
const homeBtn = new Home({
view: view
});
// Add the home button to the top left corner of the view
view.ui.add(homeBtn, "top-left");
const basemapGallery = new BasemapGallery({
view: view,
});
// Create an Expand instance and set the content
// property to the DOM node of the basemap gallery widget
// Use an Esri icon font to represent the content inside
// of the Expand widget
const bgExpand = new Expand({
view: view,
content: basemapGallery
});
// close the expand whenever a basemap is selected
basemapGallery.watch("activeBasemap", () => {
const mobileSize =
view.heightBreakpoint === "xsmall" ||
view.widthBreakpoint === "xsmall";
if (mobileSize) {
bgExpand.collapse();
}
});
// Add the expand instance to the ui
view.ui.add(bgExpand, "top-left");
view.when(function(){
if (view.zoom > 12){
alert("test");
}
showNoticeInfo();
}, function(error){
// This function will execute if the promise is rejected due to an error
});
//BEGIN INIT OF MAP FUNCTIONS
Propsy.view = view;
Propsy.map = map;
Propsy.graphicsLayer = graphicsLayer;
Propsy.document = document;
Propsy.body = document.body;
Propsy.loadingImg = "mapimg/loading_bar.gif";
Propsy.init();
punchSite();
// //WATCH THE FEATURE LAYER FOR ACTIONS AFTER consti IS LOADED
let lastClickStamp;
view.whenLayerView(consti).then(function(lyrView) {
setExtents();
WatchUtils.whenTrue(view, "stationary", checkAnimating); //when view is steady
WatchUtils.whenFalseOnce(lyrView, "updating", function(){
view.on("pointer-move", function(evt) {
var screenPoint = {
x: evt.x,
y: evt.y
};
// the hitTest() checks to see if any graphics in the view
// intersect the given screen x, y coordinates
// view.hitTest(screenPoint)
// .then( function(response){
// getGraphics(response);
// });
});
});
view.on("click", function(evt){
var container = document.getElementById("data-search-results-container");
console.log(container.display);
console.log(evt);
removeViewOutline = document.getElementsByClassName("esri-view-surface");
removeViewOutline[0].classList.remove("esri-view-surface--inset-outline");
if(circleBuffer && evt.button === 2){
view.graphics.removeAll();
return false;
}
screenClick = evt;
view.hitTest(evt).then(function(response){
if (response.results.length) {
var graphic = response.results.filter(function (result) {
return result.graphic.layer === consti || result.graphic.layer === offices || result.graphic.layer === graphicsLayer;
})[0].graphic;
if (highlightSelect) {
highlightSelect.remove();
}
if(graphic.geometry.type == "polygon"){
//if(view.scale > 300000){
zoomToArea(graphic);
// }
view.graphics.removeAll();
showConstiDetails(evt);
}
if(graphic.geometry.type == "point"){
//console.log(graphicsLayer);
//let clickStamp = Math.round(event.timestamp);
let clickStamp = Math.round(evt.timestamp);
if(lastClickStamp === 0)
lastClickStamp = clickStamp;
if(view.scale < 10000){
circleBuffer = new Circle({
center: evt.mapPoint,
geodesic: true,
radius: 15,
radiusUnit: "meters",
//x: evt.x,
//y: evt.y,
time: clickStamp
});
}else{
circleBuffer = new Circle({
center: evt.mapPoint,
geodesic: true,
radius: 0.4,
radiusUnit: "miles",
//x: evt.x,
//y: evt.y,
time: clickStamp
});
view.center = [evt.mapPoint.longitude, evt.mapPoint.latitude];
//view.center.y = evt.y;
}
if((clickStamp - lastClickStamp ) < 1000)
return;
console.log(view);
console.log(view.scale);
console.log(circleBuffer);
view.graphics.removeAll();
var graphic = new Graphic(circleBuffer, circleSymb);
view.graphics.add(graphic);
var query = consti.createQuery();
query.geometry = circleBuffer.extent;
//query.geometry = view.toMap(evt);
query.outSpatialReference = view.spatialReference;
// Use a fast bounding box query. It will only go to the server if bounding box is outside of the visible map.
consti.queryFeatures(query).then(findInBuffer(graphic));
lastClickStamp = clickStamp;
}
//});
}
});
// }
});
}).catch(function(error) {
// An error occurred during the layerview creation
console.log(error);
});
view.on("pointer-move", function(event){
view.hitTest(event).then(function(response){
if (response.results.length) {
var graphic = response.results.filter(function (result) {
return result.graphic.layer === consti || result.graphic.layer === offices;
})[0].graphic;
view.whenLayerView(graphic.layer).then(function(layerView){
if (highlightSelect) {
highlightSelect.remove();
}
if(graphic.geometry.type == "polygon"){
highlightSelect = layerView.highlight(graphic);
//console.log(graphic);
}
if(graphic.geometry.type == "point"){
//let clickStamp = Math.round(event.timestamp);
highlightSelect = layerView.highlight(graphic);
}
});
}
});
});
function showNoticeInfo(){
var popupContainer = document.getElementById("popup-block-container");
var imgtag = document.getElementById("popup-block-img");
var title = document.getElementById("popup-block-title");
var details = document.getElementById("popup-block-details");
details.innerHTML = "";
details.innerHTML += "<span class='popup-block-detail-title'>For information not displayed, please feel free to contact the Electoral Office of Jamaica - GIS Department.</span></br>";
details.innerHTML += "<span class='popup-block-detail-line'><span class='popup-block-detail-title'>Address</span>";
details.innerHTML += "<span class='popup-block-detail-line'> 43 Duke Street, Kingston, Jamaica </span></br/>";
details.innerHTML += "<span class='popup-block-detail-line'><span class='popup-block-detail-title'>Contact</span>";
details.innerHTML += "<span class='popup-block-detail-line'> Tel: (876)-922-0425-9 </span>";
details.innerHTML += "<span class='popup-block-detail-line'> Toll-Free: 1-888-991-VOTE (8683) </span>";
details.innerHTML += "<span class='popup-block-detail-line'> Fax: (876) 922-4058 </span></br>";
details.innerHTML += "<span class='popup-block-detail-line'><span class='popup-block-detail-title'>Opening Hours</span>Mon-Thu. 8:30AM - 5:00PM</br>Fri. 8:30AM - 4:00PM</span>";
//details.innerHTML += "</span>Fri. 8:30AM - 4:00PM</span>";
//imgtag.src = "officeimgs/8 HEAD OFFICE DUKE STREET 2.JPG";
imgtag.style.display = "none";
details.style.width = "120%";
title.innerHTML = "NOTICE";
title.style.color = "red";
//setTimeout(function(){
popupContainer.style.width = "850px";
popupContainer.style.height = "294px";
popupContainer.style.display = "block";
popupContainer.style.top = "236px";
popupContainer.style.opacity = "1";
popupContainer.style.zIndex = "16";
}
function showOfficeDetails(feat){
//console.log(feat);
var googlemaps = "https://www.google.com/maps/dir/?api=1&destination=" + feat.geometry.latitude + "%2C" + feat.geometry.longitude;
//var encoded_address = encodeURI(feat.attributes.FULL_ADDRESS);
//console.log(encoded_address);
//var googlemaps = "https://www.google.com/maps/dir/?api=1&destination=" + encoded_address;
//console.log(googlemaps);
var popupContainer = document.getElementById("popup-block-container");
var imgtag = document.getElementById("popup-block-img");
var title = document.getElementById("popup-block-title");
var details = document.getElementById("popup-block-details");
popupContainer.style.width = "660px";
popupContainer.style.height = "294px";
imgtag.style.display = "";
details.style.width = "43%";
details.innerHTML = "";
details.innerHTML += "<span class='popup-block-detail-line'><span class='popup-block-detail-title'>Address</span>" + feat.attributes.FULL_ADDRESS + "</span>";
//details.innerHTML += "<span class='popup-block-detail-line'>" + feat.attributes.ADDRESS_FIELD_1 + "</span>";
//details.innerHTML += "<span class='popup-block-detail-line'>" + feat.attributes.ADDRESS_FIELD_2 + "</span>";
//details.innerHTML += "<span class='popup-block-detail-line'>" + feat.attributes.ADDRESS_FIELD_3 + "</span>";
details.innerHTML += "<span class='popup-block-detail-line'><span class='popup-block-detail-title'>Tel.</span>876-" + feat.attributes.Telephone_No_+ "</span>";
details.innerHTML += "<span class='popup-block-detail-line'><span class='popup-block-detail-title'>Opening Hours</span>Mon-Thu. 8:30AM - 4:30PM</br>Fri. 8:30AM - 3:30PM</span></br></br>";
details.innerHTML += "<center><a target='_blank' href=" + googlemaps + "><button id='directionsBtn'>GET DIRECTIONS ❯</button></a></center>";
imgtag.src = "officeimgs/"+feat.attributes.GEO_TAG.trim()+".JPG";
title.innerHTML = feat.attributes.OFFICE_NAME;
title.style.color = "blue";
popupContainer.style.display = "block";
popupContainer.style.top = "-1920px";
popupContainer.style.opacity = "1";
popupContainer.style.zIndex = "16";
popupContainer.style.left = (Math.abs(circleBuffer.x)-300)+"px";
popupContainer.style.top = (Math.abs(circleBuffer.y) + (popupContainer.offsetHeight/2))+"px";
setTimeout(function(){
var rect = offsett(popupContainer);
var rect2 = offsett(view.container);
Propsy.moveWindow("popup-block-container",circleBuffer);
},600);
}
function showConstiDetails(event){
evtX = 0;
evtY = 0;
var query = consti.createQuery();
console.log(event);
if(event.eventId){
console.log("event");
query.geometry = view.toMap(event);
evtX = event.x;
evtY = event.y;
query.outSpatialReference = view.spatialReference;
query.returnGeometry = true;
}else{
console.log("geometry");
let obj_id = event.id.slice(5);
let cons_id = consresults[obj_id].consNum
console.log(cons_id);
query.where = "CONST_NO LIKE '%"+cons_id+"%'";
//query.geometry = event;
evtX = event.geometry.extent.center.x;
evtY = event.geometry.extent.center.y;
query.outSpatialReference = view.spatialReference;
query.returnGeometry = true;
}
consti.queryFeatures(query).then(function(result) {
let results = result.features;
console.log(results);
results.map( function(feat){
var popupContainer = document.getElementById("popup-block-container");
var imgtag = document.getElementById("popup-block-img");
var title = document.getElementById("popup-block-title");
var details = document.getElementById("popup-block-details");
details.style.width = "43%";
details.innerHTML = "";
imgtag.style.display = "";
details.innerHTML += "<span class='popup-block-detail-line'><span class='popup-block-detail-title'>SITTING MP</span>" + feat.attributes.SITTING_MP + "</span></br>";
details.innerHTML += "<span class='popup-block-detail-line'><span class='popup-block-detail-title'>MP AFFILIATION</span>" + feat.attributes.MP_AFFIL+ "</span></br>";
imgtag.src = "candidate_pictures/"+feat.attributes.CONST_NO+"_"+feat.attributes.MP_AFFIL+".jpg";
//imgtag.style.display = "none";
//details.style.width = "120%";
title.innerHTML = feat.attributes.CONST_NAME;
title.style.color = "blue";
//setTimeout(function(){
popupContainer.style.width = "460px";
//popupContainer.style.height = "140px";
popupContainer.style.display = "block";
popupContainer.style.top = "-1920px";
popupContainer.style.opacity = "1";
popupContainer.style.zIndex = "16";
popupContainer.style.left = (Math.abs(evtX)-300)+"px";
popupContainer.style.top = (Math.abs(evtY) + (popupContainer.offsetHeight/2))+"px";
setTimeout(function(){
var rect = offsett(popupContainer);
var rect2 = offsett(view.container);
//if(zoom.scale > 200000){
Propsy.moveWindow("popup-block-container", event);
//}
},600);
});
});
}
function findInBuffer(graphic) {
var query = offices.createQuery();
//query.objectIds = inBuffer;
query.geometry = circleBuffer.extent;
//query.geometry = view.toMap(evt);
query.outSpatialReference = view.spatialReference;
query.returnGeometry = true;
// Use an objectIds selection query (should not need to go to the server)
offices.queryFeatures(query).then(function(result) {
let results = result.features;
//console.log(results);
if(results.length > 1){
graphicsLayer.removeAll();
if(view.scale > 10000){
view.goTo( graphic,{animate: true, duration: 1000, easing: 'ease-out'});
}
}else{
graphicsLayer.removeAll();
results.map( function(feat){
showOfficeDetails(feat);
});
}
});
}
function offsett(el) {
//if(view.scale > 200000){
var rect = el.getBoundingClientRect(),
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
//}
}
// view.on("click", function(evt){
//
//
// if(view.zoom < 12){
// return false;
// }
// console.log(evt);
// if(parseInt(evt.button) === 2){
// //right click
// //loadContextMenu(evt);
// return;
// }
//
// var queryStatesTask = new QueryTask({url: "https://services6.arcgis.com/3R3y1KXaPJ9BFnsU/arcgis/rest/services/ECJWEB_MAP/FeatureServer/4" });
// var query = new Query();
// query.geometry = evt.mapPoint; // mapPoint obtained from view-click event.
// query.distance = 50;
// query.units = "meter";
// query.outFields = ["*"];
// query.returnGeometry = true;
// query.outSpatialReference = view.extent.spatialReference;
// query.spatialRelationship = "intersects"; // All features that intersect 100mi buffer
// queryStatesTask.execute(query).then(function(result){
// graphicsLayer.removeAll();
// var polygonGraphic = new Graphic({
// geometry: result.features[0].geometry,
// symbol: polygonSymbol,
// attributes: result.features[0].attributes,
// visible: true
// });
// graphicsLayer.add(polygonGraphic);
// view.goTo(polygonGraphic, 1500);
// console.log(result.features[0].attributes);
// grabStatistics(result.features[0].attributes.CONST_NAME);
// });
//
// });
//
/**
* PAGE FUNCTIONS
*/
On(document, '#slide-content-close:click', closePanelMeth);
On(document, '#popup-block-img:click', expandImage);
On(document, 'div.search-result:click', selectCurrentResult);
//On(Dom.byId("slide-content-close"), "click", closePanelMeth);
//On(Dom.byId("popup-block-img"), "click", expandImage);
//On(Dom.byId("div.search-result"), "click", selectCurrentResult);
On(Dom.byId("top-band-search"), "keyup", textChecker);
On(Dom.byId("search-top-init"), "click", toggleSearch);
On(Dom.byId("popup-block-close"), "click", closePopupBlock);
On(Dom.byId("top-band-reset-btn"), "click", resetMap);
On(Dom.byId("top-band-search-btn"), "click", textChecker);
On(Dom.byId("close-results"), "click", closeResults);
/**
* METHOD DEFINITIONS
**/
//AFTER VIEW IS LOADED TO DOM SET INITIAL EXTENT
function setExtents(){
var currXMax = view.extent.xmax.toFixed(2);
var currYMax = view.extent.ymax.toFixed(2);
var currXMin = view.extent.xmin.toFixed(2);
var currYMin = view.extent.ymin.toFixed(2);
initialExtent = new Extent();
initialExtent.xmin = currXMin;
initialExtent.ymin = currYMin;
initialExtent.xmax = currXMax;
initialExtent.ymax = currYMax;
initialExtent.spatialReference = 102095;
var ext = new Extent({
xmin: currXMin,
ymin: currYMin,
xmax: currXMax,
ymax: currYMax
});
view.constraints = {
//minScale: 800000, // User cannot zoom out beyond a scale of 1:800,000
rotationEnabled: false, // Disables map rotation
extent: ext.extent//,
//minScale: 0, // User cannot zoom out beyond a scale of 1:500,000
//maxScale: 140000
};
}
function grabStatistics(qry){
var find = new FindTask({ url: "https://services6.arcgis.com/3R3y1KXaPJ9BFnsU/arcgis/rest/services/ECJWEB_MAP/FeatureServer" });
// Set parameters to only query
var params = new FindParameters({
layerIds: [4],
searchFields: ["CONST_NAME"],
searchText: qry
});
find.execute(params)
.when(showResults)
.catch(rejectedPromise);
}
function showResults(response) {
var results = response.results;
var popup = new BoxMaker();
popup.makePopupNode(response.results.length,response.results[0].feature.attributes);
}
function rejectedPromise(){
console.error("Promise didn't resolve: ", err.message);
}
//RESET MAP POSITION
function resetMap(){
Propsy.resetMap(view,clearSearch());
}
//CLEAR SEARCH BOX
function clearSearch(evt){
var searchBar = document.getElementById("top-band-search");
searchBar.value = "";
searchBar.focus();
}
//CLEAR RESULTS PANEL
function clearSearchResults(evt){
document.getElementById("slide-content-results").innerHTML = "";
document.getElementById("slide-content-results-status").innerHTML ="0 result(s) found";
document.getElementById("search-bar").focus();
}
//CLOSE PANEL
function closePanelMeth(evt){
var el = evt.target;
var searchBar = document.getElementById("search-bar");
var searchTools = document.getElementById("search-box-tools");
var searchBarStatus = document.getElementById("search-box-status");
var searchResults = document.getElementById("slide-content-results");
if(DomClass.contains(el.parentNode.parentNode, "show")){
DomClass.replace(el.parentNode.parentNode, "hide", "show");
DomClass.replace(el, "fa-chevron-right", "fa-chevron-left");
DomClass.replace(searchBarStatus, "hide", "show");
DomClass.replace(searchResults, "hide", "show");
DomClass.replace(searchTools, "hide", "show");
setTimeout(function(){DomClass.replace(searchBar, "hide", "show"); el.parentNode.parentNode.setAttribute("isVisible", false); }, 50);
}else{
DomClass.replace(el.parentNode.parentNode, "show", "hide");
DomClass.replace(el, "fa-chevron-left", "fa-chevron-right");
DomClass.replace(el, "show", "hide");
DomClass.replace(searchResults, "show", "hide");
DomClass.replace(searchBarStatus, "show", "hide");
DomClass.replace(searchBar, "show", "hide");
DomClass.replace(searchTools, "show", "hide");
el.parentNode.parentNode.setAttribute("isVisible", true);
searchBar.focus();
}
}
//CHECK FOR INVALID INPUT IN SEARCH BOX
function textChecker(evt){
var inputText = (evt.type === "click")? evt.target.previousElementSibling.previousElementSibling.value.trim() :evt.target.value.trim();
if(evt.keyCode === 13 || evt.buttons === 0 && inputText.length > 1){
//START SEARCHING
searchDataCenter(inputText);
}else if(!inputText.match(/^[a-zA-Z .]+$/) ){
alert("Invalid characters entered");
}
}
//RUN SEARCH QUERY
function searchDataCenter(string){
Propsy.toggleLoadingBar(true);
string = Propsy.fixText(string);
var queryTask = new QueryTask({url: "https://services6.arcgis.com/3R3y1KXaPJ9BFnsU/arcgis/rest/services/ECJWEB_MAP/FeatureServer/8"});//ED
var queryTask2 = new QueryTask({url: "https://services6.arcgis.com/3R3y1KXaPJ9BFnsU/arcgis/rest/services/ECJWEB_MAP/FeatureServer/4"});//CONSTI
var queryTask3 = new QueryTask({url: "https://services6.arcgis.com/3R3y1KXaPJ9BFnsU/arcgis/rest/services/ECJWEB_MAP/FeatureServer/5"});//PARISH
// var queryTask4 = new QueryTask({url: "https://services6.arcgis.com/3R3y1KXaPJ9BFnsU/arcgis/rest/services/ECJWEB_MAP/FeatureServer/3"});//OFFICES
var query = new Query();
query.where = "ED_NAME LIKE '%"+string+"%'";
query.outFields = ["*"];
//query.orderByFields = (searchType == 1)?["PARISH_NAM ASC"] : ["PARISH_NAME ASC"];
query.returnGeometry = true;
query.outSpatialReference = view.extent.spatialReference;
var query2 = new Query();
query2.outFields = ["*"];
query2.where = "CONST_NAME LIKE '%"+string+"%'";
query2.returnGeometry = true;
query2.outSpatialReference = view.extent.spatialReference;
var query3 = new Query();
query3.outFields = ["*"];
query3.where = "PARISH_NAM LIKE '%"+string+"%'";
query3.returnGeometry = true;
query3.outSpatialReference = view.extent.spatialReference;
// var query4 = new consti.createQuery();
// query4.outFields = ["*"];
// query4.where = "OFFICE_NAME LIKE '%"+string+"%'";
// query4.returnGeometry = true;
// query4.outSpatialReference = view.extent.spatialReference;
queryTask.execute(query).then(function(result){
edresults = [];
consresults = [];
parishresults = [];
officeresults = [];
//ADD RESULTS TO CONTAINER
for(var i=0; i < result.features.length; i++){
var item = result.features[i];
edresults[item.attributes.OBJECTID] = {
parish: item.attributes.PARISH_NAM,
regNum: item.attributes.REGION_NO,
consName: item.attributes.CONST_NAME,
consNum: item.attributes.CONST_NO,
ed: item.attributes.ED_NAME,
edNum: item.attributes.ED_NO,
id: "ed_"+item.attributes.OBJECTID
};
geometryArr["ed_"+item.attributes.OBJECTID] = item.geometry;
}
queryTask2.execute(query2).then(function(result){
console.log("result.features");
for(var i=0; i < result.features.length; i++){
var item = result.features[i];
consresults[item.attributes.OBJECTID] = {
parish: item.attributes.PARISH_NAME,
regNum: item.attributes.REGION_NO,
consName: item.attributes.CONST_NAME,
consNum: item.attributes.CONST_NO,
//ed: item.attributes.ED_NAME,
id: "cons_"+item.attributes.OBJECTID
};
geometryArr["cons_"+item.attributes.OBJECTID] = item.geometry;
}
// queryTask4.execute(query4).then(function(result){
// //console.log("result.features");
// for(var i=0; i < result.features.length; i++){
//
// var item = result.features[i];
// officeresults[item.attributes.OBJECTID] = {
// name: item.attributes.OFFICE_NAME,
// parish: item.attributes.PARISH,
// tel: item.attributes.Telephone_No_,
// address: item.attributes.FULL_ADDRESS,
// consNum: item.attributes.CONST_NO,
// geotag: item.attributes.GEO_TAG,
// id: "office_"+item.attributes.OBJECTID
// };
//
// geometryArr["office_"+item.attributes.OBJECTID] = item.geometry;
//
// }
// });
queryTask3.execute(query3).then(function(result){
for(var i=0; i < result.features.length; i++){
var item = result.features[i];
parishresults[item.attributes.OBJECTID] = {
parish: item.attributes.PARISH_NAM,
id: "parish_"+item.attributes.OBJECTID
};
geometryArr["parish_"+item.attributes.OBJECTID] = item.geometry;
}
Propsy.toggleLoadingBar(false);
parseResults(string);
punchQuerySite(string);
});
});
}, function(error){
console.log(error); // Will print error in console if unsupported layers are used
});
}
//SET CLICKED RESULT AS ACTIVE
function selectCurrentResult(evt){
if(evt.which === 3 || evt.which === 2)
return;
var el = document.getElementsByClassName("search-result-active");
if(el[0])
DomClass.remove(el[0], "search-result-active");
if(evt.target.parentNode.classList.contains("search-result-active")){
DomClass.remove(el[0], "search-result-active");
graphicsLayer.removeAll();
}else{
DomClass.add(evt.selectorTarget, "search-result-active");
var id = evt.selectorTarget.getAttribute("id");
graphicsLayer.removeAll();
var tempGrph = new Graphic({
id: id,
geometry: geometryArr[id],
attributes: null,
symbol: polygonSymbol,
popuptemplate:null,
visible: true
});
//highlightSelect = layerView.highlight(geometryArr[id]);
graphicsLayer.add(tempGrph);
zoomToArea(tempGrph);
setTimeout(()=>{graphicsLayer.remove(tempGrph)},2000);
if(id[0] == "c"){
showConstiDetails(tempGrph);
}
console.log(geometryArr[id]);
console.log(evt.selectorTarget);
console.log(tempGrph);
}
}
//GET RANDOM COLOR FOR TITLE BAR OF SEARCH RESULT
function grabColor(){
var col = colorPool[Math.floor(Math.random() * colorPool.length)];
return col;
}
//TOGGLE SEARCH
function toggleSearch(){
Propsy.toggleSearch("top-band-right-content");
}
//FORMAT SEARCH RESULT
function parseResults(needle){
needle = needle.toUpperCase();
var resultCount = 0;
var resultsCounter = document.getElementById("data-search-results-info");
var dataContainer = document.getElementById("data-search-results-list");
var container = document.getElementById("data-search-results-container");
dataContainer.innerHTML = "";
container.style.left = '0px';
dataContainer.innerHTML += "<div class='results-separator'>--Parish--</div>";
parishresults.forEach(function(element){
resultCount+=1;
dataContainer.innerHTML += formatParishResult(element,needle);
});
dataContainer.innerHTML += "<div class='results-separator'>--Constituency--</div>";
consresults.forEach(function(element) {
resultCount+=1;
dataContainer.innerHTML += formatConstituencyResult(element,needle);
});
// dataContainer.innerHTML += "<div class='results-separator'>--Electoral Division--</div>";
// edresults.forEach(function(element) {
// resultCount+=1;
// dataContainer.innerHTML += formatEDResult(element, needle);
//
// });
if(resultCount === 0){
dataContainer.innerHTML = "<div class='center-text'>No results found :(</div>";
resultsCounter.innerHTML = "0 results found";
}else{
resultsCounter.innerHTML = "Found "+resultCount +" results matching <br>\"<b>" + needle+"</b>\"";
}
}
//FORMAT PARISH RESULTS
function formatParishResult(item,needle){
var re = new RegExp(needle, "g");
var itemNode = "<div class='search-result' id='"+item.id+"'>"+
"<div class='search-result-indicator'></div>"+
"<div class='search-result-title'><i class='fa fa-search' aria-hidden='true'></i> "+item.parish+"</div>"+
"</div>";
return itemNode.replace(re, "<span class='highlight-letters'>"+needle+"</span>");
}
//FORMAT CONSTITUENCY RESULTS
function formatConstituencyResult(item, needle){
var re = new RegExp(needle, "g");
//onclick='selectCurrentResult()'
var itemNode = "<div class='search-result' id='"+item.id+"'>"
+ "<div class='search-result-indicator'></div>"
+"<div class='search-result-title'><i class='fa fa-search' aria-hidden='true'></i> "+item.parish+"</div>"
+ "<div class='search-result-body'>"
+ item.consName
+ "</div>"
+ "</div>";
return itemNode.replace(re, "<span class='highlight-letters'>"+needle+"</span>");
}
//DISPLAY ED LAYERS FROM LIST
function formatEDResult(item, needle){
var re = new RegExp(needle, "g");
var itemNode = "<div class='search-result' id='"+item.id+"'>"
+ "<div class='search-result-indicator'></div>"
+"<div class='search-result-title'><i class='fa fa-search' aria-hidden='true'></i> "+item.parish+"</div>"
+ "<div class='search-result-body'>"
+ item.consName + "<br>"
+ "ED Name: " + item.ed + "<br>"
+ "ED#: " + item.edNum
+ "</div>"
+ "</div>";
return itemNode.replace(re, "<span class='highlight-letters'>"+needle+"</span>");
}
//CLOSE RESULTS PANEL
function closeResults(e){
e.target.parentElement.style.left = "-330px";
clearSearch();
resetMap();
}
//ZOOM IN TO TARGET AREA
function zoomToArea(grph){
view.goTo( grph,{animate: true, duration: 1500, easing: 'ease-out'});
}
//CHECK IF VIEW IS ANIMATING
function checkAnimating(){
// Get the new extent of the view only when view is stationary.
if (view.extent) {
var currXMax = view.extent.xmax.toFixed(2);
var currYMax = view.extent.ymax.toFixed(2);
var currXMin = view.extent.xmin.toFixed(2);
var currYMin = view.extent.ymin.toFixed(2);
var padding = 100000;
if((initialExtent.xmin-padding) > currXMin || initialExtent.ymin > currYMin || initialExtent.xmax + padding < currXMax || initialExtent.ymax < currYMax){
//Propsy.resetMap(view);
}
}
if(view.center){
if(initialExtent === null){
initialExtent = view.extent;
return;
}
//MOVE POPUP WINDOW IN ACCORDANCE WITH MAPVIEW
if(circleBuffer){
Propsy.moveWindow("popup-block-container", circleBuffer);
}
}
if(view.scale){
Propsy.updateScale("map-position",view.scale);
}
// if(view.scale){
// if(view.scale < 140000){
// view.scale = 144448;
// var popupContainer = document.getElementById("popup-block-container");
// var imgtag = document.getElementById("popup-block-img");
// var title = document.getElementById("popup-block-title");
// var details = document.getElementById("popup-block-details");
//
// details.innerHTML = "";
//
// details.innerHTML += "<span class='popup-block-detail-title'>For information not displayed, please feel free to contact the Electoral Office of Jamaica - GIS Department.</span></br>";
// details.innerHTML += "<span class='popup-block-detail-line'><span class='popup-block-detail-title'>Address</span>";
// details.innerHTML += "<span class='popup-block-detail-line'> 43 Duke Street, Kingston, Jamaica </span></br/>";
// details.innerHTML += "<span class='popup-block-detail-line'><span class='popup-block-detail-title'>Contact</span>";
// details.innerHTML += "<span class='popup-block-detail-line'> Tel: (876)-922-0425-9 </span>";
// details.innerHTML += "<span class='popup-block-detail-line'> Toll-Free: 1-888-991-VOTE (8683) </span>";
// details.innerHTML += "<span class='popup-block-detail-line'> Fax: (876) 922-4058 </span></br>";
// details.innerHTML += "<span class='popup-block-detail-line'><span class='popup-block-detail-title'>Opening Hours</span>Mon-Thu. 8:30AM - 5:00PM</span>";
// details.innerHTML += "</span>Fri. 8:30AM - 4:00PM</span>";
// //imgtag.src = "officeimgs/8 HEAD OFFICE DUKE STREET 2.JPG";
// imgtag.style.display = "none";
// details.style.width = "120%";
// title.innerHTML = "NOTICE";
// title.style.color = "red";
// //setTimeout(function(){
// popupContainer.style.width = "850px";
// popupContainer.style.height = "294px";
// popupContainer.style.display = "block";
// popupContainer.style.top = "236px";
// popupContainer.style.opacity = "1";
// popupContainer.style.zIndex = "16";
//
//
//
// return;
// }
//
// $('#bottom-band-scale').text("Scale 1 : "+addCommas(view.scale.toFixed(0)));
// if(view.scale.toFixed(0) < 576000){
// $('#results-summary-container').fadeOut('medium');
// }else{
// $('#results-summary-container').fadeIn('medium');
// }
//}
}
//EXPAND POPUP IMAGE
function expandImage(target){
Propsy.expandImage(target);
}
var screenClick;
//PARSE MULTI OFFICE POINTS
function parseMultipleOffices(pointsArr){
// console.log(pointsArr);
// pointsArr.map( function(feat){
// console.log(feat[0]);
// });
graphicsLayer.removeAll();
let origin = circleBuffer.center;
let offsetX = 0;
let offsetY = 4000;
let pLine = new Polyline({spatialReference: view.spatialReference});
let grphArr = [], knobs = [];
var textSymbol = {
type: "text", // autocasts as new TextSymbol()
color: "red",
haloColor: "black",
haloSize: "2",
text: "You are here",
xoffset: 30,
yoffset: 10,
angle: -25,
spatialReference: view.spatialReference,
font: { // autocast as new Font()
size: 13,
family: "sans-serif",
weight: "bold"
}
};
for(var i=0; i < pointsArr.length; i++){
//pointsArr.map( function(feat){
console.log(pointsArr[i].attributes);
//console.log(pointsArr[i].attributes.OFFICE_NAME);
//for(var i=0; i < pointsArr.length; i++){
let pointX = (i===0)? origin.x : origin.x + (offsetX+= 800);
let pointY = origin.y + offsetY;
pLine.addPath([
new Point(pointX, pointY),
origin
]);
grphArr.push(new Graphic({
geometry: pLine,
symbol: polylineSymbol,
attributes: {type: 'line'}
}));
knobs.push(new Graphic({
geometry: new Point({x:pointX, y:pointY, spatialReference: view.spatialReference}),
symbol: pointKnob//,
//attributes: {type:"knob"},
//popupTemplate: {"title":pointsArr[i].attributes.OFFICE_NAME},
//defaultPopupTemplateEnabled: true
}));
textSymbol.text = pointsArr[i].attributes.OFFICE_NAME;
graphicsLayer.add(new Graphic({
symbol: textSymbol,
geometry: new Point({x:pointX+150, y:pointY+280, spatialReference: view.spatialReference})
}));
//showOfficeDetails(feat);
//}
//});
}
graphicsLayer.addMany(grphArr);
graphicsLayer.addMany(knobs);
}
//CALLBACK FOR GRAPHICS HOVER
function getGraphics(response) {
//loop through all the layers.graphics and remove any with the highfillsymbol
var gra = response.results[0].graphic;
if(gra.attributes.type === "point"){
graphicsLayer.remove(gra);
console.log(typeof(gra));
}else{
return;
}
}
//LOAD CONTEXT MENU
function loadContextMenu(evt){
}
//CLOSE POPUP BLOCK
function closePopupBlock(evt){
// var imgtag = document.getElementById("popup-block-img");
//var details_tag = document.getElementById("popup-block-details");
//imgtag.style.display = "block";
//details_tag.style.width = "43%";
evt.target.parentNode.parentNode.parentNode.parentNode.style.opacity = "0";
evt.target.parentNode.parentNode.parentNode.parentNode.style.top = "-1920px";
//evt.target.parentNode.parentNode.parentNode.parentNode.style.width = "660px";
setTimeout(function(){
evt.target.parentNode.parentNode.parentNode.parentNode.style.display = "none";
}, 500);
//evt.target.parentNode.parentNode.parentNode.remove();
view.graphics.removeAll();
}
//PUNCH WEBSITE
function punchSite(){
if(detectIE() !== -1){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
if(JSON.stringify(this.responseText).res){
storeSetItem("visited-ecj","true");
}
}
};
xhttp.open("POST", "http://webgisrv:5400/sitehits/hitwebsite", true);
xhttp.setRequestHeader("Content-type", "application/json");
xhttp.send(JSON.stringify({siteType: "ecj"}));
return;
}
if(window.localStorage.getItem("visited-ecj") !== null || window.localStorage.getItem("visited-ecj") !== "undefined" ){
return;
}
fetch('http://webgisrv:5400/sitehits/hitwebsite', {
method: 'POST',
body: JSON.stringify({siteType: "ecj"}),
headers: {
"Content-type": "application/json"
}
}).then(function(){
return response.json();
}).then(function (data){
if(JSON.stringify(this.responseText).res){
storeSsetItem("visited-ecj","true");
}
}).catch(function(error){
console.log(error);
});
}
//PUNCH QUERY
function punchQuerySite(term){
if(detectIE() !== -1){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
console.log(this.responseText);
}
};
xhttp.open("POST", 'http://webgisrv:5400/sitehits/hitquery', true);
xhttp.setRequestHeader("Content-type", "application/json");
xhttp.send(JSON.stringify({siteType: "ecj", searchTerm: term, toke: generateToke()}));
return;
}
fetch('http://webgisrv:5400/sitehits/hitquery', {
method: 'POST',
body: JSON.stringify({siteType: "ecj", searchTerm: term, toke: generateToke()}),
headers: {
"Content-type": "application/json"
}
}).then(function(response){
return response.json();
}).then(function (data){
if(data.res){
console.log(data.msg);
}
}).catch(function(error){
console.log(error);
});
}
});
!
