Drag and drop to display data | ArcGIS API for JavaScript

This sample is experimental and may not work on all browsers. Visit caniuse.com to determine if the drag/drop and file access capabilities used in this sample are available for your browser.

The sample uses several HTML5 technologies to access files from disk, read them then drag and drop them onto the map control for display. To test the sample drag an image or a csv file with latitude/longitude fields from windows explorer to the map. Note that images are rendered on the map as picture marker symbols and csv files with valid latitude/longitude fields are displayed as a graphics layer. You can also drag/drop map and feature services onto the map for display.

This sample sets the map up as a drop zone and executes the handleDrop function when a file is dropped on the map. The handleDrop function determines which type of file was dropped then processes the drop input for display on the map.

var node = dojo.byId("mapCanvas");
dojo.connect(node, "dragenter", function(evt) {
  evt.preventDefault();
});
dojo.connect(node, "dragover", function(evt) {
  evt.preventDefault();
});
dojo.connect(node, "drop", handleDrop);

At version 2.7, this sample was updated to provide a file upload option to support older browsers that are do not have support for drag/drop and file access capabilites. To test this, open the application in a Internet Explorer and note that a browse button appears that allows users to browse for a csv file. This type of approach is useful when you want to build an application that uses HTML5 capabilities that are not available on all browsers. To add this capability to your applciation create a form with a file input. Note that the input in this sample has a name of data, this value will change depending on the service. The documentation for the service to which you are uploading the file should specify this value.

<form id="uploadForm" style='display:none;padding:4px;' method="post" enctype="multipart/form-data"> <input type="file" name="data" id="inFile" size="15" /></form>

This sample uses a .NET handler to return the uploaded csv file in base64 format. Download the zip file to view the handler code.

dojo.byId("status").innerHTML = "Uploading...";
var requestHandle = esri.request({
  url: "http://servicesbeta.esri.com/demos/csv/reflect.ashx",
  form: dojo.byId("uploadForm"),
  load: requestSucceeded,
  error: requestFailed
});

Code

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>File Access with Drag and Drop</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css" />
<link rel="stylesheet" href="css/layout.css" />

<script>var dojoConfig = { parseOnLoad:true };</script>
<script src="http://js.arcgis.com/3.6/"></script>
<script>
dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");
dojo.require("dojox.data.CsvStore");
dojo.require("esri.dijit.InfoWindowLite");
dojo.require("dijit.Dialog");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojo.io.iframe");
dojo.require("dojox.encoding.base64");

dojo.ready(pageReady);
var map;
//list of lat and lon field strings
var latFieldStrings = ["lat", "latitude", "y", "ycenter"];
var longFieldStrings = ["lon", "long", "longitude", "x", "xcenter"];

function pageReady() {
  //specfiy cors enabled server and proxy for backup
  esri.config.defaults.io.corsEnabledServers.push("serverapi.arcgisonline.com");
  esri.config.defaults.io.proxyUrl = 'http://serverapi.arcgisonline.com/proxy/proxy.ashx';

  dojo.connect(dojo.byId("uploadForm").data, "onchange", function (evt) {
    uploadFile(this.files);
  });
  setupDropZone();

  map = new esri.Map("mapCanvas", {
    basemap:"topo",
    center :[-103.272, 39.096],
    zoom   :4,
    slider :false
  });

  map.infoWindow.resize(275, 175);
}

function setupDropZone() {
  // Let's verify that we have proper browser support, before
  // moving ahead. You can also use a library like Modernizr
  // to detect browser cappabilities:
  // http://www.modernizr.com/
  if (!window.File || !window.FileReader) {
    esri.show(dojo.byId('uploadForm'));
    esri.show(dojo.byId('msg'));
    return;
  }

  var node = dojo.byId("mapCanvas");
  // Reference
  // http://www.html5rocks.com/features/file
  // http://www.html5rocks.com/tutorials/dnd/basics/
  // https://developer.mozilla.org/En/DragDrop/Drag_Operations
  dojo.connect(node, "dragenter", function (evt) {
    // If we don't prevent default behavior here, browsers will
    // perform the default action for the file being dropped i.e,
    // point the page to the file.
    evt.preventDefault();
  });

  dojo.connect(node, "dragover", function (evt) {
    evt.preventDefault();
  });
  dojo.connect(node, "drop", handleDrop);
}

