customized popup

NedaPeiravian — Sat, 29 Apr 2017 20:22:29 GMT

Re: customized popup

RobertScheitlin__GISP — Sun, 12 Dec 2021 07:00:14 GMT

Neda,

So this seems like what you are after then:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Interactive web map for CSULB Trees dataset</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
  <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.3/"></script>
  <script>
    var searchResults;
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/geometry/Extent",
      "esri/renderers/SimpleRenderer",
      "esri/symbols/PictureMarkerSymbol",
      "esri/layers/FeatureLayer",
      "esri/widgets/Search",
      "esri/widgets/Legend",
      "esri/widgets/ScaleBar",
      "esri/widgets/Home",
      "dojo/domReady!"
    ], function(Map, MapView,
      Extent, SimpleRenderer,
      PictureMarkerSymbol,
      FeatureLayer, Search,
      Legend, ScaleBar, Home) {

      var map = new Map({
        basemap: "gray"
      });

      var initialExtent = new Extent({
        xmin: -118.13,
        xmax: -118.1,
        ymin: 33.77,
        ymax: 33.79
        //spatialReference: 102100
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 15,
        center: [-118.114090, 33.783823],
        extent: initialExtent
      });

      var treeRenderer = new SimpleRenderer({
        symbol: new PictureMarkerSymbol({
          url: "http://www.clker.com/cliparts/e/d/8/f/1206581914343605633nicubunu_RPG_map_symbols_tree_8.svg.hi.png",
          width: 9,
          height: 9,
          angle: 0
        })
      });

      var campus = new FeatureLayer({
        url: "http://services3.arcgis.com/vq5vGR4r1YX7ueLg/arcgis/rest/services/CampusTreeLayers/FeatureServer/1?token=R1VkseUaX5VeH-vBErTZrlB5cmP-sbvkiphjqt_QYJa6Vf2-5vtfczfMBZGc9qO2yu4lq1UclgeUo2fwnCytdDGlO658prv_BClf2E9tQaUuF8kfOJmsz66WSPyMn93DUz11f_gLn7O8EbtItskZPytYN6Q6LSzQ6Z2oYc6va9o8TjRcFgQRfMYT9VPjzKjBwIFMzhVpZw57KldjDdiNHAX4g2EvQ3-vJTBBZdVJ7H0."
      });
      map.add(campus);

      var tree = new FeatureLayer({
        url: "http://services3.arcgis.com/vq5vGR4r1YX7ueLg/arcgis/rest/services/CampusTreeLayers/FeatureServer/0?token=R1VkseUaX5VeH-vBErTZrlB5cmP-sbvkiphjqt_QYJa6Vf2-5vtfczfMBZGc9qO2yu4lq1UclgeUo2fwnCytdDGlO658prv_BClf2E9tQaUuF8kfOJmsz66WSPyMn93DUz11f_gLn7O8EbtItskZPytYN6Q6LSzQ6Z2oYc6va9o8TjRcFgQRfMYT9VPjzKjBwIFMzhVpZw57KldjDdiNHAX4g2EvQ3-vJTBBZdVJ7H0.",
        outFields: ["*"],
        renderer: treeRenderer
      });
      map.add(tree);

      var search = new Search({
        view: view,

        sources: [{
          autoselect: false,
          popupOpenOnSelect: false,
          featureLayer: tree,
          searchFields: ["objectid", "common_name"],
          displayField: "objectid",
          exactMatch: false,
          outFields: ["objectid", "common_name"],
          name: "Tree FS",
          placeholder: "Object ID or Tree Name",
          maxResults: 6,
          maxSuggestions: 6,
          minSuggestCharacters: 1
        }]
      });
      view.ui.add(search, "top-right");

      search.viewModel.on("search-complete", function(event) {
        searchResults = event.results[0].results;

        document.getElementById('title').style.visibility = "visible";
        pagenum = searchResults.length / 10;
        if(!Number.isInteger(pagenum)){
          pagenum++;
        }
        pagehtml = "";
        for (x = 1; x <= pagenum; x++) {
          pagehtml += "<a id='page" + x +"' href='#' style='margin-right:5px;' onClick='gotoresultspage(this.innerHTML)'>" + x + "</a>";
        }
        pagehtml += "<div id='resultstable'></div>";

        document.getElementById('title').innerHTML = pagehtml;
        gotopage = 1;
        gotoresultspage(gotopage);
      });

      var legend = new Legend({
        view: view,
      });
      view.ui.add(legend, "bottom-left");

      var scaleBar = new ScaleBar({
        view: view,
        unit: "non-metric"
      });
      view.ui.add(scaleBar, {
        position: "bottom-left"
      });

      var homeBtn = new Home({
        view: view
      });
      view.ui.add(homeBtn, "top-left");

    });

    function gotoresultspage(gotopage) {
      var table = document.getElementById("resultstable");
      var tableCode = "<table style='width:100%'>";
      var en = gotopage * 10, bn = en - 10;
      for (x = bn; x < en; x++){
        if(!searchResults[x]){
          objid = commonname = " "
        }else{
          commonname = searchResults[x].feature.attributes.common_name;
          objid = searchResults[x].name;
        }
        tableCode += "<tr><td>" + objid + "</td><td>" + commonname + "</td></tr>";
      }
      tableCode += "</table>";
      table.innerHTML = tableCode;
    }
  </script>
</head>

<body>
  <div id="title" style="visibility:hidden; margin-left:auto; margin-right:auto; position:absolute; z-index:10; width:300px; height:230px; background-color:#ffffff; text-align:center; float:center;">title</div>
  <div id="viewDiv"></div>
</body>

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

Re: customized popup

NedaPeiravian — Sun, 30 Apr 2017 03:38:22 GMT

Yes Robert, Thank you very much.

Re: customized popup

NedaPeiravian — Thu, 04 May 2017 22:31:55 GMT

Hi Robert,

I am trying to link the template to the search table, can you please tell me what is the best way to do that? I couldn't find any properties. this is my first project that using javascript and API.

Re: customized popup

RobertScheitlin__GISP — Thu, 04 May 2017 22:34:47 GMT

Neda,

What is the "template"? What do you mean link them?

Re: customized popup

NedaPeiravian — Thu, 04 May 2017 22:45:21 GMT

I have a template which you can find in my code, and I mean when clicking on one of the search results in the search table, how it can show this template?

Re: customized popup

RobertScheitlin__GISP — Fri, 05 May 2017 11:19:30 GMT

Neda,

What you are asking is no small task. You are currently just building a simple html table with paging. So first you would have to attach click events to each row and have it return the ObjectId so that you can search the FeatureLayer to get the graphic based on the ObjectId and then set the graphics popuptemplate based on your template and show the view popup using that grapic.

topic Re: customized popup in ArcGIS JavaScript Maps SDK Questions

customized popup

Re: customized popup

Re: customized popup

Re: customized popup

Re: customized popup

Re: customized popup

Re: customized popup