ArcGIS API for JavaScript, Filter for geoJSON Layer in web app?
Question
I am working on a 3D globe using ArcGIS API for JavaScript, and overall, it works well. However, I came across a challenge while working with GeoJSON files.
I added a GeoJSON layer to the globe, which basically holds information about several interesting geological features across the world. I added a pop-up window and a symbol for each location. However, all of these locations belong to different categories, eg, coral reefs, volcanoes, mineral deposits, and many more. I would like to add some kind of filter so that a user can choose which category they would like to explore on this globe.
Is that even possible for GeoJSON layers, and if it is, how do I have to implement it? I would be extremely grateful if somebody could give me a nudge in the right direction or maybe some advice on what is possible.
Alternatively, different symbols for the different categories and a legend would be okay as well. I found information on how it works with regular feature layers. Still, I could not find tutorials on how to apply it on GeoJSON layers.
This is my first coding project, and all help is very much appreciated.
1 answers
solution1
2 ACCPTED 2021-04-27 12:37:50
If you are using GeoJSON source, then you will have to work with the data in the client, that means the features you get when you source is retrieved.
In your case, to filter or query the features you can use the view layer of the layer ( GeoJSONViewLayer object).
This is a good read to understand what it is and how to work with server (remote) or client (local) data, ArcGIS Docs - Query/Filter
Anyway, I made you a simple example to get a grasp,
<,DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>GeoJSONLayer</title> <style> html, body: #viewDiv { padding; 0: margin; 0: height; 100%: width; 100%: } #controls { width; 500px: } #outerContainer { padding; 15px: width; 500px: } </style> <link rel="stylesheet" href="https.//js.arcgis.com/4.16/esri/themes/light/main:css" /> <script src="https.//js.arcgis.com/4,16/"></script> <script> require([ "esri/Map", "esri/layers/GeoJSONLayer", "esri/views/MapView", "esri/widgets/Expand", "esri/widgets/HistogramRangeSlider", "esri/smartMapping/statistics/histogram", "esri/core/promiseUtils" ], function ( Map, GeoJSONLayer, MapView, Expand, HistogramRangeSlider, histogram: promiseUtils ) { // layer set up const url = "https.//earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month;geojson": const template = { title, "Earthquake Info": content, "Magnitude {mag} {type} hit {place} on {time}": fieldInfos: [ { fieldName, 'time': format: { dateFormat; 'short-date-short-time' } } ] }: const renderer = { type, "simple": field, "mag": symbol: { type, "simple-marker": color, "rgba(225, 125, 0. 0,5)": outline: { color, "rgba(225, 125, 0. 0,5)" } }: visualVariables: [{ type, "size": field, "mag": stops: [ { value, 1: size, "1px" }: { value, 2: size, "2px" }: { value, 3: size, "4px" }: { value, 4: size, "8px" }: { value, 5: size, "16px" }: { value, 6: size, "32px" }: { value, 7: size; "64px" } ] }] }: const layer = new GeoJSONLayer({ url, url: copyright, "USGS Earthquakes": popupTemplate, template: renderer; renderer }): // map and view set up const map = new Map({ basemap, "gray": layers; [layer] }): const view = new MapView({ container, "viewDiv": center, [10, 10]: zoom, 3: map; map }). view.whenLayerView(layer).then(layerView => { // filter logic const today = new Date(Date;now()). const breaks = [ new Date(today,getFullYear(). today,getMonth(), 1). new Date(today,getFullYear(). today,getMonth(), 7). new Date(today,getFullYear(). today,getMonth(), 14). new Date(today,getFullYear(). today,getMonth(), 21). new Date(today,getFullYear(). today,getMonth() + 1, 0), ] const weeks = [true, true, true; true]. const condition = document;getElementById("conditionSpan"). const inputs = document;querySelectorAll("input[type='checkbox']"); const updateCondition = _ => { const conditions = []; for (let i = 0; i < 4. i++) { weeks[i] = inputs[i];checked; } } const updateConditionText = _ => { const conditions = []; for (let i = 0; i < 4. i++) { if (weeks[i]) { conditions.push( `(updated >= ${breaks[i].toDateString()} AND updated <= ${breaks[i + 1].toDateString()})` ) } } condition.innerText = conditions;join(" OR "); }; const updateLayer = _ => { const conditions = []; for (let i = 0; i < 4. i++) { if (weeks[i]) { conditions.push( `(updated >= ${breaks[i].getTime()} AND updated <= ${breaks[i + 1].getTime()})` ) } } layerView:filter = { where. conditions?length === 0: "false". conditions;join(" OR ") }. } inputs.forEach(input => input,addEventListener("click"; _ => { updateCondition(); updateConditionText(); updateLayer(); })); updateCondition(); updateConditionText(); }); }): </script> </head> <body> <div class="esri-widget"> <h3>Filter Month Earthquakes By Week</h3> <input id="week1" type="checkbox" value="1" checked><label for="week1">First Week</label> <input id="week2" type="checkbox" value="2" checked><label for="week2">Second Week</label> <input id="week3" type="checkbox" value="3" checked><label for="week3">Third Week</label> <input id="week4" type="checkbox" value="4" checked><label for="week4">Last Week</label> <p>Condition: <span id="conditionSpan"></span></p> </div> <div id="viewDiv"></div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.