topic Re: Download client-side graphics using ArcGIS JS? in ArcGIS JavaScript Maps SDK Questions

Download client-side graphics using ArcGIS JS?

NickRobles2 — Mon, 21 Aug 2017 17:13:46 GMT

I've looked everywhere for ways to to download user-drawn graphics using ArcGIS JS API but have not found a solution. Is this something that can at least be done using a GP task?

Re: Download client-side graphics using ArcGIS JS?

ThomasSolow — Sun, 12 Dec 2021 03:20:19 GMT

What do you mean by download user graphics? Do you want to save user drawn graphics in a file, locally? In what format, a ,json file with a json array of graphics?

If I understood you question correctly, here's one way you might approach this:

// start with array of graphics from any source
let graphics = [graphic1, graphic2, graphic3];

// convert each graphic into JSON, now we have a valid JSON array
let jsonGraphics = graphics.map(g => g.toJSON());

// first stringify the JSON, then URI encode it
let jsonString = encodeURIComponent(JSON.stringify(jsonGraphics));

// now you could set the JSON string as the href of an anchor tag with a download attribute
let a = document.getElementById('download-graphics')'
a.setAttribute('href', `data:text/json;charset=utf-8,${jsonString}`);
a.setAttribute('download', 'graphics.json');

// now click the anchor link to download the .json file file‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

There are other methods to get the browser to download a file. One of them is to open a new tab with a MIME type of 'application/octet-stream' instead of 'text/json'.

Re: Download client-side graphics using ArcGIS JS?

NickRobles2 — Mon, 28 Aug 2017 15:20:37 GMT

Thanks for your reply. Specifically, I do want to download user-drawn graphics that are stored in a graphics array in javascript to a local file. However, i would like them in a useable format, such as a SHP file. Is there a way to convert the .json to a format such as SHP? I know that there is an "Export Data" widget but that is only for hosted feature layers.

Re: Download client-side graphics using ArcGIS JS?

ThomasSolow — Mon, 28 Aug 2017 15:57:03 GMT

It should be possible to do this but you're going to have to jump through some hoops. This is the REST call you'll make to export to a shapefile: ArcGIS REST API

That call is made on an existing portal item, so you'll need to take an array of graphics in JavaScript, convert it to a Feature Collection, post the Feature Collection as a new Portal Item, export the new portal item as a shape file, and then direct the user to the newly created shapefile.

It also looks like you need to have a portal subscription to do this.

Re: Download client-side graphics using ArcGIS JS?

SteveCole — Mon, 28 Aug 2017 16:03:06 GMT

A less intense option might be to convert the JSON to KML.

Re: Download client-side graphics using ArcGIS JS?

NickRobles2 — Mon, 28 Aug 2017 16:25:15 GMT

Awesome! This is probably a more practical solution

Re: Download client-side graphics using ArcGIS JS?

NickRobles2 — Mon, 28 Aug 2017 16:38:17 GMT

Steve, have you had experience using the JSON to KML?

Re: Download client-side graphics using ArcGIS JS?

SteveCole — Mon, 28 Aug 2017 17:18:57 GMT

No- I'm afraid I have not. I have manually created a KML file of circles via JS (using the HTML5 file object) but that's about it. I originally wanted to create this using the JS API but ESRI didn't provide a worldwide free elevation query service so I opted for Google's map API instead. Anyways, the KML construction part should be JS API independent. Don't know if this will actually be useful for you but here's the link.

Essentially, zoom in someplace, click a location, provide a file name, and click the Make KML button. The browser should prompt you to either open a KML or save it locally.

Re: Download client-side graphics using ArcGIS JS?

ThomasSolow — Mon, 28 Aug 2017 17:25:59 GMT

This looks like another possible open source JS library you could check out: GitHub - mapbox/shp-write: create and write to shapefiles in pure javascript

Re: Download client-side graphics using ArcGIS JS?

Alexys_HerleymRodriguez_Avell1 — Wed, 29 Nov 2017 06:22:11 GMT

Hi Steve, Nick, everyone!

Using ArcGis Javascript Api 3.22 I create a web map viewer.

I take one (only none -- see red circle above!) client side graphic in the variable named selected

I can get the Json of selected using:

selected.toJson();

Using Terraformer I can transform from ArcGis Json to GeoJson using:

currentPrimitive = Terraformer.ArcGIS.parse(selected.toJson());

but in currentPrimitive the coordinates look like 0.000000111 .. a lot of 0000...(terraformer coordinates transformations??)

If I want to see geographic coordinates in GeoJson I need to use the next line instead:

currentPrimitive = Terraformer.ArcGIS.parse(selected.toJson()).toMercator();

Now I am ready to export to KML using JSON to KML, but before I had to fix some issues:

1) Inside geoJsonString I found some null that I had to replace with {}

2) I had to complete the geoJsonString using the strings 'inicio' and 'fin' (to configure a geoJson FeatureCollection with the selected graphic -- a featurecollection with only one graphic)

geoJsonString = JSON.stringify(currentPrimitive);

inicio="{\"type\":\"FeatureCollection\",\"properties\":{},\"features\":[ ";

fin= " ]}";

geoJsonString2 = geoJsonString.replace("null", "{}");

geoJsonString3 = inicio + geoJsonString2 + fin;

var kml = tokml(JSON.parse(geoJsonString3));

and now I am ready to put the KML in a HTML element using an hyperlink:

kmlString2 = encodeURIComponent(kml);

d = document.getElementById('download-kml');

d.setAttribute('href', `data:text/kml;charset=utf-8,${kmlString2}`);

d.setAttribute('Descargar', 'graphics.kml');

And the graphic border inside google earth:

Thanks for your suggestions.

But now I need to export the KML with the ArcGis Api symbols and colors. Do you have ideas to deal with it?

Thank you!

Alexys H Rodríguez

Re: Download client-side graphics using ArcGIS JS?

DavidWilton — Thu, 04 Apr 2019 03:45:20 GMT

I had some simple user drawn data and I was able to do this by using the following two libs:

https://github.com/Esri/arcgis-to-geojson-utils

https://github.com/mapbox/shp-write

// convert it to geojson ready for saving

// parse ArcGIS JSON, convert it to GeoJSON

this.geojson = esriUtils.arcgisToGeoJSON(graphic);

// download the data

shpwrite.download({

type: 'FeatureCollection',

features: [

this.geojson

]

});

Currently an issue with mapbox which I had to manually fix:

https://github.com/mapbox/shp-write/issues/48