Using a WebMap , and individual service layers

LauraBusolo2 — Tue, 02 May 2017 05:48:20 GMT

I'm trying to use the JS API (3.20), and I'd like to leverage the popups from my webmap, in my application. How do I do that, as I'm currently displaying the layers, in my code (without using the webMap). Let me make that more clearer- Can I use my web map without referring to individual layers in my code, with the .addLayers method? I'm pretty new to programming. If so, How?

And, if calling/using a webmap (only) is possible, can I still be able to query layers in the webmap?

How?

Help!

Re: Using a WebMap , and individual service layers

RobertScheitlin__GISP — Fri, 10 Dec 2021 20:44:22 GMT

Laura,

Here is a sample that uses a web map and uses a layer in that web map to add to the Search widgets sources:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Create web map from id</title>

  <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
    }

    body {
      background-color: :#666666;
      overflow: hidden;
      font-family: "Verdana", serif;
    }

    #header {
      -moz-border-radius: 5px;
      margin: 2px;
      padding-top: 4px;
      padding-left: 15px;
      background-color: #666666;
      color: #cccccc;
      font-size: 9pt;
      font-weight: bold;
      border: solid 20px ##227AB4;
      height: 45px;
    }

    #rightPane {
      margin-left: 3px;
      padding: 10px;
      background-color: white;
      color: #33333;
      border: solid 1px #959595;
      width: 20%;
    }

    #map {
      margin: 0px;
      height: 100%;
      width: 100%
    }

    .shadow {
      -o-border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      box-shadow: 8px 8px 16px #323834;
      -webkit-box-shadow: 8px 8px 16px #323834;
      -moz-box-shadow: 8px 8px 16px #323834;
      -o-box-shadow: 8px 8px 16px #323834;
    }

    #search {
      display: block;
      position: absolute;
      z-index: 99;
      top: 103px;
      left: 74px;
    }
  </style>
  <script src="https://js.arcgis.com/3.20/"></script>
  <script>
    require([
      "dojo/parser",
      "dojo/ready",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dojo/dom",
      "esri/map",
      "esri/urlUtils",
      "esri/arcgis/utils",
      "esri/dijit/Legend",
      "esri/dijit/Scalebar",
      "esri/tasks/query",
      "esri/tasks/QueryTask",
      "esri/dijit/Search",
      "esri/InfoTemplate",
      "dojo/domReady!"
    ], function(
      parser,
      ready,
      BorderContainer,
      ContentPane,
      dom,
      Map,
      urlUtils,
      arcgisUtils,
      Legend,
      Scalebar,
      Query,
      QueryTask,
      Search,
      InfoTemplate
    ) {
      ready(function() {
        parser.parse();
        arcgisUtils.createMap("ef9c7fbda731474d98647bebb4b33c20", "map").then(function(response) {
          //update the app
          dom.byId("title").innerHTML = response.itemInfo.item.title;
          dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;
          var map = response.map;

          var webmapLayers = arcgisUtils.getLegendLayers(response);

          var search = new Search({
            enableButtonMode: true, //this enables the search widget to display as a single button
            enableLabel: false,
            enableInfoWindow: true,
            showInfoWindowOnSelect: false,
            map: map
          }, "search");

          var sources = search.get("sources");
          console.info(webmapLayers);

          sources.push({
            featureLayer: webmapLayers[1].layer,
            searchFields: ["NAME"],
            displayField: "NAME",
            exactMatch: false,
            outFields: ["NAME", "STATE", "COUNTY_NAM"],
            name: "High Cost Loans by County Name",
            placeholder: "Calhoun",
            maxResults: 6,
            maxSuggestions: 6,

            //Create an InfoTemplate and include three fields
            infoTemplate: new InfoTemplate("High Cost Loans", "State: ${STATE}</br>Name: ${NAME}</br>County: ${COUNTY_NAM}"),
            enableSuggestions: true,
            minCharacters: 0
          });

          //Set the sources above to the search widget
          search.set("sources", sources);

          search.startup();

          //add the scalebar
          var scalebar = new Scalebar({
            map: map,
            scalebarUnit: "english"
          });

          var legendDijit = new Legend({
            map: map,
            layerInfos: webmapLayers
          }, "legend");
          legendDijit.startup();
        });
      });
    });
  </script>
</head>

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
    <div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
      <div id="title"></div>
      <div id="subtitle"></div>
    </div>
    <div id="search"></div>
    <div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
    <div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
      <div id="legend"></div>
    </div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Using a WebMap , and individual service layers

LauraBusolo2 — Tue, 02 May 2017 20:15:03 GMT

Hey Robert,

Thank you. I still don't see where you've defined the layer variable... How has this line defined the actual layer service?

var webmapLayers = arcgisUtils.getLegendLayers(response)

Also, I'm specifically looking for one where I can query, and not really search...but same concept of using both WebMap and the layers. I'd like to know if there's a way to do so without the "arcgisUtils" method.

Thanks!

Re: Using a WebMap , and individual service layers

RobertScheitlin__GISP — Tue, 02 May 2017 20:39:33 GMT

Laura,

Why do you have a requirement to not use arcgisUtils?... That is the normal method of working with web maps in the JS API.

Using the arcgisUtils to parse the web map allows you to get to the web maps layers and thus the actual layer objects which can be used in a queryTask or the like.

Re: Using a WebMap , and individual service layers

LauraBusolo2 — Tue, 02 May 2017 21:06:51 GMT

Oh, Ok! Let me try that.

topic Re: Using a WebMap , and individual service layers in ArcGIS JavaScript Maps SDK Questions

Using a WebMap , and individual service layers

Re: Using a WebMap , and individual service layers

Re: Using a WebMap , and individual service layers

Re: Using a WebMap , and individual service layers

Re: Using a WebMap , and individual service layers