Pass URLs into javascript map

1103
8
Jump to solution
02-24-2020 06:22 AM
DarrylHilton
New Contributor III

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>

0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Honored Contributor

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

8 Replies
Egge-JanPollé1
MVP Regular Contributor

Hi Darryl Hilton,

Did you have a look at this sample?

Filter features by attribute | ArcGIS API for JavaScript 4.14 

HTH,

Egge-Jan

0 Kudos
DarrylHilton
New Contributor III

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

0 Kudos
KenBuja
MVP Honored Contributor

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
New Contributor III

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

0 Kudos
KenBuja
MVP Honored Contributor

Can you post your new code?

DarrylHilton
New Contributor III

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

0 Kudos
KenBuja
MVP Honored Contributor

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
New Contributor III

That is perfect! Thank you

0 Kudos