function handleDrop(evt) {
  console.log("Drop: ", evt);
  evt.preventDefault();
  // Reference
  // http://www.html5rocks.com/tutorials/file/dndfiles/
  // https://developer.mozilla.org/en/Using_files_from_web_applications
  var dataTransfer = evt.dataTransfer,
      files = dataTransfer.files,
      types = dataTransfer.types;

  // File drop?
  if (files && files.length === 1) {
    console.log("[ FILES ]");
    var file = files[0]; // that's right I'm only reading one file
    console.log("type = ", file.type);
    if (file.type.indexOf("image/") !== -1) {
      handleImage(file, evt.layerX, evt.layerY);
    } else if (file.name.indexOf(".csv") !== -1) {
      handleCsv(file);
    }
  }

  // Textual drop?
  else if (types) {
    console.log("[ TYPES ]");
    console.log("  Length = ", types.length);
    dojo.forEach(types, function (type) {
      if (type) {
        console.log("  Type: ", type, ", Data: ", dataTransfer.getData(type));
      }
    });

    // We're looking for URLs only.
    var url;
    dojo.some(types, function (type) {
      if (type.indexOf("text/uri-list") !== -1) {
        url = dataTransfer.getData("text/uri-list");
        return true;
      } else if (type.indexOf("text/x-moz-url") !== -1) {
        url = dataTransfer.getData("text/plain");
        return true;
      } else if (type.indexOf("text/plain") !== -1) {
        url = dataTransfer.getData("text/plain");
        url = url.replace(/^\s+|\s+$/g, "");
        if (url.indexOf("http") === 0) {
          return true;
        }
      }
      return false;
    });

    if (url) {
      url = url.replace(/^\s+|\s+$/g, "");
      // Check if this URL is a google search result.
      // If so, parse it and extract the actual URL
      // to the search result
      if (url.indexOf("www.google.com/url") !== -1) {
        var obj = esri.urlToObject(url);
        if (obj && obj.query && obj.query.url) {
          url = obj.query.url;
        }
      }

      if (url.match(/MapServer\/?$/i)) {
        // ArcGIS Server Map Service?
        handleMapServer(url);
      } else if (url.match(/(Map|Feature)Server\/\d+\/?$/i)) {
        // ArcGIS Server Map/Feature Service Layer?
        handleFeatureLayer(url);
      } else if (url.match(/ImageServer\/?$/i)) {
        // ArcGIS Server Image Service?
        handleImageService(url);
      }
    }
  }
}

function handleImage(file, x, y) {
  console.log("Processing IMAGE: ", file, ", ", file.name, ", ", file.type, ", ", file.size);
  var reader = new FileReader();
  reader.onload = function () {
    console.log("Finished reading the image");
    // Create an image element just to find out the image
    // dimension before adding it as a graphic
    var img = dojo.create("img");
    img.onload = function () {
      var width = img.width,
          height = img.height;
      console.log("Image dimensions: ", width, ", ", height);

      // Add a graphic with this image as its symbol
      var symbol = new esri.symbol.PictureMarkerSymbol(reader.result, width > 64 ? 64 : width, height > 64 ? 64 : height);
      var point = map.toMap(new esri.geometry.Point(x, y));
      var graphic = new esri.Graphic(point, symbol);
      map.graphics.add(graphic);
    };
    img.src = reader.result;
  };

  // Note that it's possible to monitor read progress as well:
  // http://www.html5rocks.com/tutorials/file/dndfiles/#toc-monitoring-progress
  // http://www.html5rocks.com/tutorials/file/dndfiles/#toc-reading-files
  reader.readAsDataURL(file);
}

function handleMapServer(url) {
  console.log("Processing MS: ", url);
  var layer = new esri.layers.ArcGISDynamicMapServiceLayer(url, {
    opacity:0.75
  });
  map.addLayer(layer);
}

