Hi
I have seen a couple of similar questions but can't seem to get the answers to fit mine, I have to admit I am new to this and this is the first map I have created this way so apologies if this is basic stuff (I have training booked in).
I have built a map which uses some data, filters it and zooms to those records when loaded. I want the filter term to be controlled by a URL parameter, so if go to www.mysite.com?filter=AreaA it applies that, filters and zooms. The code I have so far is:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>DH Test Map</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.14/"></script>
<script>
require([
"esri/WebMap",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/core/urlUtils",
"esri/tasks/support/Query"
], function(WebMap, MapView, FeatureLayer, urlUtils, Query) {
var impactedPropertiesLayer = new FeatureLayer({
url: "https://MYARCGISSERVER/arcgis/rest/services/Test/IMAffectProperties/MapServer/0",
definitionExpression: "Locality='AreaA'", ***<this is where the filter is hardcoded at the moment***
popupTemplate: { title: "{UPRN}", content: "{ADDRESS}"},
});
impactedPropertiesLayer.when(function() {
return impactedPropertiesLayer.queryExtent();
}).then(function(response) {
view.goTo(response.extent);
});
var webmap = new WebMap({
portalItem: {
id: "**PortalID of my base maps redacted**"
}
});
var view = new MapView({
container: "viewDiv",
map: webmap
});
webmap.add(impactedPropertiesLayer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Solved! Go to Solution.
This is untested, but something like
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>DH Test Map</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.14/"></script>
<script>
require([
"esri/WebMap",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/core/urlUtils",
"esri/tasks/support/Query"
], function(WebMap, MapView, FeatureLayer, urlUtils, Query) {
var urlObject = urlUtils.urlToObject(document.location.href);
var filter = null, exp = null;
if (urlObject.query !== null) {
if (urlObject.query.filter) {
filter = urlObject.query.filter;
}
}
if (filter !== null) {
exp = "Locality = '" + filter + "'";
}
var impactedPropertiesLayer = new FeatureLayer({
url: "https://MYARCGISSERVER/arcgis/rest/services/Test/IMAffectProperties/MapServer/0",
definitionExpression: exp
popupTemplate: { title: "{UPRN}", content: "{ADDRESS}"},
});
impactedPropertiesLayer.when(function() {
return impactedPropertiesLayer.queryExtent();
}).then(function(response) {
view.goTo(response.extent);
});
var webmap = new WebMap({
portalItem: {
id: "**PortalID of my base maps redacted**"
}
});
var view = new MapView({
container: "viewDiv",
map: webmap
});
webmap.add(impactedPropertiesLayer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Hi Darryl Hilton,
Did you have a look at this sample?
Filter features by attribute | ArcGIS API for JavaScript 4.14
HTH,
Egge-Jan
Hi...I am OK with the basic filtering. I need the filter condition to be taken from the URL parameters however as people will be linking to this from elsewhere
You can use the urlToObject method of urlUtils to pass items from the url into your code
This is how I get the item "id" from a url like www.mysite.com?id=AreaA Note that the function checks whether the url parameter exists before returning it.
function getUrlVariable() {
var urlObject = urlUtils.urlToObject(document.location.href);
if (urlObject.query === null) { return null; }
if (urlObject.query.id) {
return urlObject.query.id;
} else {
return null;
}
}
Hi Ken...thanks for that. I have tried using that but I can not seem to get it working, I think I must be putting it in the wrong place. I am either getting errors, or it is wiping my map out completely to a white page
Can you post your new code?
I’m away from my computer til tomorrow now (UK time) so will try again then. Roughly where should it be added?
This is untested, but something like
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>DH Test Map</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.14/"></script>
<script>
require([
"esri/WebMap",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/core/urlUtils",
"esri/tasks/support/Query"
], function(WebMap, MapView, FeatureLayer, urlUtils, Query) {
var urlObject = urlUtils.urlToObject(document.location.href);
var filter = null, exp = null;
if (urlObject.query !== null) {
if (urlObject.query.filter) {
filter = urlObject.query.filter;
}
}
if (filter !== null) {
exp = "Locality = '" + filter + "'";
}
var impactedPropertiesLayer = new FeatureLayer({
url: "https://MYARCGISSERVER/arcgis/rest/services/Test/IMAffectProperties/MapServer/0",
definitionExpression: exp
popupTemplate: { title: "{UPRN}", content: "{ADDRESS}"},
});
impactedPropertiesLayer.when(function() {
return impactedPropertiesLayer.queryExtent();
}).then(function(response) {
view.goTo(response.extent);
});
var webmap = new WebMap({
portalItem: {
id: "**PortalID of my base maps redacted**"
}
});
var view = new MapView({
container: "viewDiv",
map: webmap
});
webmap.add(impactedPropertiesLayer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
That is perfect! Thank you