|
BLOG
|
Introduction This is a quick blog post to show how easy it is to integrate beautiful graphs into your JavaScript application using the 4.x API. If you are new to the ArcGIS API for JavaScript, we provide an easy way to get started making web mapping applications. Head over to the ArcGIS API for JavaScript site to get started. For this sample we will be using a third party library called Chart.js. Chart.js is a simple yet flexible JavaScript charting library which makes it easy to make simple graphs for your data. Load in the Chart.js library into your JavaScript application In order to use Chart.js in our application we need to load it in as a module. This is because Dojo uses Asynchronous Module Definition (AMD) format to load in modules as supposed to loading in a file using a script tag. To achieve this we can use dojoConfig to load in our custom JS package as a module. <script>
const options = {
// tell Dojo where to load other packages
dojoConfig: {
async: true,
packages: [
{
location: 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js',
name: 'Chart'
}
]
}
};
</script>
<script src="https://js.arcgis.com/4.7/"></script> As you can see from the sample code above, we are going to tell dojo to load in a module from a Content Delivery Network (CDN). In this case we are using the CDN that Chart.js provides for us. You can also install the files through a package manager like npm or Bower. You can learn the different ways of installing Chart.js through their Installation documentation. To avoid any potential errors, ensure the dojoConfig is declared before the ArcGIS for JavaScript API. Integrating Chart.js in your JavaScript application Once you have completed the above steps, we can now use Chart.js in our JavaScript file... require([
"esri/Map",
"esri/views/MapView",
"esri/PopupTemplate",
"esri/layers/FeatureLayer",
"esri/widgets/Popup",
"esri/tasks/support/Query",
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js",
"dojo/domReady!"
],
function (Map, MapView, PopupTemplate, FeatureLayer, Popup, Query, Chart) In the require array we put in the CDN link to the library. We then name the module Chart so that we can create a new instance of it later on in our code. Querying data from a Feature Layer In this example I am using a Feature Layer of California from ArcGIS online . Each time I click on a county, I want a pop up to show information about the demographics of the area. For this we can use a Query, which will allow us to get information from our Feature Layer and spatially query the layer to only show data where we clicked. Once the promise has resolved, we will call the view's PopUp and send the data to setContentInfo . This is a function that will create the chart for us. The setContentInfo function will be explained more in detail on the next section. Here is the code snippet that shows this. var query = new Query();
query.returnGeometry = true;
query.outFields = ["STATE_NAME", "WHITE", "BLACK", "ASIAN", "HAWN_PI", "OTHER", "HISPANIC"];
query.where = "1=1";
query.num = 50;
// On view click, query the feature layer and pass the results to setContentInfo function.
view.on("click", (e) => {
query.geometry = e.mapPoint;
featureLayer.queryFeatures(query).then((results) =>{
if(results.features[0].attributes.STATE_NAME === "California"){
view.popup.visible = true;
view.popup.open({
title: "Doughnut Graph Example",
content: setContentInfo(results.features[0].attributes)
});
}
});
}); Create a graph using Chart.js We now get to include the Chart module that we instantiated awhile ago. In the previous code we set the content parameter to a function called setContentInfo and passed in the data. In the next code snippet, we are going to create this function and use it to initialize our charts inside the pop up. To start off we are going to create a new canvas element and give it the id of myChart . var canvas = document.createElement('canvas');
canvas.id = "myChart"; Then we are going to set up the Data Structure object with our own data. In this particular case we are using a doughnut graph which would have a different Data Structure than a line graph . For more information about the different types of charts you can use, please see the following documentation on the Chart.js website. For a doughnut graph the object would look like the following code snippet below. var data = {
datasets:[{
data: [results.ASIAN, results.BLACK, results.HAWN_PI, results.HISPANIC,
results.OTHER, results.WHITE],
backgroundColor: ["#4286f4", "#41f4be", "#8b41f4", "#e241f4", "#f44185", "#f4cd41"]
}],
labels: [
'Asian',
'Black',
'Hawaiian',
'Hispanic',
'Other',
'White'
]
}; You can see that in the data array, we are setting the results that we got from our feature layer. Each result will represent one piece of the doughnut graph, the backgroundColor is also set for each result value. Additionally, the labels attribute is set for each item in the data array. Finally, our last step is to create a new Chart object with the data and type properties. Then we return the Chart object. var myPieChart = new Chart(canvas,{
type: 'doughnut',
data: data
});
return canvas; Once the object is return we should get a chart inside our pop up showing demographic information each time we click on a county. You can also create this sample using TypeScript. Here is a link to the sample, if you are wondering how it would look in TypeScript. Tip: Here is a quick video showing how the sample works. Conclusion The ArcGIS API for JavaScript makes it super simple to integrate beautiful graphs from third party libraries like Chart.js. There are many more libraries that you can integrate into your JavaScript application like this that allows you to make powerful maps with additional functionality. Feel free to head over to the GitHub Gist page for the full sample.
... View more
06-13-2018
03:50 PM
|
5
|
3
|
7453
|
|
POST
|
As specified by Thomas, the setRequestPreCallback will work with 4.x. It is just not documented.
... View more
05-07-2018
03:56 PM
|
0
|
1
|
5162
|
|
POST
|
Ah, okay I see what you are saying now. Yea, I don't think this workflow would work in 3.x. In 4.x a lot of the modules have promises that allow you to get a result back once the object has loaded. Since 3.x is event driven, you wouldn't be able to get the functionality you want unless, like you said, add in that functionality yourself.
... View more
05-02-2018
01:24 PM
|
0
|
6
|
6447
|
|
POST
|
Hello Bulbul, If I am understanding your questions correctly, yes you can add Feature Layers to the Calcite Maps and Bootstrap app. You just need to include the feature layer module in the require array, create a feature layer class, and then add the layer to the map. The code is too long for me to post here so here is a github gist link (https://gist.github.com/nommuna2/f4d4fe42c4e61a971b42c59a54043878).
... View more
04-30-2018
03:06 PM
|
2
|
1
|
1406
|
|
POST
|
Hello Samuel, This may or may not be a solution to your problem, but if you were using the 4.x API you can use a promise to solve this. I am assuming you are using 3.x, so you can wrap the load event in a promise and essentially get the same affect. require([
"esri/map",
"esri/layers/FeatureLayer",
"dojo/domReady!"
], function (Map,FeatureLayer) {
//Initializing the map constructor
var map = new Map("map", {
center: [-118, 34.5],
zoom: 8,
basemap: "topo"
});
var fl = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0");
//create a promise
var promise = new Promise((resolve, reject) => {
fl.on('load', (e) => {
console.log(e);
resolve(e.layer.loaded)
reject("Something is wrong");
})
});
promise.then((e) => {
if(e){
console.log("The layer has loaded");
}
});
});
... View more
04-30-2018
12:07 PM
|
1
|
9
|
6447
|
|
POST
|
I am not sure about PyScripter but PyCharm makes it very easy to switch interpreters when you have multiples of them. Here is a link to their documentation (Configuring Python Interpreter - Help | PyCharm ). They even pick up Conda environments if you have Anaconda installed. Here are the different types of python interpreters you may have on your computer depending on what you have installed..... Python(2.x 32 bit) is used for ArcMap Desktop. Python (2.x 64 bit) is used for ArcGIS Server. Python (3.x 64 bit) is used for ArcGIS Pro. For more information about the version of python used for our products. Please see the following documentation depending on the version(ArcGIS Desktop 10.5.x system requirements—System Requirements | ArcGIS Desktop). If you are getting a red line under the import statement, then it may be because of the interpreter the IDE is using does not have that module in it. You need to make sure that you are pointing to the right interpreter (see the list above) to get access to the arcpy module.
... View more
04-24-2018
02:14 PM
|
0
|
0
|
1889
|
|
POST
|
Hello Tuba, We think support for drawing triangle, circle, and squares should be available at 4.7 for the SketchViewModel and Draw classes.
... View more
03-22-2018
02:37 PM
|
1
|
2
|
2211
|
|
POST
|
Hello Stan, If I am understanding your question correctly, you can do the following... Query the Feature Layer and the promise response should give you back the field alias. Replace the Feature Layer popupTemplate with the response from the Feature Layer query. You can access the alias by providing the promise a callback function, then you can just call the parameter you passed into the callback function. require([
"esri/Map",
"esri/layers/FeatureLayer",
"esri/views/MapView",
"dojo/domReady!"
], function(
Map,
FeatureLayer,
MapView
) {
// Create the map
var map = new Map({
basemap: "gray"
});
// Create the MapView
var view = new MapView({
container: "viewDiv",
map: map,
center: [-73.950, 40.702],
zoom: 3
});
var template = { // autocasts as new PopupTemplate()
title: "Test PopUp Template: {Incident Number}",
content: "<p>As of 2015, <b>{MARRIEDRATE}%</b> of the population in this zip code is married.</p>" +
"<ul><li>{MARRIED_CY} people are married</li>" +
"<li>{NEVMARR_CY} have never married</li>" +
"<li>{DIVORCD_CY} are divorced</li></ul>",
fieldInfos: [{
fieldName: "MARRIED_CY",
format: {
digitSeparator: true, // Use a comma separator for large numbers
places: 0 // Sets the number of decimal places to 0 and rounds up
}
}, {
fieldName: "NEVMARR_CY",
format: {
digitSeparator: true,
places: 0
}
}, {
fieldName: "DIVORCD_CY",
format: {
digitSeparator: true,
places: 0
}
}]
};
// Reference the popupTemplate instance in the
// popupTemplate property of FeatureLayer
var featureLayer = new FeatureLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/DamageAssessmentStatePlane/FeatureServer/0",
outFields: ["*"],
popupTemplate: template
});
featureLayer.load().then(function(){
var query = featureLayer.createQuery();
query.returnGeometry = true;
query.where = "1=1";
featureLayer.queryFeatures(query).then(function(results){
featureLayer.popupTemplate.content = "Alias for incidentid is: " + results.fields[1].alias;
});
});
map.add(featureLayer);
});
... View more
03-20-2018
09:08 AM
|
0
|
2
|
2745
|
|
POST
|
Hello Maddy, So you can start off with something like this https://jsbin.com/fohexopeyu/4/edit?html,js,output Essentially, we do the following: Load a Feature Layer into a web map. Set up a query and then run the Query Task. We set an alert to show how many features are on the map. On Feature Layer click, we pass the object id of the clicked feature to the query.objectIds and then do another queryTask. Then the alert will show the area_name of the clicked feature. This sample is kind off rough and can be updated to be more efficient (like using just one queryTask instead of two and using Div's to show the result instead of an Alert). But I think it is a good start.
... View more
03-19-2018
05:13 PM
|
1
|
0
|
474
|
|
POST
|
Hello Srikanth, If you are using the 4.x version, I would recommend reading the following documentation(https://developers.arcgis.com/javascript/latest/guide/using-frameworks/index.html). The provided link provides a good step-by-step guide on how to get started using the Esri JS API with the latest frameworks like Angular.
... View more
03-19-2018
02:33 PM
|
1
|
0
|
835
|
|
POST
|
Hello Maddy, I would use this example instead (https://developers.arcgis.com/javascript/3/jssamples/ags_createwebmapid.html). Looking at your past responses, it seems you are trying to load in a webmap using a ArcGISDynamicMapServiceLayer class which will not work. If you want to load a webmap from Arcgis online then you would use arcgisUtils.createMap(). Then you can add any layers you want to the web map.
... View more
03-19-2018
02:21 PM
|
0
|
2
|
1804
|
|
POST
|
Hello Jack, If I am understanding what you are trying to do, you could do the following.... Do a queryTask on the Map Service. This will return a Feature Set. You can use the Feature Set as the source for a Feature Layer object. Then apply a unique value renderer to that Feature Layer and add it to the map. This would display only what you queried, as a custom Feature Layer. Below is sample code I came up with. Let me know if this is a misunderstanding of your question. require([
"esri/Map",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"esri/tasks/support/Query",
"esri/tasks/QueryTask",
"esri/layers/FeatureLayer",
"dojo/domReady!"
],
function (Map, MapView, MapImageLayer, Query, QueryTask, FeatureLayer) {
//Create a new map and set the basemap to Dark gray
var map = new Map({
basemap: "dark-gray",
//layers: [featureLayer]
});
//set a new view and set the properties of the view
var view = new MapView({
container: "viewDiv",
map: map,
center: [-86.049, 38.485],
zoom: 3
});
var queryStatesTask = new QueryTask({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2"
});
var quakesRenderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "simple-fill", // autocasts as new SimpleMarkerSymbol()
//style: "circle",
size: 20,
color: [211, 255, 0, 0],
outline: {
width: 1,
color: "#FF0055",
style: "solid"
}
}
}
var query = new Query();
query.where = "state_name = 'California'";
query.returnGeometry = true;
queryStatesTask.execute(query).then(function (result) {
//console.log(result);
var fl = new FeatureLayer({
source: result.features, // autocast as an array of esri/Graphic
// create an instance of esri/layers/support/Field for each field object
fields: result.fields, // This is required when creating a layer from Graphics
objectIdField: "ObjectID", // This must be defined when creating a layer from Graphics
renderer: quakesRenderer, // set the visualization on the layer
spatialReference: result.spatialReference,
geometryType: result.geometryType // Must be set when creating a layer from Graphics
});
map.add(fl);
});
});
... View more
03-16-2018
12:13 PM
|
2
|
0
|
1940
|
|
POST
|
Hello Jack, As per documentation, Arcade expressions are not supported with MapImageLayers. Only FeatureLayers and SceneLayers are supported.
... View more
03-09-2018
03:19 PM
|
1
|
3
|
1940
|
|
POST
|
Hello Molly, If I am understanding your question correctly, you could just use a UniqueValueRenderer on a single Feature Layer. Here is a sample of doing this in 4.x: Visualize features by type | ArcGIS API for JavaScript 4.6
... View more
03-05-2018
04:21 PM
|
1
|
0
|
2548
|
|
POST
|
Hello Molly, Assuming I understand your problem correctly, I think you would want to use "key" as the switch expression since you want to check if the "key" is equal to 1. Also, it is kind of hard to see how you are getting the data from the feature service with the code provided. In order to get data from your Feature Service, you would need to do a query of some kind and I am not sure if you are doing that. What you would want to do is the following: When a feature is clicked, do a query against the feature layer. Grab the OfficialQH field from the query response and use that for the switch expression. Then check if that field has a 0 or 1 and populate the value result.
... View more
03-05-2018
02:11 PM
|
1
|
1
|
1600
|
| Title | Kudos | Posted |
|---|---|---|
| 1 | 08-17-2018 10:09 AM | |
| 1 | 03-25-2019 10:33 AM | |
| 1 | 03-09-2018 03:19 PM | |
| 1 | 12-13-2018 02:50 PM | |
| 1 | 03-22-2018 02:37 PM |
| Online Status |
Offline
|
| Date Last Visited |
11-11-2020
02:24 AM
|