nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Download client-side graphics using ArcGIS JS?

NickRobles2

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?

Encuentra más publicaciones etiquetadas con

Accepted answers

All comments

DavidWilton

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

Alexys_HerleymRodriguez_Avell1

Hi Steve, Nick, everyone!

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

Download client side graphic to kml file

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');

Download client side graphic

And the graphic border inside google earth:

Download client side graphic to kml file

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

ThomasSolow

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

evtguy

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.

NickRobles2

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

NickRobles2

Awesome! This is probably a more practical solution

evtguy

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

ThomasSolow

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.

NickRobles2

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.

ThomasSolow

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:

<SPAN class="comment token">// start with array of graphics from any source</SPAN>
<SPAN class="keyword token">let</SPAN> graphics <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN>graphic1<SPAN class="punctuation token">,</SPAN> graphic2<SPAN class="punctuation token">,</SPAN> graphic3<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">// convert each graphic into JSON, now we have a valid JSON array</SPAN>
<SPAN class="keyword token">let</SPAN> jsonGraphics <SPAN class="operator token">=</SPAN> graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN>g <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> g<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toJSON</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">// first stringify the JSON, then URI encode it</SPAN>
<SPAN class="keyword token">let</SPAN> jsonString <SPAN class="operator token">=</SPAN> <SPAN class="token function">encodeURIComponent</SPAN><SPAN class="punctuation token">(</SPAN>JSON<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stringify</SPAN><SPAN class="punctuation token">(</SPAN>jsonGraphics<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">// now you could set the JSON string as the href of an anchor tag with a download attribute</SPAN>
<SPAN class="keyword token">let</SPAN> a <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'download-graphics'</SPAN><SPAN class="punctuation token">)</SPAN>'
a<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setAttribute</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'href'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="template-string token"><SPAN class="string token">`data:text/json;charset=utf-8,</SPAN><SPAN class="interpolation token"><SPAN class="interpolation-punctuation punctuation token">${</SPAN>jsonString<SPAN class="interpolation-punctuation punctuation token">}</SPAN></SPAN><SPAN class="string token">`</SPAN></SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
a<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setAttribute</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'download'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'graphics.json'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">// now click the anchor link to download the .json file file</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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'.

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.