Adding Shapefile

VEERUTALREJA · ‎02-06-2013

Hello, I was actually trying to add a shapefile on the map. I was looking at this sample
http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/portal_addshapefile

but unfortunately this sample does not work..The code is broken I guess because it gives an error when i try to run the live sample and when I upload a zipped shape file,It says" shp file missing". I think there is some issue with the code in the sample.

Can anyone help me and let me know how can I get it to work. I really appreciate the help.

Thank you

Veeru

SunilPalkar · ‎02-07-2013

Hi Veeru,

Its working fine..I tried at my end..

Please let me know your code..You can put your code in JS Fiddle

VEERUTALREJA · ‎02-07-2013

<!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">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Add Shapefile</title>

    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
   
    
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
    
    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
 
 
    <script>
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("esri.dijit.Popup");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");

      dojo.ready(init);
      var map;
      var portalUrl = "http://www.arcgis.com";
   
   function init() {
   
        esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
  esri.config.defaults.io.alwaysUseProxy = false;
        dojo.connect(dojo.byId("uploadForm").data, "onchange", function (evt) {
          var fileName = evt.target.value;
    
  //filename is full path in IE so extract the file name
          var arr = fileName.split("\\");
          fileName = arr[arr.length - 1];

          if (fileName.indexOf(".zip") !== -1) {//is file a zip - if not notify user 
            generateFeatureCollection(fileName);
          }else{
            dojo.byId('upload-status').innerHTML = '<p style="color:red">Add shapefile as .zip file</p>';
         }
        });

        //create a popup to replace the map's info window
       // var popup = new esri.dijit.Popup(null, dojo.create("div"));
   var extent = new esri.geometry.Extent({"xmin": -82.982664376928,"ymin":36.9701097164086,"xmax":-77.3635190912301,
            "ymax":40.8546687287403,"spatialReference":{"wkid":4326}});
       //map = new esri.Map("mapDiv", { extent: esri.geometry.geographicToWebMercator(extent)});
    
       map = new esri.Map("mapDiv", {
          basemap: "streets",
    extent:extent
        });
      }

      function generateFeatureCollection(fileName) {
        var name = fileName;
        //Chrome and IE add c:\fakepath to the value - we need to remove it
        //See this link for more info: http://davidwalsh.name/fakepath
        //name = name[0].replace("C:\\fakepath\\","");
 
        
        dojo.byId('upload-status').innerHTML = '<b>Loading </b>' + name; 
        
        //Define the input params for generate see the rest doc for details
        //http://www.arcgis.com/apidocs/rest/index.html?generate.html
        var params = {
          'name': name,
          'targetSR': map.spatialReference,
          'maxRecordCount': 1000,
          'enforceInputFileSizeLimit': true,
          'enforceOutputJsonSizeLimit': true
        };

        //generalize features for display Here we generalize at 1:40,000 which is approx 10 meters 
        //This should work well when using web mercator.  
        var mapextent = esri.geometry.getExtentForScale(map,40000); 
        var resolution = mapextent.getWidth() / map.width;
        params.generalize = true;
        params.maxAllowableOffset = resolution;
        params.reducePrecision = true;
        params.numberOfDigitsAfterDecimal = 0;
        
        var myContent = {
          'filetype': 'shapefile',
          'publishParameters': dojo.toJson(params),
          'f': 'json',
          'callback.html': 'textarea'
        };
  console.log(myContent);
  
        //use the rest generate operation to generate a feature collection from the zipped shapefile 
         
          esri.request({
     url: portalUrl + '/sharing/rest/content/features/generate',
          content: myContent,
          form: dojo.byId('uploadForm'),
          handleAs: 'json',
          load: dojo.hitch(this, function (response) {
            if (response.error) {
              errorHandler(response.error);
              return;
            }
            dojo.byId('upload-status').innerHTML = '<b>Loaded: </b>' + response.featureCollection.layers[0].layerDefinition.name;
            addShapefileToMap(response.featureCollection);
          }),
          error: dojo.hitch(this, errorHandler)
        });
      }

      function errorHandler(error) {
        dojo.byId('upload-status').innerHTML = "<p style='color:red'>" + error.message + "</p>";
      }

      function addShapefileToMap(featureCollection) {
        //add the shapefile to the map and zoom to the feature collection extent
        //If you want to persist the feature collection when you reload browser you could store the collection in 
        //local storage by serializing the layer using featureLayer.toJson()  see the 'Feature Collection in Local Storage' sample
        //for an example of how to work with local storage. 
        var fullExtent;
        var layers = [];

        dojo.forEach(featureCollection.layers, function (layer) {
          var infoTemplate = new esri.InfoTemplate("Details", "${*}");
          var layer = new esri.layers.FeatureLayer(layer, {
            infoTemplate: infoTemplate
          });
          //associate the feature with the popup on click to enable highlight and zoomto
          dojo.connect(layer,'onClick',function(evt){
            map.infoWindow.setFeatures([evt.graphic]);
          });
          //change default symbol if desired. Comment this out and the layer will draw with the default symbology
          changeRenderer(layer);
          fullExtent = fullExtent ? fullExtent.union(layer.fullExtent) : layer.fullExtent;
          layers.push(layer);
        });
        map.addLayers(layers);
        map.setExtent(fullExtent.expand(1.25), true);
        
        dojo.byId('upload-status').innerHTML = "";
      }

      function changeRenderer(layer) {
        //change the default symbol for the feature collection for polygons and points
        var symbol = null;
        switch (layer.geometryType) {
        case 'esriGeometryPoint':
          symbol = new esri.symbol.PictureMarkerSymbol({
            'angle':0,
            'xoffset':0,
            'yoffset':0,
            'type':'esriPMS',
            'url':'http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png',
            'contentType':'image/png',
            'width':20,
            'height':20
          });
          break;
        case 'esriGeometryPolygon':
          symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([112, 112, 112]), 1), new dojo.Color([136, 136, 136, 0.25]));
          break;
        }
        if (symbol) {
          layer.setRenderer(new esri.renderer.SimpleRenderer(symbol));
        }
      }
    </script>
  </head>
  
  <body class="claro">
    <div id="mainWindow" dojotype="dijit.layout.BorderContainer" style="width:100%; height:100%;">
      <div dojotype="dijit.layout.ContentPane" id="rightPane">
        <div style='padding-left:4px;'>
          <p>
            Add a zipped shapefile to the map.</p><p>Visit the
            <a target='_blank' href="http://help.arcgis.com/en/arcgisonline/help/#/About_shapefiles/010q000000m2000000"/>About Shapefiles</a> help topic for information and limitations.</p>
              <form enctype="multipart/form-data" method="post" id="uploadForm">
              <div class="field">
                  <label class="file-upload">
                      <span><strong>Add File</strong></span>
                      <input type="file" name="file" id="inFile" />
                  </label>
              </div>
              </form>
              <span class="file-upload-status" style="opacity:1;" id="upload-status"></span>
              <div id="fileInfo"> </div>
        </div>
    </div>
    <div id="mapDiv" style="height:500px; width:500px; border:1px solid black"></div>
  </div>
</body>

</html>

This is the code that I have used...
The JSfiddle for the link is given below...
http://jsfiddle.net/veeru1984/QNQuC/2/

Let me know...

Veeru Talreja