Pass URLs into javascript map

DarrylHilton · ‎02-24-2020

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>

KenBuja · ‎02-24-2020

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

Egge-Jan_Pollé · ‎02-24-2020

Hi Darryl Hilton,

Did you have a look at this sample?

Filter features by attribute | ArcGIS API for JavaScript 4.14

HTH,

Egge-Jan

DarrylHilton · ‎02-24-2020

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

KenBuja · ‎02-24-2020

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;
  }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

DarrylHilton · ‎02-24-2020

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

KenBuja · ‎02-24-2020

Can you post your new code?

DarrylHilton · ‎02-24-2020

I’m away from my computer til tomorrow now (UK time) so will try again then. Roughly where should it be added?

KenBuja · ‎02-24-2020

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

DarrylHilton · ‎02-25-2020

That is perfect! Thank you