Hello,
I tried to develope a map with JS API4 that shows several features depending on the used url.
So if you call "https://serverurl/Map.html?fs=Feature1 i would like the map to zoom to that features.
My problem is, that the map doesn't zoom to the feature. I think it could be a spatial reference problem but i'm not able to fix it.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Bebauungsplan Protoyp API4</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</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/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/ImageryLayer",
"esri/widgets/LayerList",
"esri/widgets/Search",
"esri/portal/Portal",
"esri/layers/Layer",
"esri/layers/MapImageLayer",
"esri/layers/ImageryLayer",
"esri/Basemap",
"esri/geometry/Extent",
"esri/geometry/SpatialReference"
], function(
Map,
MapView,
FeatureLayer,
ImageryLayer,
LayerList,
Search,
Portal,
Layer,
MapImageLayer,
ImageryLayer,
Basemap,
Extent,
SpatialReference
)
{
if ('URLSearchParams' in window) { // Feature detection (URLSearchParams is not supported by Internet Explorer)
var url = new URL(document.URL);
var search_params = url.searchParams;
if(search_params.has('fs')) {
var url_bplan = search_params.get('fs');
var expr = "bemerkung = '"+url_bplan+"'";
} else {
expr1 = "leer";
}
};
var bplan_feature = new FeatureLayer({
url: "https://serverurl/FeatureServer/1",
outFields: ["*"],
definitionExpression : expr,
title : "Layer",
});
var baselayer = new ImageryLayer({
// URL to the imagery service
url: "https://serverurl/ImageServer",
wkid: 25832
});
var basemap = new Basemap({
baseLayers: [baselayer],
title: "Luftbild 2020"
})
var map = new Map({
basemap: basemap,
});
var view = new MapView({
container: "viewDiv",
map: map
});
map.add(bplan_feature);
view.goTo(bplan_feature);
//add layerlist
var layerList = new LayerList({
view: view,
selectionEnabled : true
});
view.ui.add(layerList, {
position: "top-right",
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
What you see is just a part of the script but I think one can see the problem. Using the goTo Method results in nothing. Features and Basemap are all in 25832 UTM
Thanks for your help
Solved! Go to Solution.
You also have to wait until the featureLayer is created:
view.whenLayerView(featureLayer)
.then(() => {
view.goTo(featureLayer.fullExtent);
});
The target property of view.goTo has to be a lat/long, a geometry, a graphic, or a Viewpoint. You're providing it a FeatureLayer. Try
view.goTo(bplan_feature.fullExtent);
Thanks for your reply!
I tried that already but still the same behaviour. The coordinate-system is projected, does that affect?
You also have to wait until the featureLayer is created:
view.whenLayerView(featureLayer)
.then(() => {
view.goTo(featureLayer.fullExtent);
});
Thanks,
now it works when using the topo-vector basemap. But it still doesn`t work when using the custom basemap.
It looks like you'll have to project the extent to the basemap's spatial reference using GeometryService
Using the following code snippet resulted in succes!
view.whenLayerView(bplan_feature).then(function(layerView) {
layerView.watch("updating", function(val) {
// wait for the layer view to finish updating
if (!val) {
layerView.queryExtent().then(function(response) {
// go to the extent of all the graphics in the layer view
view.goTo(response.extent);
});
}
});
});
Thanks for your help KenBuja!