Using a WebMap , and individual service layers

334
4
05-01-2017 10:48 PM
LauraBusolo2
New Contributor III

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!

Tags (2)
0 Kudos
4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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>
0 Kudos
LauraBusolo2
New Contributor III

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!

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
LauraBusolo2
New Contributor III

Oh, Ok! Let me try that.

0 Kudos