I used ArcGis Online to create a map and I also created a layer which highlights all the different parts (gemeenten).
I use the portalItem for the basemap and then the featureLayer for extra layer.
In code I then use a SQL expression to filter out the correct part (gemeente) so it is highlighted on the map.
However..I don't get the zoom option to work. I would like to zoom more in the highlighted part and get it centered on the page. I have tried with the zoom option on my MapView but that doesn't do the trick.
Any help is appreciated. Here is the code so far:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Search widget with custom source - 4.11</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet"
href="https://js.arcgis.com/4.11/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
//*** ADD ***//
"esri/WebMap",
"esri/views/MapView",
"esri/widgets/ScaleBar",
"esri/layers/FeatureLayer"
], function (WebMap, MapView, ScaleBar, FeatureLayer) {
//*** ADD ***//
var map = new WebMap({
portalItem: {
id: "8047aff130794b7fbc991fd1ac12ecf7"
}
});
var featureLayer = new FeatureLayer({
url: "https://services7.arcgis.com/c7P8EHq0LFjkXc7L/arcgis/rest/services/Shapefile_Gemeente/FeatureServer",
outFields: ["*"], // Return all fields so it can be queried client-side,
opacity:1
});
var sql = "NISCODE like '46014'";
featureLayer.definitionExpression = sql
map.add(featureLayer);
//*** ADD ***//
var view = new MapView({
container: "viewDiv",
map: map,
});
//SCALEBAR//
var scalebar = new ScaleBar({
view: view,
unit: 'metric'
});
view.ui.add(scalebar, "bottom-left");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