function handleFeatureLayer(url) {
  console.log("Processing FL: ", url);
  var layer = new esri.layers.FeatureLayer(url, {
    opacity     :0.75,
    mode        :esri.layers.FeatureLayer.MODE_ONDEMAND,
    infoTemplate:new esri.InfoTemplate(null, "${*}")
  });
  map.addLayer(layer);
}

function handleImageService(url) {
  console.log("Processing IS: ", url);
  var layer = new esri.layers.ArcGISImageServiceLayer(url, {
    opacity:0.75
  });
  map.addLayer(layer);
}

function handleCsv(file) {
  console.log("Processing CSV: ", file, ", ", file.name, ", ", file.type, ", ", file.size);
  if (file.data) {
    var decoded = bytesToString(dojox.encoding.base64.decode(file.data));
    processCsvData(decoded);
  } else {
    var reader = new FileReader();
    reader.onload = function () {
      console.log("Finished reading CSV data");
      processCsvData(reader.result);
    };
    reader.readAsText(file);
  }
}

var bytesToString = function (b) {
  console.log("bytes to string");
  var s = [];
  dojo.forEach(b, function (c) {
    s.push(String.fromCharCode(c));
  });
  return s.join("");
};

function processCsvData(data) {
  var newLineIdx = data.indexOf("\n");
  var firstLine = dojo.trim(data.substr(0, newLineIdx)); //remove extra whitespace, not sure if I need to do this since I threw out space delimiters
  var separator = getSeparator(firstLine);
  var csvStore = new dojox.data.CsvStore({
    data     :data,
    separator:separator
  });

  csvStore.fetch({
    onComplete:function (items, request) {
      var objectId = 0;
      var featureCollection = generateFeatureCollectionTemplateCsv(csvStore, items);
      var popupInfo = generateDefaultPopupInfo(featureCollection);
      var infoTemplate = new esri.InfoTemplate(buildInfoTemplate(popupInfo));
      var latField, longField;
      var fieldNames = csvStore.getAttributes(items[0]);
      dojo.forEach(fieldNames, function (fieldName) {
        var matchId;
        matchId = dojo.indexOf(latFieldStrings, fieldName.toLowerCase());
        if (matchId !== -1) {
          latField = fieldName;
        }

        matchId = dojo.indexOf(longFieldStrings, fieldName.toLowerCase());
        if (matchId !== -1) {
          longField = fieldName;
        }
      });

      // Add records in this CSV store as graphics
      dojo.forEach(items, function (item, index) {
        var attrs = csvStore.getAttributes(item),
            attributes = {};
        // Read all the attributes for  this record/item
        dojo.forEach(attrs, function (attr) {
          var value = Number(csvStore.getValue(item, attr));
          if (isNaN(value)) {
            attributes[attr] = csvStore.getValue(item, attr);
          } else {
            attributes[attr] = value;
          }
        });

        attributes["__OBJECTID"] = objectId;
        objectId++;

        var latitude = parseFloat(attributes[latField]);
        var longitude = parseFloat(attributes[longField]);

        if (isNaN(latitude) || isNaN(longitude)) {
          return;
        }

        var geometry = esri.geometry.geographicToWebMercator(new esri.geometry.Point(longitude, latitude));
        var feature = {
          "geometry"  :geometry.toJson(),
          "attributes":attributes
        };
        featureCollection.featureSet.features.push(feature);
      });

      var featureLayer = new esri.layers.FeatureLayer(featureCollection, {
        infoTemplate:infoTemplate,
        id          :'csvLayer'
      });
      featureLayer.__popupInfo = popupInfo
      map.addLayer(featureLayer);
      zoomToData(featureLayer);
    },
    onError   :function (error) {
      console.error("Error fetching items from CSV store: ", error);
    }
  });
}

