var CountTypesList = [];
var CountTypeColors = [];
require([
"esri/layers/MapImageLayer",
"dojo/parser",
"dojo/ready",
"dojo/_base/array",
"esri/Color",
"dojo/dom-style",
"dojo/query",
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!",
"dijit/form/Button"
], function(MapImageLayer, parser, ready, arrayUtils, Color, domStyle, query,
Map, MapView, Graphic, GraphicsLayer, Button
) {
ready(function() {
var self = this;
var NonSystemFiles = ["Traffic Safety Data Collection Division 01", "Traffic Safety Data Collection Division 02",
"Traffic Safety Data Collection Division 03","Traffic Safety Data Collection Division 04",
"Traffic Safety Data Collection Division 05","Traffic Safety Data Collection Division 06",
"Traffic Safety Data Collection Division 07", "Traffic Safety Data Collection Division 08",
"Traffic Safety Data Collection Division 09", "Traffic Safety Data Collection Division 10",
"Traffic Safety Data Collection Division 11", "Traffic Safety Data Collection Division 12",
"Traffic Safety Data Collection Division 13", "Traffic Safety Data Collection Division 14"];
//var NonSystemFiles = ["Traffic Safety Data Collection Division 01"];
parser.parse();
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [ -78.968248, 35.8424 ],
zoom: 7
});
var graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
/*LAYER DIVISIONS*/
var layer = new MapImageLayer({
url: "https://gis11.services.ncdot.gov/arcgis/rest/services/NCDOT_DivisionBdy_Poly/MapServer"
});
map.add(layer); // adds the layer to the map
var urlCountType = getUrlVars()["countType"];
var urlCounty = getUrlVars()["county"];
var urlLat = getUrlVars()["latitude"];
var urlLong = getUrlVars()["longitude"];
if(urlCountType != "")
var urlCountType2 = decodeURIComponent((urlCountType + '').replace(/\+/g, '%20'));
/*
Left Panel Init
*/
$SP().list("Count Type").get({
fields:"Title,Color"
}).then(function(data) {
var ChkCountType = "
Count Type:
";
$('#CountType').html(ChkCountType);
$('#selectCountType').multiselect();
});
// with some fields and an orderby command
$SP().list("County List").get({
fields:"Title"
}).then(function(data) {
var ChkCountyList = "
County:
";
$('#County').html(ChkCountyList);
$('#selectCounty').multiselect({
columns: 3,
placeholder: 'Select Counties',
search: true,
selectAll: true
});
});
var myButton = new Button({
onClick: function(){
search();
}
}, "GetLocations").startup();
setTimeout(function() {
if(urlCounty != undefined && urlCountType2 != undefined ){
search();
if(urlLat && urlLong){
view.center = [ urlLong, urlLat ];
view.zoom = 17;
console.log("TESTING")
}
}
}, 3000);
function search(){
graphicsLayer.removeAll();
CountTypeColors = [];
var strNonSysWhere = "(";
var strWhere = "(";
if($('#selectCountType').val()){
$('#selectCountType').val().forEach(element => {
if(strWhere != "("){
strWhere += " OR "
strNonSysWhere += " OR "
}
strWhere += "Loc_x0020_Count_x0020_Type = '" + element + "'";
strNonSysWhere += "DataType = '" + element + "'";
});
}
if($('#selectCountType').val() && $('#selectCounty').val()){
strWhere += ") AND (";
strNonSysWhere += ") AND (";
}
if($('#selectCounty').val()){
$('#selectCounty').val().forEach(element => {
if(!strWhere.endsWith(") AND (") && strWhere != "("){
strWhere += " OR "
strNonSysWhere += " OR "
}
strWhere += "Loc_x0020_County = '" + element + "'";
strNonSysWhere += "County = '" + element + "'";
});
}
strWhere += ")"
strNonSysWhere += ")"
GetLocationsData(strWhere);
GetNonSystemFiles(strNonSysWhere);
}
function GetLocationsData(strWhere){
// Enable clustering on the layer and add it to the map
$SP().list('Traffic Count Locations').get({
fields:"Name,Latitude,Longitude,ID,Loc_x0020_Description,Loc_x0020_County,Request_x0020_ID,Loc_x0020_Count_x0020_Type,Location_x0020_ID,Location_x0020_Division,Approval_x0020_Date",
where: strWhere
}).then(function(data) {
for (var i=0; i x.Title === data[i].getAttribute("Loc_x0020_Count_x0020_Type"))
if(!CountTypeColors.find(x => x.Title === data[i].getAttribute("Loc_x0020_Count_x0020_Type"))){
CountTypeColors.push({'Title':data[i].getAttribute("Loc_x0020_Count_x0020_Type"), 'Color':Count.Color})
}
var simpleMarkerSymbol = {
type: "simple-marker",
color: Count.Color, // orange
outline: {
color: [255, 255, 255], // white
width: 1
}
};
var nameString = data[i].getAttribute("FileRef");
var filename = nameString.split("/").pop();
// Create attributes
var attributes = {
Name: data[i].getAttribute("Loc_x0020_Count_x0020_Type"), // The name of the
Location: "
"
};
//Create popup template
var popupTemplate = {
title: "{Name}",
content: "{Location}"
};
var pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol,
attributes: attributes
});
graphicsLayer.add(pointGraphic);
});
view.on("pointer-move", eventHandler);
PopulateColorCodes(CountTypeColors);
});
});
}
function eventHandler(args) {
// the hitTest() checks to see if any graphics in the view
// intersect the x, y coordinates of the pointer
//view.hitTest(event).then(getGraphics);
view.hitTest(args).then(function(evt){
if(evt.results[0].graphic.attributes.Name){
view.popup.dockOptions = {
// Disable the dock button so users cannot undock the popup
buttonEnabled: false,
// Dock the popup when the size of the view is less than or equal to 600x1000 pixels
breakpoint: false,
position: "top-right"
};
var content = evt.results[0].graphic.attributes.Location; // You can use esriLang.substitute() to substitute the actual values
var title = evt.results[0].graphic.attributes.Name; // You can use esriLang.substitute() to substitute the actual values
view.popup.open({
location: evt.results[0].mapPoint, // location of the click on the view
title: title, // title displayed in the popup
content: content, // content displayed in the popup
});
}
else{
//view.popup.close();
}
})
}
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
function PopulateColorCodes(ColorList){
var htmlColors = document.getElementById('CountTypeColors');
htmlColors.innerHTML = "";
var htmlTemp = "";
for (var i=0; i < ColorList.length; i++){
htmlTemp += "" + ColorList[i].Title + ":"+
" ";
}
htmlColors.innerHTML = htmlTemp;
}
});
});