DOC
|
Author Name: Brandon Payne Presentation Title: Creating a Custom Table of Contents in Angular Organization: Trihydro Corporation Address: 5311 Coffeen Ave, Sheridan, WY 82801 Phone: 307/745.7474 Email: bpayne@trihydro.com Presenter Biography Brandon is a Senior Developer with Trihydro and has over 8 years of experience in application development including ESRI, JavaScript, Angular, HTML5, and CSS3. Abstract A table of contents (ToC) is one of the most important pieces of information to be able to view a map effectively and with ease. Though useful the current JavaScript LayerList widget fell short in some areas for users to effectively view the ToC data. This presentation will show where users found the LayerList to be lacking, and how we customized a ToC solution using Angular and the ESRI JavaScript API to meet their needs. Attendees will be shown applicable code of how the new ToC was created.
... View more
12-29-2017
02:59 PM
|
10
|
0
|
1024
|
POST
|
The generate function on our servers is the same as the one ESRI hosts, we just have an in-house ArcGIS server. The function is just part of the REST API so it just accepts a POST request by default. You could continue using the one hosted by ESRI without an issue as well. I was using the ESRI hosted generate method to test my local copy before moving it to our servers and was able to send it POST requests. The 4.x JSAPI itself doesn't support the FormData option at the moment, however the server side doesn't really care about the JSAPI and still supports FormData. If you just use the built in Angular http.post function you should be able to get it to work. I'd recommend using something like Postman to test your REST calls out to the server - I've been using it and found it extremely useful for these cases. I've modified my original function (which I had tweaked for 3.x - we've moved back down after running into too many issues with 4.x). The result is below. getFeaturesFromZip(zipFile, name, targetSR) {
var form = new FormData();
form.append("publishParameters", "{\"name\":\"" + name + "\" ,\"targetSR\":{\"wkid\":" + targetSR + "},\"maxRecordCount\":1000,\"enforceInputFileSizeLimit\":true,\"enforceOutputJsonSizeLimit\":true,\"locationType\":\"none\",\"reducePrecision\":false,\"numberOfDigitsAfterDecimal\":1}");
form.append("filetype", "shapefile");
let zipName = name = ".zip";
form.append("file", this.dataURItoBlob(zipFile), zipName);
return this.http.post(this._configuration.ShapefileServiceEndpoint, form)
.map((res: Response) => res.json());
}
... View more
04-03-2017
07:06 AM
|
2
|
4
|
1884
|
POST
|
Hey Barbara, I was able to upload the shapefile from my local machine in a .zip format. Since the form parameter isn't supported using the 4.x API I just created a POST request with another technology, in this case Angular 2. My functions to do this were as follows: getFeaturesFromZip(zipFile, name, targetSR) {
var form = new FormData();
var publishParams = {
'name': name,
'targetSR': {
'wkid': targetSR
},
'maxRecordCount': 1000,
'enforceInputFileSizeLimit': true,
'enforceOutputJsonSizeLimit': true
};
var extent = scaleUtils.getExtentForScale(this._configuration.map, 40000);
var resolution = extent.getWidth() / this._configuration.map.width;
publishParams.generalize = false;
publishParams.maxAllowableOffset = resolution;
publishParams.reducePrecision = false;
publishParams.numberOfDigitsAfterDecimal = 0;
form.append("publishParameters", JSON.stringify(publishParams));
form.append("filetype", "shapefile");
form.append("f", "json");
let zipName = name = ".zip";
form.append("file", this.dataURItoBlob(zipFile), zipName);
return this.http.post(this._configuration.ShapefileServiceEndpoint, form)
.map((res: Response) => res.json());
}
private dataURItoBlob(dataURI) {
var array = [];
if (dataURI instanceof Array) {
array = dataURI;
}
else {
var binary = atob(dataURI);
for (var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
}
return new Blob([new Uint8Array(array)], { type: 'application/zip' });
} Good luck!
... View more
03-30-2017
07:14 AM
|
1
|
6
|
1884
|
IDEA
|
Hey Sofie, I've been meaning to release this out to GitHub. I need to run through the code and clean it up a bit then I'll get it out there. I'll put a link up on this thread when I do. -Brandon
... View more
03-15-2017
10:25 AM
|
0
|
1
|
988
|
POST
|
For anyone else who comes upon this question I was finally able to solve it. I used the same method as can be seen in the previous 'add shapefile' link to the 3.19 solution, but I pointed the 'generate' function to one that we have on our own servers. This returns a featureCollection, which works great for 3.19 but must be tweaked for a 4.x solution. To do this, I loop through the featureCollection.layers and create a new FeatureLayer for each one as follows: for (var i = 0; i < features.featureCollection.layers.length; i++) {
var lyr = features.featureCollection.layers[i];
var featLayer = new FeatureLayer({
fields: lyr.layerDefinition.fields,
objectIdField: lyr.layerDefinition.objectIdField,
geometryType: lyr.layerDefinition.geometryType,
spatialReference: SpatialReference.fromJSON(lyr.featureSet.spatialReference),
source: this.getFeatureObjects(lyr.featureSet.features),
visible: true,
renderer: rendererJsonUtils.fromJSON(lyr.layerDefinition.drawingInfo.renderer),
});
this.view.map.add(featLayer);
}
private getFeatureObjects(features): Collection {
var featureObjs: any = [];
for (var i = 0; i < features.length; i++) {
var currFeat = features[i];
var graphic = Graphic.fromJSON(currFeat);
featureObjs.push(graphic);
}
return featureObjs;
}
... View more
02-21-2017
12:21 PM
|
2
|
8
|
1884
|
POST
|
I'm wondering if anyone has been able to add a shapefile to a JS 4.2 app yet? I see the documentation for doing it in 3.19 (Add shapefile | ArcGIS API for JavaScript 3.19 ) and I've gotten this to work as a local demo project, but there are a few changes from 3.x to 4.x that seem to make this quite hard to do. Specifically, the esri/request has changed to no longer use a "form" parameter, so how do we upload the zipped shapefile now? Ideally, I'd like to be able to add an in-memory instance of a shapefile from a database download as well as a user selected shapefile from their local machine. Anyone have some ideas on this? I'm starting to lean toward a third-party tool to parse out the geojson data from the shapefile and manually add in a new feature layer, but this seems like more work than should be necessary.
... View more
02-14-2017
09:32 AM
|
1
|
10
|
5864
|
IDEA
|
Category 1 & Category 2 above actually are group layers. They do live on the same server though, so I'm not running into any issues with the layer id being the same for multiple layers.
... View more
08-26-2016
06:51 AM
|
0
|
0
|
988
|
IDEA
|
Hopefully ESRI will add this in and make it a little more solid and user-friendly. To get this to work I had to create the treeview in Angular, add in each layer individually, and then add a JSON request out to the /legend endpoint of the layer services to pull them in and query each individually to grab the symbology by layer id. I've seen a few projects that had something similar to this, but none that had recent work on them or that had been ported over to the new API. Maybe a future enhancement?
... View more
08-25-2016
09:17 AM
|
0
|
1
|
988
|
IDEA
|
Hi Bjorn, Ideally we'd like to have the LayerList able to display the legend in-line instead of having to toggle back and forth to see what the symbology is. So for instance if you look at my comment above, I created a custom table of contents that does this for us where we can turn on/off a layer and see its symbology all at one time. Note that this is also for the 4.0 JS library, which it doesn't seem the LayerList widget is a part of yet according to Functionality matrix | ArcGIS API for JavaScript 4.0
... View more
08-24-2016
12:21 PM
|
1
|
1
|
988
|
IDEA
|
Hey Ian, I've been cranking away at it this morning and I think I've just about cracked it for a custom TOC with the symbology in-line. The key was to go out and fetch the entire Legend as JSON from the REST service and parse it out manually, injecting the image data into an html <img> tag. Angular made it a bit easier to loop through all the different layers so that was nice but a snapshot of the combined is below: This was definitely a custom TOC built from the ground up, so hopefully ESRI will implement something like this so we don't have to do the one-offs anymore. -Brandon
... View more
08-24-2016
12:09 PM
|
0
|
3
|
988
|
IDEA
|
Hey Ian, Wouldn't you know it I'm currently working on a project where we want this exact same thing with the TOC having the symbology with it, and here you have the same issue! It really is a small world sometimes. Did you ever make it anywhere with this? I'm working on an Angular 2 application and have created a custom TOC to try to get this to work but have ran into a bit of a wall just trying to find the locations of the symbology images. -Brandon
... View more
08-24-2016
07:46 AM
|
0
|
1
|
2041
|
POST
|
I'm working on a map that includes a windrose (using Highcharts). This works well, until I want functionality behind the windrose. The windrose is effectively in a div that is positioned over the center of the map and has a transparent background so the map itself shows through. The windrose has some functionality of its own, so I would prefer to keep both the windrose and map functionality in tact. I have tried using jquery.forwardevents.js (GitHub - MichaelPote/jquery.forwardevents: Forwards mouse events from one DOM Element to another. ) and have tweaked that slightly to work somewhat for the map. If I forward the the events to the div, I can capture events without issue but they are not propagated down to the map. If I forward events to the map itself, I am only able to capture certain events such as click. I have also tried forwarding all events straight to the graphics layer that I have points in to test and still am only able to capture the click event. This makes panning, and interacting with points on the map impossible. Has anyone done something similar to this before?
... View more
02-10-2016
01:32 PM
|
0
|
0
|
1642
|
POST
|
I'm working on developing an application that uses ArcGis Javascript. This application runs uses the IonicFramework and runs in Cordova so it can be run on Android and IOS systems. On selecting a dropdown, a graphics layer with various graphics is added to the map. This is working correctly, and I am able to click on the graphics to get the info window with accompanying information. The issue I'm running into is with zooming into/out of the map. When I use a local copy of the 3.10 Compact library the double click zoom function thinks the center point is somewhere off to the left of the screen. This also happens with the pinch zoom. Using the same code, if I point to a CDN address (http://js.arcgis.com/3.10compact/init.js) the zoom works correctly. Any ideas? Thanks, Brandon
... View more
09-24-2014
02:10 PM
|
0
|
3
|
6022
|
Title | Kudos | Posted |
---|---|---|
1 | 03-30-2017 07:14 AM | |
10 | 12-29-2017 02:59 PM | |
1 | 02-14-2017 09:32 AM | |
2 | 02-21-2017 12:21 PM | |
2 | 04-03-2017 07:06 AM |
Online Status |
Offline
|
Date Last Visited |
11-11-2020
02:23 AM
|