function generateFeatureCollectionTemplateCsv(store, items) {
  //create a feature collection for the input csv file
  var featureCollection = {
    "layerDefinition":null,
    "featureSet"     :{
      "features"    :[],
      "geometryType":"esriGeometryPoint"
    }
  };
  featureCollection.layerDefinition = {
    "geometryType" :"esriGeometryPoint",
    "objectIdField":"__OBJECTID",
    "type"         :"Feature Layer",
    "typeIdField"  :"",
    "drawingInfo"  :{
      "renderer":{
        "type"  :"simple",
        "symbol":{
          "type"       :"esriPMS",
          "url"        :"http://static.arcgis.com/images/Symbols/Basic/RedSphere.png",
          "imageData"  :"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",
          "contentType":"image/png",
          "width"      :15,
          "height"     :15
        }
      }
    },
    "fields"       :[
      {
        "name"    :"__OBJECTID",
        "alias"   :"__OBJECTID",
        "type"    :"esriFieldTypeOID",
        "editable":false,
        "domain"  :null
      }
    ],
    "types"        :[],
    "capabilities" :"Query"
  };

  var fields = store.getAttributes(items[0]);
  dojo.forEach(fields, function (field) {
    var value = store.getValue(items[0], field);
    var parsedValue = Number(value);
    if (isNaN(parsedValue)) { //check first value and see if it is a number
      featureCollection.layerDefinition.fields.push({
        "name"    :field,
        "alias"   :field,
        "type"    :"esriFieldTypeString",
        "editable":true,
        "domain"  :null
      });
    } else {
      featureCollection.layerDefinition.fields.push({
        "name"    :field,
        "alias"   :field,
        "type"    :"esriFieldTypeDouble",
        "editable":true,
        "domain"  :null
      });
    }
  });
  return featureCollection;
}

function generateDefaultPopupInfo(featureCollection) {
  var fields = featureCollection.layerDefinition.fields;
  var decimal = {
    'esriFieldTypeDouble':1,
    'esriFieldTypeSingle':1
  };
  var integer = {
    'esriFieldTypeInteger'     :1,
    'esriFieldTypeSmallInteger':1
  };
  var dt = {
    'esriFieldTypeDate':1
  };
  var displayField = null;
  var fieldInfos = dojo.map(fields, dojo.hitch(this, function (item, index) {
    if (item.name.toUpperCase() === "NAME") {
      displayField = item.name;
    }
    var visible = (item.type !== "esriFieldTypeOID" && item.type !== "esriFieldTypeGlobalID" && item.type !== "esriFieldTypeGeometry");
    var format = null;
    if (visible) {
      var f = item.name.toLowerCase();
      var hideFieldsStr = ",stretched value,fnode_,tnode_,lpoly_,rpoly_,poly_,subclass,subclass_,rings_ok,rings_nok,";
      if (hideFieldsStr.indexOf("," + f + ",") > -1 || f.indexOf("area") > -1 || f.indexOf("length") > -1 || f.indexOf("shape") > -1 || f.indexOf("perimeter") > -1 || f.indexOf("objectid") > -1 || f.indexOf("_") == f.length - 1 || f.indexOf("_i") == f.length - 2) {
        visible = false;
      }
      if (item.type in integer) {
        format = {
          places        :0,
          digitSeparator:true
        };
      } else if (item.type in decimal) {
        format = {
          places        :2,
          digitSeparator:true
        };
      } else if (item.type in dt) {
        format = {
          dateFormat:'shortDateShortTime'
        };
      }
    }

    return dojo.mixin({}, {
      fieldName        :item.name,
      label            :item.alias,
      isEditable       :false,
      tooltip          :"",
      visible          :visible,
      format           :format,
      stringFieldOption:'textbox'
    });
  }));

  var popupInfo = {
    title          :displayField ? '{' + displayField + '}' : '',
    fieldInfos     :fieldInfos,
    description    :null,
    showAttachments:false,
    mediaInfos     :[]
  };
  return popupInfo;
}

function buildInfoTemplate(popupInfo) {
  var json = {
    content:"<table>"
  };

  dojo.forEach(popupInfo.fieldInfos, function (field) {
    if (field.visible) {
      json.content += "<tr><td valign='top'>" + field.label + ": <\/td><td valign='top'>${" + field.fieldName + "}<\/td><\/tr>";
    }
  });
  json.content += "<\/table>";
  return json;
}

