Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- About TateM
TateM
New Contributor III
since
07-04-2014
11-11-2020
46
Posts created
3
Kudos given
1
Solutions
3
Kudos received
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
My Ideas
(0 Idea Submissions)Latest Contributions by TateM
|
POST
|
Lars, I think your tsconfig.json is fine. But I believe you also have to include a "types": ["arcgis-js-api"] in your tsconfig.app.json and tsconfig.spec.json Also try to: import {loadModules} from 'esri-loader'; if you have installed the esri-loader. And also : import esri = __esri . Then in your class you can have the property for the MapView, something like: mapView: esri.MapView; See Esri's github on Angular: GitHub - Esri/angular-cli-esri-map: Example Angular component for building mapping applications with the ArcGIS API for … Hope this help.
... View more
02-01-2020
10:50 PM
|
0
|
0
|
4567
|
|
POST
|
Alif, I'm not 100 percent certain if you can add Google Maps as the basemap with ArcGIS JS API. But I could be wrong, as it seems ArcGIS JS API have the esri/layers/WMSLayer and esri/layers/WMTSLayer classes that you could use to add Google Maps. I think Google Maps is either a WMS or a WMTS, so it could be possible. On the other hand, I believe its possible if you go the other way around, using Google Maps API first and add ArcGIS Server map services on top of it. At least according to this article from the link: https://octo.dc.gov/page/add-arcgis-server-dynamic-map-service-google-maps Hope this helps, would love to see it if you can make it work.
... View more
11-15-2019
04:42 PM
|
0
|
0
|
539
|
|
POST
|
Vic, See the following links: Esri JavaScript 4x GraphicsLayer on click event Access features with pointer events | ArcGIS API for JavaScript 4.12 I think those links will help you with what you need, hovering over the features and querying out the data.
... View more
08-18-2019
07:29 PM
|
0
|
1
|
518
|
|
POST
|
I was wondering about the same thing of using both versions in the same application/map view. In 4.x there is a view.on("drag", function(event) { // prevents panning with the mouse drag event event.stopPropagation(); }); That is useful when it comes to Mobile and touchscreen devices, preventing users to slipping when scrolling up or down the page to different sections. I don't see that in 3.x API
... View more
06-07-2019
07:14 AM
|
0
|
0
|
533
|
|
POST
|
Thanks Andy, Thats what I was afraid of, nothing in 3.x but something in 4.x. Now I'm starting to wonder if I can mix match(using both) API versions in my application, especially that drag feature in 4.x.
... View more
06-07-2019
07:11 AM
|
0
|
2
|
546
|
|
POST
|
Shankar, I'm not sure this is possible, I could be wrong though. I think you should call Esri Technical support, if you haven't already.
... View more
06-03-2019
06:40 AM
|
0
|
0
|
277
|
|
POST
|
Hello All, Is there a equivalent of map.disableScrollWheel() when it comes to touchscreen devices, i.e. smartphones? When it comes to a web page with lots of scrolling down and up, and if the map div is in the middle of the page. Users might place their fingers on the map, drag it to try to go up or down the page but it will just pan the map instead of actually going up or down the page to other sections I'm looking at JS API 3.xx and don't see anything that could prevent that. Maybe in JS API 4.xx? Thanks,
... View more
06-02-2019
07:19 PM
|
0
|
4
|
669
|
|
POST
|
Hello Robert, Thanks for the help, and it works fine. But I'm also looking at implementing a click event on the active layer to pull the attribute (i.e. state name or county name) and pass that out to a global variable. So then I can use that global variable in other application. I tried to do something like this in the code below and still not getting the expected result. function executeClickQuery(evt) {
var stateLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3", {
outFields:["*"]
});
var countyLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2", {
outFields:["*"]
});
var query = new Query();
query.returnGeometry = true;
query.geometry = evt.mapPoint;
var queryTask;
if(layer0CheckBox.checked)
{
queryTask = new Qt("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3");
map.graphics.clear();
map.removeLayer(countyLayer);
map.addLayer(stateLayer);
on(stateLayer, 'click', function(e){
document.getElementById("infoName").innerHTML = "Name: "+ e.graphic.attributes.STATE_NAME;
})
}else
{
queryTask = new Qt("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2");
map.graphics.clear();
map.removeLayer(stateLayer);
map.addLayer(countyLayer);
on(countyLayer, 'click', function(e){
document.getElementById("infoName").innerHTML = "Name: "+ e.graphic.attributes.NAME;
})
}
queryTask.execute(query, function(featureSet){
map.graphics.clear();
array.map(featureSet.features, function(feature){
var graphic = feature;
graphic.setSymbol(mySymbol);
map.graphics.add(graphic);
});
});
}
... View more
05-08-2019
09:42 PM
|
0
|
2
|
488
|
|
POST
|
Hello everyone, I seems to be running into some bugs, that I cannot seems to get it resolved. Whenever I switch over to a new layer using the radio button. Then click on the feature of that layer, I expect it to only show the graphic of the new feature that was just switched over. But the feature from the old layer still persist/show, seems like it is not clearing out properly. i.e. from county feature layer to state feature layer, expect the result to show only state graphic when clicked but instead county layer feature is showing, and vice versa with state to county. Any help or suggestion would be appreciated on the below code. TIA! <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Toggle Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.28/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css">
<script src="https://js.arcgis.com/3.28/"></script>
<script>
var map, layer;
require([
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ImageParameters",
"esri/layers/FeatureLayer",
"esri/tasks/QueryTask",
"esri/tasks/query",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"dojo/dom",
"dojo/on",
"dojo/query",
"dojo/domReady!"
],
function (Map, ArcGISDynamicMapServiceLayer, ImageParameters,FeatureLayer, Qt, Query, SimpleFillSymbol, SimpleLineSymbol, dom, on, query)
{
layer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer",{
});
map = new Map("mapDiv", {
basemap: "topo",
center: [-86.718, 36.545],
zoom: 6
});
layer.setVisibleLayers([]);
map.addLayer(layer);
var stateLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3", {
outFields:["*"]
});
var countyLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2", {
outFields:["*"]
});
on(dom.byId("layer0CheckBox"), "change", layer1);
on(dom.byId("layer1CheckBox"), "change", layer2);
//state
function layer1()
{
layer.setVisibleLayers([3]);
map.graphics.clear();
map.removeLayer(countyLayer);
map.addLayer(stateLayer);
on(stateLayer, 'click', function(e)
{
document.getElementById("infoName").innerHTML = "Name: "+ e.graphic.attributes.STATE_NAME;
map.on('click',executeClickQuery);
var queryTask1 = new Qt("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3");
var mySymbol = new SimpleFillSymbol("none",
new SimpleLineSymbol("solid", new dojo.Color([255,0,0]), 2), new dojo.Color([0,0,0,0.25])
);
var query = new Query();
query.returnGeometry = true;
function executeClickQuery(evt)
{
query.geometry = evt.mapPoint;
queryTask1.execute(query, showResults);
}
function showResults(featureSet)
{
map.graphics.clear();
dojo.forEach(featureSet.features, function(feature){
var graphic = feature;
graphic.setSymbol(mySymbol);
map.graphics.add(graphic);
});
}
});
}
//County
function layer2()
{
layer.setVisibleLayers([2]);
map.removeLayer(stateLayer);
map.graphics.clear();
map.addLayer(countyLayer);
on(countyLayer, 'click', function(e)
{
document.getElementById("infoName").innerHTML = "Name: "+ e.graphic.attributes.NAME;
map.on('click',executeClickQuery);
var queryTask1 = new Qt("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2");
var mySymbol = new SimpleFillSymbol("none",
new SimpleLineSymbol("solid", new dojo.Color([255,0,0]), 2), new dojo.Color([0,0,0,0.25])
);
var query = new Query();
query.returnGeometry = true;
function executeClickQuery(evt)
{
query.geometry = evt.mapPoint;
queryTask1.execute(query, showResults);
}
function showResults(featureSet)
{
map.graphics.clear();
dojo.forEach(featureSet.features, function(feature){
var graphic = feature;
graphic.setSymbol(mySymbol);
map.graphics.add(graphic);
});
}
});
}
});
</script>
</head>
<body>
<span id="layer_list">
<input type='radio' class='list_item' id='layer0CheckBox' value=0 name = "option1" />State
<input type='radio' class='list_item' id='layer1CheckBox' value=1 name = "option1" />County
</span>
<br/>
<br />
<div id="mapDiv" class="claro" style="width:1000px; height:600px; border:1px solid #000;"></div>
<span id="infoName" style ="font-weight: bold">Name: </span>
</body>
</html>
... View more
05-06-2019
10:10 PM
|
0
|
4
|
643
|
|
POST
|
Well that does it! Very simple, can't believe I missed it. Thanks alot Ken. By the way how are you able to get the code to format nicely with the line number and all?
... View more
04-16-2019
01:54 PM
|
0
|
1
|
367
|
|
POST
|
Hello everyone, I am having some trouble overriding the old pie chart data with new one. Any help or pointers would be greatly appreciated. So currently everything is working fine. But when I click on a feature to get the new attributes and use that attributes to input into the existing pie chart. I expect and wanted to make the old pie chart graphic disappear and the new one appear in its place with the new attributes/values reflect. But instead of that, I got another pie chart added on right underneath the old one. See the attached code, any idea on how to resolve this? Thanks in advance. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="X-UA-Compatitble" content="IE=Edge" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>TEST STATISTICse</title> <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.28/dijit/themes/claro/claro.css"> <style> html, body, #mapDiv{border:0; margin:0; padding:0; height:80%; width:100%;} </style> <script type="text/javascript" src="https://js.arcgis.com/3.28/"></script> <script type="text/javascript"> var usFemalesNum, usMalesNum, usHomeOwnersNum, usRentersNum; require ( [ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/FeatureLayer", "esri/tasks/query", "esri/tasks/QueryTask", "esri/tasks/StatisticDefinition", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/dom", "dojo/on", "dojo/Deferred", "dojo/promise/all", "dojox/charting/Chart", "dojox/charting/plot2d/Pie", "dojox/charting/action2d/Highlight", "dojox/charting/action2d/Tooltip", "dojox/charting/SimpleTheme", "dojo/domReady!" ], function(Map, ArcGISDynamicMapServiceLayer, FeatureLayer, Query, Qt, statD, SimpleFillSymbol, SimpleLineSymbol, dom, on, Deferred, all, Chart, Pie, Highlight, Tooltip, SimpleTheme) { //var censusLayers = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3"); var fLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3", { outFields:["*"] }); var map = new Map("mapDiv", { basemap: "topo", center: [-94.84, 39.69], zoom: 5 }); //censusLayers.setVisibleLayers([3]); //US Females number function totalFemales() { var retDef = new Deferred(); var queryTask = new Qt("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3"); var query = new Query(); query.returnGeometry = false; query.outFields = ["FEMALES"]; var stats = new statD(); stats.statisticType = "sum"; stats.onStatisticField = "FEMALES"; stats.outStatisticFieldName = "sum_female_pop"; query.where = "1=1"; query.outStatistics = [stats]; //queryTask.execute(query, showFemalesSum, showFail); queryTask.execute(query, function(result) { showFemalesSum(result).then(function(value) { retDef.resolve(value); }); }, showFail); return retDef; } function showFail(error) { console.error(error); } function showFemalesSum(results) { var retDef = new Deferred(); if (!results.hasOwnProperty("features") || results.features.length === 0) { return; } var totalSum = results.features[0].attributes.sum_female_pop; //console.log("testing", totalSum, results.features); document.getElementById('totalFemales').innerHTML = "Total Females: " + totalSum.toLocaleString(); retDef.resolve(totalSum); return retDef; } //US Males number function totalMales() { var retDef = new Deferred(); var queryTask = new Qt("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3"); var query = new Query(); query.returnGeometry = false; query.outFields = ["MALES"]; var stats = new statD(); stats.statisticType = "sum"; stats.onStatisticField = "MALES"; stats.outStatisticFieldName = "sum_male_pop"; query.where = "1=1"; query.outStatistics = [stats]; //queryTask.execute(query, showMalesSum, showFail); queryTask.execute(query, function(result) { showMalesSum(result).then(function(value) { retDef.resolve(value); }); }, showFail); return retDef; } function showMalesSum(results) { var retDef = new Deferred(); if (!results.hasOwnProperty("features") || results.features.length === 0) { return; } var totalSum = results.features[0].attributes.sum_male_pop; //console.log("testing", totalSum, results.features); document.getElementById('totalMales').innerHTML = "Total Males: " + totalSum.toLocaleString(); retDef.resolve(totalSum); return retDef; } //Owner Number function totalOwners() { var retDef = new Deferred(); var queryTask = new Qt("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3"); var query = new Query(); query.returnGeometry = false; query.outFields = ["OWNER_OCC"]; var stats = new statD(); stats.statisticType = "sum"; stats.onStatisticField = "OWNER_OCC"; stats.outStatisticFieldName = "sum_owner"; query.where = "1=1"; query.outStatistics = [stats]; //queryTask.execute(query, showOwnerSum, showFail); queryTask.execute(query, function(result) { showOwnerSum(result).then(function(value) { retDef.resolve(value); }); }, showFail); return retDef; }; function showOwnerSum(results) { var retDef = new Deferred(); if (!results.hasOwnProperty("features") || results.features.length === 0) { return; } var totalSum = results.features[0].attributes.sum_owner; //console.log("testing", totalSum, results.features); document.getElementById('totalOwners').innerHTML = "Total Homeowners: " + totalSum.toLocaleString(); retDef.resolve(totalSum); return retDef; } //Renter Number function totalRenters() { var retDef = new Deferred(); var queryTask = new Qt("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3"); var query = new Query(); query.returnGeometry = false; query.outFields = ["RENTER_OCC"]; var stats = new statD(); stats.statisticType = "sum"; stats.onStatisticField = "RENTER_OCC"; stats.outStatisticFieldName = "sum_renter"; query.where = "1=1"; query.outStatistics = [stats]; //queryTask.execute(query, showRenterSum, showFail); queryTask.execute(query, function(result) { showRenterSum(result).then(function(value) { retDef.resolve(value); }); }, showFail); return retDef; } function showRenterSum(results) { var retDef = new Deferred(); if (!results.hasOwnProperty("features") || results.features.length === 0) { return; } var totalSum = results.features[0].attributes.sum_renter; document.getElementById('totalRenter').innerHTML = "Total Renters: " + totalSum.toLocaleString(); retDef.resolve(totalSum); return retDef; } map.addLayer(fLayer); map.on("load", function() { all([totalFemales(), totalMales(), totalOwners(),totalRenters()]).then(function(results) { usFemalesNum = results[0]; usMalesNum = results[1]; usHomeOwnersNum = results[2]; usRentersNum = results[3]; //console.info(usFemalesNum, usMalesNum, usHomeOwnersNum, usRentersNum); var num = usMalesNum; var num2 = usFemalesNum; var num3 = usHomeOwnersNum; var num4 = usRentersNum; //var ratio = Math.floor((num / num2) * 100); var sum = num + num2; var sum2 = num3 + num4; document.getElementById("totalPop").innerHTML = "Total Population: " + sum.toLocaleString(); document.getElementById("totalOccupancy").innerHTML = "Total Occupancy: " + sum2.toLocaleString(); ///////////////////Get data to put in Pie chart function. function genderDataArray() { var femalesNum = results[0]; var malesNum = results[1]; return [femalesNum,malesNum]; } var genderDataResult = genderDataArray(); ///////////////////////////////////Start of trying to Display Pie Chart from the results. ///////////////////////// function formatAttributesForGraph(attributes, fieldLabels) { var data = [], field; for(field in fieldLabels) { data.push({ tooltip:fieldLabels[field], y: +attributes[field] //+ is to convert a value into a number, equivalent to parseInt() }); } return data; } function genderData(attributes) { var fieldLabels = { "MALES": "Males", "FEMALES": "Females" } return this.formatAttributesForGraph(attributes, fieldLabels); } var genderTheme = new SimpleTheme({ colors: ["#8888ff", "#ff8888"] }) genderChart = new Chart("genderGraph"); //add in a customize theme genderChart.setTheme(genderTheme).addPlot("default",{ type: Pie, font: "normal normal 8pt Tahoma", fontColor: "black", radius: 60 //radius of 60 pixels }).addSeries("Series A", genderDataResult); var amin_aa = new Tooltip(genderChart,"default"); var anim_bb = new Highlight(genderChart, "default"); genderChart.render(); }); map.disableScrollWheel(); map.disablePan(); map.disableDoubleClickZoom(); }); on(fLayer, 'click', function(e) { //node.value = e.graphic.attributes.FEMALES; var stateFnum, stateMnum, stateOwnerNum, stateRenterNum; document.getElementById("popUSA").innerHTML = "Total Gender Population "+ e.graphic.attributes.STATE_NAME; document.getElementById("occupancyUSA").innerHTML = "Owner Versus Renter "+ e.graphic.attributes.STATE_NAME; document.getElementById("totalFemales").innerHTML = "Total Females: "+ e.graphic.attributes.FEMALES.toLocaleString(); document.getElementById("totalMales").innerHTML = "Total Males: " + e.graphic.attributes.MALES.toLocaleString(); document.getElementById("totalOwners").innerHTML = "Total Homeowners: " + e.graphic.attributes.OWNER_OCC.toLocaleString(); document.getElementById("totalRenter").innerHTML = "Total Renters: " + e.graphic.attributes.RENTER_OCC.toLocaleString(); stateFnum = e.graphic.attributes.FEMALES; stateMnum = e.graphic.attributes.MALES; stateOwnerNum = e.graphic.attributes.OWNER_OCC; stateRenterNum = e.graphic.attributes.RENTER_OCC; document.getElementById("totalPop").innerHTML = "Total Population: " + (stateFnum + stateMnum).toLocaleString(); document.getElementById("totalOccupancy").innerHTML = "Total Occupancy: " + (stateOwnerNum + stateRenterNum).toLocaleString();; map.on('click',executeClickQuery); var queryTask5 = new Qt("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3"); var mySymbol = new SimpleFillSymbol("none", new SimpleLineSymbol("solid", new dojo.Color([0,255,255]), 3.2), new dojo.Color([255,255,0,0.25])); var query = new Query(); query.returnGeometry = true; function executeClickQuery(evt) { query.geometry = evt.mapPoint; queryTask5.execute(query, showResults); } function showResults(featureSet) { map.graphics.clear(); dojo.forEach(featureSet.features, function(feature){ var graphic = feature; graphic.setSymbol(mySymbol); map.graphics.add(graphic); }); } //console.log("No " + stateFnum + " " + stateMnum); var genderTheme = new SimpleTheme({ colors: ["#8888ff", "#ff8888"] }) genderChart = new Chart("genderGraph"); //add in a customize theme genderChart.setTheme(genderTheme).addPlot("default",{ type: Pie, font: "normal normal 8pt Tahoma", fontColor: "black", radius: 60 //radius of 60 pixels }).addSeries("Series A", [stateFnum,stateMnum]); var amin_aa = new Tooltip(genderChart,"default"); var anim_bb = new Highlight(genderChart, "default"); genderChart.render(); }); } ); </script> </head> <body> <div id="mapDiv"></div> </br> <span id="popUSA" style ="font-weight: bold">Total Gender Population USA</span> <div id="totalFemales" style="font-weight: normal; padding:3px"> Total Females: </div> <div id="totalMales" style="font-weight: normal; padding:3px"> Total Males: </div> <div id="totalPop" style="font-weight: normal; padding:3px"> Total Population: </div> <div id="genderGraph" style="font-weight: normal; padding:0px; position: absolute; left: 350px; top: 470px;width: 130px; height: 130px"> <!--Gender Pie Chart:--> </div> </br> </br> <span id="occupancyUSA" style ="font-weight: bold">Owner Versus Renter USA</span> <div id="totalOwners" style="font-weight: normal; padding:3px"> Total Homeowners: </div> <div id="totalRenter" style="font-weight: normal; padding:3px"> Total Renters: </div> <div id="totalOccupancy" style="font-weight: normal; padding:3px"> Total Occupancy: </div> <!-- <div id="occupancyGraph" style="font-weight: normal; padding:20px; "> Occupancy Pie Chart: </div> --> </body> </html>
... View more
04-15-2019
10:36 PM
|
0
|
3
|
481
|
|
POST
|
thanks Sherbaz! that works. Now I got to get the pie chart repositioning to the right spot and be legible. I want it to display right after the "Gender Pie Chart:" in the div, maybe with the "Gender Pie Chart:" wording line up about mid way(half circle) of the chart. Do you have any tips on that ?
... View more
04-11-2019
09:51 PM
|
0
|
0
|
732
|
|
POST
|
Hello everyone, I'm having trouble displaying the Pie chart. Found some examples that I put together but I cannot get it to work. Any help on how to do this or pointers on how to do this is greatly appreciated. Am I even going in the right direction? Below are the code that I have. Thanks in Advance. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="X-UA-Compatitble" content="IE=Edge" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>TEST STATISTICs</title> <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.28/dijit/themes/claro/claro.css"> <style> html, body, #mapDiv{border:0; margin:0; padding:0; height:80%; width:100%;} </style> <script type="text/javascript" src="https://js.arcgis.com/3.28/"></script> <script type="text/javascript"> var usFemalesNum, usMalesNum, usHomeOwnersNum, usRentersNum; require ( [ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/SpatialReference", "esri/tasks/query", "esri/tasks/QueryTask", "esri/tasks/StatisticDefinition", "dojo/Deferred", "dojo/promise/all", "dojox/charting/Chart", "dojox/charting/plot2d/Pie", "dojox/charting/action2d/Highlight", "dojox/charting/action2d/Tooltip", "dojox/charting/SimpleTheme" ], function(Map, ArcGISDynamicMapServiceLayer, SpatialReference, Query, Qt, statD, Deferred, all, Chart, Pie, Highlight, Tooltip, SimpleTheme) { var censusLayers = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer"); var map = new Map("mapDiv", { basemap: "topo", center: [-94.84, 39.69], zoom: 5 }); censusLayers.setVisibleLayers([3]); //US Females number function totalFemales() { var retDef = new Deferred(); var queryTask = new Qt("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3"); var query = new Query(); query.returnGeometry = false; query.outFields = ["FEMALES"]; var stats = new statD(); stats.statisticType = "sum"; stats.onStatisticField = "FEMALES"; stats.outStatisticFieldName = "sum_female_pop"; query.where = "1=1"; query.outStatistics = [stats]; //queryTask.execute(query, showFemalesSum, showFail); queryTask.execute(query, function(result) { showFemalesSum(result).then(function(value) { retDef.resolve(value); }); }, showFail); return retDef; } function showFail(error) { console.error(error); } function showFemalesSum(results) { var retDef = new Deferred(); if (!results.hasOwnProperty("features") || results.features.length === 0) { return; } var totalSum = results.features[0].attributes.sum_female_pop; //console.log("testing", totalSum, results.features); document.getElementById('totalFemales').innerHTML = "Total Females: " + totalSum; retDef.resolve(totalSum); return retDef; } //US Males number function totalMales() { var retDef = new Deferred(); var queryTask = new Qt("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3"); var query = new Query(); query.returnGeometry = false; query.outFields = ["MALES"]; var stats = new statD(); stats.statisticType = "sum"; stats.onStatisticField = "MALES"; stats.outStatisticFieldName = "sum_male_pop"; query.where = "1=1"; query.outStatistics = [stats]; //queryTask.execute(query, showMalesSum, showFail); queryTask.execute(query, function(result) { showMalesSum(result).then(function(value) { retDef.resolve(value); }); }, showFail); return retDef; } function showMalesSum(results) { var retDef = new Deferred(); if (!results.hasOwnProperty("features") || results.features.length === 0) { return; } var totalSum = results.features[0].attributes.sum_male_pop; //console.log("testing", totalSum, results.features); document.getElementById('totalMales').innerHTML = "Total Males: " + totalSum; retDef.resolve(totalSum); return retDef; } //Owner Number function totalOwners() { var retDef = new Deferred(); var queryTask = new Qt("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3"); var query = new Query(); query.returnGeometry = false; query.outFields = ["OWNER_OCC"]; var stats = new statD(); stats.statisticType = "sum"; stats.onStatisticField = "OWNER_OCC"; stats.outStatisticFieldName = "sum_owner"; query.where = "1=1"; query.outStatistics = [stats]; //queryTask.execute(query, showOwnerSum, showFail); queryTask.execute(query, function(result) { showOwnerSum(result).then(function(value) { retDef.resolve(value); }); }, showFail); return retDef; }; function showOwnerSum(results) { var retDef = new Deferred(); if (!results.hasOwnProperty("features") || results.features.length === 0) { return; } var totalSum = results.features[0].attributes.sum_owner; //console.log("testing", totalSum, results.features); document.getElementById('totalOwners').innerHTML = "Total Homeowners: " + totalSum; retDef.resolve(totalSum); return retDef; } //Renter Number function totalRenters() { var retDef = new Deferred(); var queryTask = new Qt("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3"); var query = new Query(); query.returnGeometry = false; query.outFields = ["RENTER_OCC"]; var stats = new statD(); stats.statisticType = "sum"; stats.onStatisticField = "RENTER_OCC"; stats.outStatisticFieldName = "sum_renter"; query.where = "1=1"; query.outStatistics = [stats]; //queryTask.execute(query, showRenterSum, showFail); //console.log("Inside of totalRenter() "+stats.outStatisticFieldName); queryTask.execute(query, function(result) { showRenterSum(result).then(function(value) { retDef.resolve(value); }); }, showFail); return retDef; } function showRenterSum(results) { var retDef = new Deferred(); if (!results.hasOwnProperty("features") || results.features.length === 0) { return; } var totalSum = results.features[0].attributes.sum_renter; //console.log("testing", totalSum, results.features); document.getElementById('totalRenter').innerHTML = "Total Renters: " + totalSum; retDef.resolve(totalSum); return retDef; } map.addLayer(censusLayers); map.on("load", function() { all([totalFemales(), totalMales(), totalOwners(),totalRenters()]).then(function(results) { usFemalesNum = results[0]; usMalesNum = results[1]; usHomeOwnersNum = results[2]; usRentersNum = results[3]; //console.info(usFemalesNum, usMalesNum, usHomeOwnersNum, usRentersNum); var num = usMalesNum; var num2 = usFemalesNum; var num3 = usHomeOwnersNum; var num4 = usRentersNum; //var ratio = Math.floor((num / num2) * 100); var sum = num + num2; var sum2 = num3 + num4; document.getElementById("totalPop").innerHTML = "Total Population: " + sum; document.getElementById("totalOccupancy").innerHTML = "Total Occupancy: " + sum2; ///////////////////Get data to put in Pie chart function. function genderDataArray() { var femalesNum = results[0]; var malesNum = results[1]; return [femalesNum,malesNum]; } var genderDataResult = genderDataArray(); ///////////////////////////////////Start of trying to Display Pie Chart from the results. ///////////////////////// function formatAttributesForGraph(genderDataResult, fieldLabels) { var data = [], field; for(field in fieldLabels) { data.push({ tooltip:fieldLabels[field], y: +genderDataResult[field] //+ is to convert a value into a number, equivalent to parseInt() }); } return data; } function genderData(genderDataResult) { var fieldLabels = { "MALES": "Males", "FEMALES": "Females" } return this.formatAttributesForGraph(genderDataResult, fieldLabels); } function genderGraph(genderDataResult) { var genderTheme = new SimpleTheme({ colors: ["#8888ff", "#ff8888"] }), genderChart = new Chart("genderGraph"); //add in a customize theme genderChart.setTheme(genderTheme).addPlot("default",{ type: Pie, font: "normal normal 10pt Tahoma", fontColor: "black", radius: 60 //radius of 60 pixels }).addSeries("Series A", genderDataResult); var tP = new Tooltip(genderChart, "default"); var hL = new Highlight(genderChart, "default"); genderChart.render(); } }); }); } ); </script> </head> <body> <div id="mapDiv"></div> <div id="genderPopData" style="font-weight: bold"> Total Gender Population in United States <div id="totalFemales" style="font-weight: normal; padding:3px"> Total Females: </div> <div id="totalMales" style="font-weight: normal; padding:3px"> Total Males: </div> <div id="totalPop" style="font-weight: normal; padding:3px"> Total Population: </div> </div> <div id="genderGraph" style="font-weight: normal; padding:20px; "> Gender Pie Chart: </div> </br> <div id="housingData" style="font-weight: bold"> Owner Versus Renter in United States <div id="totalOwners" style="font-weight: normal; padding:3px"> Total Homeowners: </div> <div id="totalRenter" style="font-weight: normal; padding:3px"> Total Renters: </div> <div id="totalOccupancy" style="font-weight: normal; padding:3px"> Total Occupancy: </div> <div id="occupancyGraph" style="font-weight: normal; padding:20px; "> Occupancy Pie Chart: </div> </div> </body> </html>
... View more
04-10-2019
10:28 PM
|
0
|
2
|
990
|
My kudoed posts
| Title | Kudos | Posted |
|---|---|---|
| 2 | 09-10-2014 06:07 PM | |
| 1 | 08-06-2014 08:58 PM |
Activity Feed
- Got a Kudo for Re: ArcGIS WGS84 Web Mercator Vs. WGS84 UTM zone 15N: Very different distance dimensions. 11-11-2020 02:06 AM
- Posted Re: ArcGIS for JS + Angular + TypeScript on ArcGIS JavaScript Maps SDK Questions. 02-01-2020 10:50 PM
- Posted Re: Is it possible to add GoogleMapLayer as a basemap in ArcGIS JS 4.x 2D? on ArcGIS JavaScript Maps SDK Questions. 11-15-2019 04:42 PM
- Posted Re: Converting JS API V3 to V4 on ArcGIS JavaScript Maps SDK Questions. 08-18-2019 07:29 PM
- Posted Re: Stop slip map Touchscreen Device on ArcGIS JavaScript Maps SDK Questions. 06-07-2019 10:38 PM
- Kudoed Can I use arcGIS JS API 3.28 and 4.11 at the same project? for RoelGarcia. 06-07-2019 07:15 AM
- Posted Re: Can I use arcGIS JS API 3.28 and 4.11 at the same project? on ArcGIS JavaScript Maps SDK Questions. 06-07-2019 07:14 AM
- Posted Re: Stop slip map Touchscreen Device on ArcGIS JavaScript Maps SDK Questions. 06-07-2019 07:11 AM
- Posted Re: Firewall setting on ArcGIS JavaScript Maps SDK Questions. 06-03-2019 06:40 AM
- Posted Stop slip map Touchscreen Device on ArcGIS JavaScript Maps SDK Questions. 06-02-2019 07:19 PM
- Posted Re: Clearing Graphics on Toggled Layer on ArcGIS JavaScript Maps SDK Questions. 05-09-2019 08:51 PM
- Posted Re: Clearing Graphics on Toggled Layer on ArcGIS JavaScript Maps SDK Questions. 05-08-2019 09:42 PM
- Posted Clearing Graphics on Toggled Layer on ArcGIS JavaScript Maps SDK Questions. 05-06-2019 10:10 PM
- Tagged Clearing Graphics on Toggled Layer on ArcGIS JavaScript Maps SDK Questions. 05-06-2019 10:10 PM
- Tagged Clearing Graphics on Toggled Layer on ArcGIS JavaScript Maps SDK Questions. 05-06-2019 10:10 PM
- Posted Re: New Pie Chart, Overriding Old One on ArcGIS JavaScript Maps SDK Questions. 04-16-2019 01:54 PM
- Posted New Pie Chart, Overriding Old One on ArcGIS JavaScript Maps SDK Questions. 04-15-2019 10:36 PM
- Posted Re: Displaying results In Pie Chart on ArcGIS JavaScript Maps SDK Questions. 04-11-2019 09:51 PM
- Posted Displaying results In Pie Chart on ArcGIS JavaScript Maps SDK Questions. 04-10-2019 10:28 PM
- Tagged Displaying results In Pie Chart on ArcGIS JavaScript Maps SDK Questions. 04-10-2019 10:28 PM
Contact Me
| Online Status |
Offline
|
| Date Last Visited |
11-11-2020
02:23 AM
|