Hello!
We are currently doing our bachelor project and are trying to save our feature layer for later use. What is the best way for doing that? Currently, we have created 2 feature layer that we load into our application through ArcGIS services we then create a local feature layer from the 2 feature layer. We then want to save our newly made feature layer for later use. Can you post feature layers to a database? Here is how far we have come:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS API for JavaScript Tutorials: Query a feature layer (spatial)</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#layerToggle {
top: 120px;
right: 20px;
position: absolute;
z-index: 99;
background-color: white;
border-radius: 8px;
border-style: solid;
border-color: black;
padding: 10px;
opacity: 1;
}
#layerToggle1 {
top: 60px;
right: 20px;
position: absolute;
z-index: 99;
background-color: white;
border-radius: 8px;
border-width: 2px;
border-style: solid;
border-color: black;
padding: 10px;
opacity: 1;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.18/"></script>
<script>
require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/widgets/Sketch",
"esri/layers/GraphicsLayer",
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/widgets/Search",
"esri/renderers/ClassBreaksRenderer",
"esri/widgets/Legend","esri/views/SceneView",
], function(esriConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer,Graphic,Search,ClassBreaksRenderer,Legend) {
esriConfig.apiKey = "AAPKac92afe710ec4db9bf8423343102b147tLzn_6tk50TFgDBNl63Tr-44V9blp4Njp8ffo7faiUeI0K_9qJpyVRV2xLm6y2Zc";
const map = new Map({
basemap: "arcgis-topographic" //Basemap layer service
});
// the layer that we want to save for later use
var layer;
const view = new MapView({
container: "viewDiv",
map: map,
center: [ 15.4660405, 58.41607], //Longitude, latitude
zoom: 13
});
var searchWidget = new Search({
view: view
});
// Add the search widget to the top right corner of the view
view.ui.add(searchWidget, {
position: "top-left"
});
var renderer = new ClassBreaksRenderer({
type: "class-breaks",
// attribute of interest - Earthquake magnitude
field: "AREAL"
});
renderer.addClassBreakInfo({
minValue: 0,
maxValue: 10.0,
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [ 255, 128, 0, 0.4 ],
outline: {
width: 0.2,
color: [255, 5, 5, 0.5]
}
}
});
renderer.addClassBreakInfo({
minValue: 10,
maxValue: 20.0,
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [ 5, 128, 0, 0.4 ],
outline: {
width: 0.2,
color: [255, 5, 5, 0.5]
}
}
});
renderer.addClassBreakInfo({
minValue: 20,
maxValue: 100.0,
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [ 55, 28, 0, 0.4 ],
outline: {
width: 0.2,
color: [255, 5, 5, 0.5]
}
}
});
const jordblock = new FeatureLayer({
url: "https://services3.arcgis.com/CRqjw6FC9fpbCgMy/ArcGIS/rest/services/BlockKarta/FeatureServer/0",
renderer: renderer,
outFields: ["BLOCKID","REGION","KATEGORI","AREAL","AGOSLAG"],
visible: false,
});
map.add(jordblock);
// Create a symbol for rendering the graphic
var fillSymbol1 = {
type: "simple-fill",
size: "8px",// autocasts as new SimpleFillSymbol()
color: [27, 39, 79, 0.8],
outline: {
// autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 1
}
};
var selectionLayer = new GraphicsLayer();
view.on("click", function(e){
view.hitTest(e.screenPoint).then(function(response){
selectionLayer.graphics.removeAll();
response.results.forEach(function(g){
var graphic = g.graphic;
if(g.graphic){
queryFeaturelayer( g.graphic.geometry);
graphic.symbol = fillSymbol1;
selectionLayer.graphics.add(graphic);
map.add(selectionLayer);
}
});
});
});
// Reference query layer
const parcelLayer = new FeatureLayer({
url: "https://services3.arcgis.com/CRqjw6FC9fpbCgMy/ArcGIS/rest/services/Lerkarta/FeatureServer/0",
});
function queryFeaturelayer(geometry) {
const parcelQuery = {
spatialRelationship: "intersects", // Relationship operation to apply
geometry: geometry,
outFields: ["DN"],// The sketch feature geometry
// Attributes to return
returnGeometry: true
};
parcelLayer.queryFeatures(parcelQuery)
.then((results) => {
displayResults(results);
}).catch((error) => {
});
}
// Show features (graphics)
function displayResults(results) {
const defaultSym = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
outline: {
// autocasts as new SimpleLineSymbol()
color: [128, 128, 128, 0.2],
width: "0.5px"
}
};
var renderer2 = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: defaultSym, // the default symbol defined in step 1
legendOptions: {
title: "% population in poverty by county"
},// label for the legend
visualVariables: [
{
type: "color", // indicates this is a color visual variable
field: "DN", // total population in poverty
stops: [
{
value: 0, // features where < 10% of the pop in poverty
color: "#00FF00", // will be assigned this color (beige)
label: "Lerhalt 0" // label to display in the legend
},
{
value: 30, // features where < 10% of the pop in poverty
color: "#FFFF00", // will be assigned this color (beige)
label: "Lerhalt 30" // label to display in the legend
},
{
value: 60, // features where > 30% of the pop in poverty
color: "#FF0000", // will be assigned this color (purple)
label: "Lerhalt 60" // label to display in the legend
}
]
// features with values between 0.1 - 0.3 will be assigned
// a color on a ramp between beige and purple proportional
// to where the value falls between 0.1 and 0.3
}
]
};
layer = new FeatureLayer({
source: results.features,
objectIdField: "OBJECTID",
fields: [{
name: "OBJECTID",
type: "oid"
}, {
name: "DN",
type: "double"
}],
visible: false,// array of graphics objects
renderer: renderer2
});
}
var lerblockToggle = document.getElementById("layerToggle");
// Listen to the change event for the checkbox
lerblockToggle.addEventListener("click", function() {
map.add(layer);
layer.visible = true;
});
//lerblock.setSelectionSymbol(fillSymbol1);
var jordblockToggle = document.getElementById("jordblock");
// Listen to the change event for the checkbox
jordblockToggle.addEventListener("change", function() {
// When the checkbox is checked (true), set the layer's visibility to true
jordblock.visible = jordblockToggle.checked;
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="viewDiv2"> <span id="layerToggle1" class="esri-widget"> <input type="checkbox" id="jordblock" />Visa block</span></div>
<div id="viewDiv"> <button id="layerToggle" class="esri-widget" > Visa lerblock</button></div>
</body>
</html>
