Is there any way to add KML,KMZ and CSV file from local drive/folder in web app?

4600
6
06-09-2014 10:35 PM
GauriDeshmukh
New Contributor III
Though it is mentioned that kml file has to be available publically(or hosted on server),
I am looking for a solution to add kml files only from local drive.
0 Kudos
6 Replies
ScottGunn
New Contributor III
You are right, the KML Layer requires a KML hosted on a URL.  So, assuming you have ArcGIS Server, you can get around this...I was able to implement the uploading of KML/KMZ files by publishing a geoprocessing task on my ArcGIS Server.  This is basically a Modelbuilder model that takes a KML file and converts it to a feature layer.  When published as a GP Service, this feature layer is then available on the server and can be added as a dynamic service layer.  Here's what my model looks like:
[ATTACH=CONFIG]34470[/ATTACH]

You can use esri/request to upload\retrieve the file from the server.
var uploadKml = new esriRequest({
   url: config.KML_Conv + "/GPServer/uploads/upload",
   form: dom.byId('uploadForm'),
   content: { "f": "json" }
         });
   
  uploadKml.then(
   function(response) {
    var random = (new Date()).getTime();
    var itemID = response.item.itemID; 
    var kmlTask = new Geoprocessor(config.KML_Conv + "/GPServer/KML_Conv3");
    var dataFile = new DataFile();
    dataFile.itemID = itemID;
    var params = {"KML": dataFile };
    kmlTask.outSpatialReference = map.spatialReference;
    //pass file name and random ID to callbacks for reference.  Note: cannot set ID to filename due to use of spaces or special chars
    var args = { fileName: response.item.itemName, random: random };
    kmlTask.submitJob(params, lang.hitch(args, completeCallback), lang.hitch(args, statusCallback), lang.hitch(args,errCallback));
    
   },
   function (error) {
    console.log("An error has occured: " + error);
   });
 }


Here's the callback:
function completeCallback(jobInfo){
   var kmlURL = config.KML_Conv + "/MapServer/jobs/";
   var kmlLayer = new ArcGISDynamicMapServiceLayer(kmlURL + jobInfo.jobId);
   map.addLayer(kmlLayer);
   $(".alert button#" + jobInfo.jobId).one("click", function() { 
    map.removeLayer(kmlLayer);
   });
   //zoom to new layer
   on(kmlLayer, "Load", function() {
    map.setExtent(kmlLayer.fullExtent, true);
   }); 
 }


Here's some more information on GP services:
http://resources.arcgis.com/en/help/main/10.1/index.html#//00570000005w000000

You could presumably publish another Model as a Geoprocessing Task that handles CSV files in the same fashion...
0 Kudos
GauriDeshmukh
New Contributor III
Thanks sagunn  got new approach 🙂

I tried by this way -

I converted the input kml to geojson format and then geojson to esri format.then added as esri graphics on map.
0 Kudos
GauriDeshmukh
New Contributor III

 
   var kmlLayer = new ArcGISDynamicMapServiceLayer(kmlURL + jobInfo.jobId);
   map.addLayer(kmlLayer);
   
 }


  Why you have used dynamic service layer, is there any reason?
Instead of ArcGISDynamicServiceLAyer, we can use directly

                var kmlLayer = new esri.layers.KMLLayer(url);
0 Kudos
JeffJacobson
Occasional Contributor III
You can add local CSV using this library:
https://github.com/WSDOT-GIS/CSV-Reader
0 Kudos
GauriDeshmukh
New Contributor III
This is great...thanks a lot jacobsj 🙂
this is what i wanted for csv.
but still struggling with adding kmz locally.
how to convert kmz into kml or unzip kmz and read its contents.
0 Kudos
JeffJacobson
Occasional Contributor III
This is great...thanks a lot jacobsj 🙂
this is what i wanted for csv.
but still struggling with adding kmz locally.
how to convert kmz into kml or unzip kmz and read its contents.


Note that I haven't personally used the libraries listed below, but they look like they will do what you want.

  • For unzipping the KMZ archive (which is just a ZIP archive containing KML): zip.js.

  • For converting KML to GeoJSON: mapbox/togeojson.

  • To convert from GeoJSON to ArcGIS JSON: Terraformer.ArcGIS. (This library is written by Esri.)

0 Kudos