function clearAll() {
  map.graphics.clear();
  var layerIds = map.graphicsLayerIds.slice(0);
  layerIds = layerIds.concat(map.layerIds.slice(1));

  dojo.forEach(layerIds, function (layerId) {
    map.removeLayer(map.getLayer(layerId));
  });
}

function getSeparator(string) {
  var separators = [",", "      ", ";", "|"];
  var maxSeparatorLength = 0;
  var maxSeparatorValue = "";
  dojo.forEach(separators, function (separator) {
    var length = string.split(separator).length;
    if (length > maxSeparatorLength) {
      maxSeparatorLength = length;
      maxSeparatorValue = separator;
    }
  });
  return maxSeparatorValue;
}

function zoomToData(featureLayer) {
  // Zoom to the collective extent of the data
  var multipoint = new esri.geometry.Multipoint(map.spatialReference);
  dojo.forEach(featureLayer.graphics, function (graphic) {
    var geometry = graphic.geometry;
    if (geometry) {
      multipoint.addPoint({
        x:geometry.x,
        y:geometry.y
      });
    }
  });

  if (multipoint.points.length > 0) {
    map.setExtent(multipoint.getExtent().expand(1.25), true);
  }
}

//File upload for older browsers
function uploadFile(files) {
  if (files && files.length === 1) {
    console.log("handle files");
    handleCsv(files[0]);
  } else {
    dojo.byId("status").innerHTML = "Uploading";
    var requestHandle = esri.request({
      url  :"http://serverapi.arcgisonline.com/demos/csv/reflect.ashx",
      form :dojo.byId("uploadForm"),
      load :requestSucceeded,
      error:requestFailed
    });
  }
}

function requestSucceeded(response) {
  dojo.byId("status").innerHTML = "";
  handleCsv(response);
}

function requestFailed(error) {
  dojo.byId("status").innerHTML = 'Unable to upload';
  console.log(dojo.toJson(error));

}
</script>
</head>

<body class="claro">
<!--[if IE 7]>
<style>
  html, body {
    margin: 0;
  }
</style>
<![endif]-->
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false"
     style="width:100%; height:100%;">
  <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    <div id="title">Drag and Drop Demo</div>
  </div>
  <div data-dojo-type="dijit.layout.ContentPane" id="rightPane" data-dojo-props="region:'right'">
    <p style="padding:4px;"><span>Drag and drop services, images or a csv file with latitude/longitude information
          from windows explorer to the map.</span>

    <div id='msg' style='color:red;display:none;padding:4px;'> 'You are using a browser that
      doesn't support drag/drop use the file upload box below to add your csv:'
    </div>
    <form id="uploadForm" style='display:none;padding:4px;' method="post" enctype="multipart/form-data">
      <input type="file" name="data" id="inFile" size="15" />
    </form>
    <span id="status"></span>

    <div id="fileInfo"> </div>
    </p>
    <p style='padding:4px;'>Note: The CSV file must store the location in fields with one of the following
      names:
      <br />
      <b>latitude fields:</b>lat, latitude, y, ycenter
      <br />
      <b>longitude fields:</b>lon, long, longitude, x, xcenter
      <br />
    </p>

    <p style='padding:4px;'>To test the sample USGS provides real-time earthquake information in various
      formats, including csv. Download one of the csv files to your machine then
      drag/drop to display. Here's a test csv file for earthquakes with a magnitude
      greater than 5.
      <a target="_blank" href="data/earthquakes.csv">Recent Earthquakes</a>. Visit the USGS Latest Earthquakes: Feeds &
      Data
      <a target='_blank' href="http://earthquake.usgs.gov/earthquakes/catalogs/"> page </a>for more details.</p>
  </div>
  <div id="mapCanvas" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
    <div id="clearButton" class="roundedCorner" onclick="clearAll();">
      <span>Clear Map</span>
    </div>
  </div>
</div>
</body>

</html>

View live sample Download as a zip file

Description

Code

View live sample
Download as a zip file