This sample shows how to create a client-side FeatureLayer from a shapefile.
To run the sample, download the shapefile using the Expand widget in the top right, then add the zipped file.
See the Create a FeatureLayer with client-side graphics sample for more information about creating a FeatureLayer from other data sources.
<!doctype html><html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <title>Create a FeatureLayer from a shapefile | Sample | ArcGIS Maps SDK for JavaScript</title> <style> html, body, #viewDiv { height: 100%; margin: 0; } #mainWindow { padding: 0.5em; background-color: #fff; } #mainWindow p, #uploadForm { display: block; padding: 0.1em; } </style>
<link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" /> <!-- Load the ArcGIS Maps SDK for JavaScript from CDN --> <script type="module" src="https://js.arcgis.com/5.0/"></script>
<script type="module"> const [Map, MapView, Expand, request, FeatureLayer, Field, Graphic] = await $arcgis.import([ "@arcgis/core/Map.js", "@arcgis/core/views/MapView.js", "@arcgis/core/widgets/Expand.js", "@arcgis/core/request.js", "@arcgis/core/layers/FeatureLayer.js", "@arcgis/core/layers/support/Field.js", "@arcgis/core/Graphic.js", ]);
const portalUrl = "https://www.arcgis.com";
document.getElementById("uploadForm").addEventListener("change", (event) => { const fileName = event.target.value.toLowerCase();
if (fileName.indexOf(".zip") !== -1) { //is file a zip - if not notify user generateFeatureCollection(fileName); } else { document.getElementById("upload-status").innerHTML = '<p style="color:red">Add shapefile as .zip file</p>'; } });
const map = new Map({ basemap: "dark-gray-vector", });
const view = new MapView({ center: [-41.647, 36.41], zoom: 2, map: map, container: "viewDiv", popup: { defaultPopupTemplateEnabled: true, }, });
const fileForm = document.getElementById("mainWindow");
const expand = new Expand({ expandIcon: "upload", view: view, content: fileForm, });
view.ui.add(expand, "top-right");
function generateFeatureCollection(fileName) { let name = fileName.split("."); // Chrome adds c:\fakepath to the value - we need to remove it name = name[0].replace("c:\\fakepath\\", "");
document.getElementById("upload-status").innerHTML = "<b>Loading </b>" + name;
// define the input params for generate see the rest doc for details // https://developers.arcgis.com/rest/users-groups-and-items/generate.htm const params = { name: name, targetSR: view.spatialReference, maxRecordCount: 1000, enforceInputFileSizeLimit: true, enforceOutputJsonSizeLimit: true, };
// generalize features to 10 meters for better performance params.generalize = true; params.maxAllowableOffset = 10; params.reducePrecision = true; params.numberOfDigitsAfterDecimal = 0;
const myContent = { filetype: "shapefile", publishParameters: JSON.stringify(params), f: "json", };
// use the REST generate operation to generate a feature collection from the zipped shapefile request(portalUrl + "/sharing/rest/content/features/generate", { query: myContent, body: document.getElementById("uploadForm"), responseType: "json", }) .then((response) => { const layerName = response.data.featureCollection.layers[0].layerDefinition.name; document.getElementById("upload-status").innerHTML = "<b>Loaded: </b>" + layerName; addShapefileToMap(response.data.featureCollection); }) .catch(errorHandler); }
function errorHandler(error) { document.getElementById("upload-status").innerHTML = "<p style='color:red;max-width: 500px;'>" + 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 let sourceGraphics = [];
const layers = featureCollection.layers.map((layer) => { const graphics = layer.featureSet.features.map((feature) => { return Graphic.fromJSON(feature); }); sourceGraphics = sourceGraphics.concat(graphics); const featureLayer = new FeatureLayer({ objectIdField: "FID", source: graphics, fields: layer.layerDefinition.fields.map((field) => { return Field.fromJSON(field); }), }); return featureLayer; // associate the feature with the popup on click to enable highlight and zoom to }); map.addMany(layers); view.goTo(sourceGraphics).catch((error) => { if (error.name != "AbortError") { console.error(error); } });
document.getElementById("upload-status").textContent = ""; } </script> </head>
<body> <div id="mainWindow"> <div> <div style="padding-left: 4px"> <p> Download shapefile from <a href="https://bsvensson.github.io/various-tests/shp/drp_county_boundary.zip" >here.</a > </p> <p>Add a zipped shapefile to the map.</p> <p> Visit the <a target="_blank" href="https://doc.arcgis.com/en/arcgis-online/reference/shapefiles.htm" >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> <div id="viewDiv"></div> </body></html>