add shape file javascript

4762
2
Jump to solution
03-03-2015 02:01 AM
yousofothman
New Contributor III

i cant add a shape file to the map

can any one tell me what is error here

it not display any error but also it dose not add file to the map

this is my code"

 

////////////////////////

  _addShapeFile: function (tool, toolbar, panelClass) {

 

 

 

 

 

 

            var ShapeFileDiv = toolbar.createTool(tool, panelClass);

            domStyle.set(ShapeFileDiv, {

                "height": "100%",

                "width": "100%"

            });

            //var newDiv1 = document.createElement("div");

 

 

            //document.getElementById("newDiv1").appendChild(ShapeFileDiv);

            ////newDiv1.appendChild(ShapeFileDiv);

            var file = document.createElement("INPUT");

            file.setAttribute("type", "file");

 

 

            var uploadForm = dojo.place("<form> Add shapefile as .zip file </form>", ShapeFileDiv);

 

 

            domConstruct.place(file, uploadForm);

 

 

            var ShapeFilebutton = domConstruct.create("button", {

                innerHTML: "Add FIle ",

                className: "button",

                type: "button",

                style: { color: "red" }

            }, domConstruct.create("div", {

                "class": "button11"

            }));

            domConstruct.place(ShapeFilebutton, ShapeFileDiv);

            on(ShapeFilebutton, "click", function () {

 

 

                parser.parse();

                map = maps;

                var portalUrl = "http://www.arcgis.com";

 

 

                esriConfig.defaults.io.proxyUrl = "/proxy/";

                //1

                // on(dom.byId("x"), "change", function (event) {

                // var fileName = event.target.value.toLowerCase();

                var fileName = file.value;

                if (sniff("ie")) { //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);

                }

                    //2

                else {

 

 

                }

                // });

 

 

             

 

 

                function generateFeatureCollection(fileName) {

                    var name = fileName.split(".");

                    //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\\", "");

                    //3

 

 

                

                    //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 extent = scaleUtils.getExtentForScale(map, 40000);

                    var resolution = extent.getWidth() / map.width;

                    params.generalize = true;

                    params.maxAllowableOffset = resolution;

                    params.reducePrecision = true;

                    params.numberOfDigitsAfterDecimal = 0;

 

 

                    var myContent = {

                        'filetype': 'shapefile',

                        'publishParameters': JSON.stringify(params),

                        'f': 'json',

                        'callback.html': 'textarea'

                    };

 

 

                    //use the rest generate operation to generate a feature collection from the zipped shapefile

                    request({

                        url: portalUrl + '/sharing/rest/content/features/generate',

                        content: myContent,

                        form: dom.byId('uploadForm'),

                        handleAs: 'json',

                        load: lang.hitch(this, function (response) {

                            if (response.error) {

                                errorHandler(response.error);

                                return;

                            }

                            var layerName = response.featureCollection.layers[0].layerDefinition.name;

 

 

                            addShapefileToMap(response.featureCollection);

                        }),

                        error: lang.hitch(this, errorHandler)

                    });

                }

 

 

                function errorHandler(error) {

                    //dom.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 = [];

 

 

                    arrayUtils.forEach(featureCollection.layers, function (layer) {

                        var infoTemplate = new InfoTemplate("Details", "${*}");

                        var featureLayer = new FeatureLayer(layer, {

                            infoTemplate: infoTemplate

                        });

                        //associate the feature with the popup on click to enable highlight and zoom to

                        featureLayer.on('click', function (event) {

                            map.infoWindow.setFeatures([event.graphic]);

                        });

                        //change default symbol if desired. Comment this out and the layer will draw with the default symbology

                        changeRenderer(featureLayer);

                        fullExtent = fullExtent ?

                            fullExtent.union(featureLayer.fullExtent) : featureLayer.fullExtent;

                        layers.push(featureLayer);

                    });

                    map.addLayers(layers);

                    map.setExtent(fullExtent.expand(1.25), true);

                    //5

                    // dom.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 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 SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,

                                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

                                new Color([112, 112, 112]), 1), new Color([136, 136, 136, 0.25]));

                            break;

                    }

                    if (symbol) {

                        layer.setRenderer(new SimpleRenderer(symbol));

                    }

                }

                // })

 

 

            });

 

 

 

 

 

 

            //}

            //                     deferred.resolve(true);

            //                     } else {

            //                     deferred.resolve(false);

            //                     }

 

 

            //return deferred.promise;

 

 

 

 

        },

0 Kudos
1 Solution

Accepted Solutions
OwenEarley
Occasional Contributor III

Have you looked at this sample: Add shapefile | ArcGIS API for JavaScript

You can download the source as a zip file and extend it to meet your needs.

View solution in original post

2 Replies
yousofothman
New Contributor III

no one have idea??!!!

0 Kudos
OwenEarley
Occasional Contributor III

Have you looked at this sample: Add shapefile | ArcGIS API for JavaScript

You can download the source as a zip file and extend it to meet your needs.