topic Re: Calcite Maps Bootstrap sample - Search widget - with Multiple sources(4.8) in ArcGIS JavaScript Maps SDK Questions

Calcite Maps Bootstrap sample - Search widget - with Multiple sources(4.8)

ImtiyazPasha — Sun, 12 Aug 2018 09:08:00 GMT

ArcGIS API for JS's 4.8 - Calcite Maps Bootstrap sample - Search widget - with Multiple sources issue. Unable to shows multiple sources

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=frameworks-bootstrap

please suggest any ways solve this issue.

I am trying to achieve like the below sample.

http://esri.github.io/geodev-hackerlabs/develop/webmap_apps/create_calcite_maps_app/index.html

Re: Calcite Maps Bootstrap sample - Search widget - with Multiple sources(4.8)

RobertScheitlin__GISP — Sat, 11 Dec 2021 20:50:15 GMT

Imtiyaz,

Here is that site updated to 4.8 API:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="description" content="Calcite Maps App">
  <meta name="author" content="">
  <link rel="icon" href="http://www.esri.com/favicon.ico">
  <title>PDX Neighborhoods - Calcite Maps</title>

  <!-- Calcite Bootstrap -->
  <link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.8.css">

  <!-- Calcite Maps -->
  <link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-4.x.min-v0.8.css">

  <!-- ArcGIS JS 4.0 -->
  <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">

  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
  </style>

</head>

<body class="calcite-maps calcite-nav-top">

  <!-- Navbar -->

  <nav class="navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bg-dark calcite-bgcolor-red-75">
    <!-- Dropdown -->
    <div class="dropdown calcite-dropdown calcite-bg-light calcite-text-dark" role="presentation">
      <a class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">
        <div class="calcite-dropdown-toggle">
          <span class="sr-only">Toggle dropdown menu</span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </a>
      <ul class="dropdown-menu">
        <li><a class="visible-xs" data-target="#panelSearch" role="button" aria-haspopup="true"><span class="glyphicon glyphicon-search"></span> Search</a></li>
        <li><a role="button" data-target="#panelLegend" aria-haspopup="true"><span class="glyphicon glyphicon-list"></span> Legend</a></li>
        <li><a role="button" data-target="#panelBasemaps" aria-haspopup="true"><span class="glyphicon glyphicon-th-large"></span> Basemaps</a></li>
        <li><a role="button" id="calciteToggleNavbar" aria-haspopup="true"><span class="glyphicon glyphicon-fullscreen"></span> Toggle Title</a></li>
      </ul>
    </div>
    <!-- Title -->
    <div class="calcite-title calcite-overflow-hidden">
      <div class="calcite-title-main">2015 Portland Population Density</div>
      <span class="calcite-title-divider hidden-xs"></span>
      <div class="calcite-title-sub hidden-xs">Explore where people are living in downtown neighborhoods</div>
    </div>
    <!-- Nav -->
    <ul class="nav navbar-nav calcite-nav">
      <li><div class="calcite-navbar-search hidden-xs"><div id="searchNavDiv"></div></div></li>
    </ul>
  </nav><!--/.calcite-navbar -->

  <!-- Map Container  -->

  <div class="calcite-map map-position-absolute">
    <div id="mapViewDiv"></div>
  </div><!-- /.calcite-map -->

  <!-- Panels -->

  <div class="calcite-panels calcite-panels-right calcite-text-dark calcite-bg-light panel-group" role="tablist" aria-multiselectable="true">

    <!-- Legend Panel -->

     <div id="panelLegend" class="panel panel-default collapse">
        <div id="headingPanel" class="panel-heading" role="tab">
            <div class="panel-title">
                <a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseLegend" data-parent="#panelAccordion" aria-expanded="true" aria-controls="collapseLegend"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span><span class="panel-label">Legend</span></a>
                <a class="panel-close" role="button" data-toggle="collapse" data-target="#panelLegend"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
            </div>
        </div>
        <div id="collapseLegend" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingLegend">
            <div class="panel-body">
              <div id="legendDiv"></div>
            </div>
        </div>
    </div>

     <!-- Basemaps Panel -->

    <div id="panelBasemaps" class="panel collapse">
      <div id="headingBasemaps" class="panel-heading" role="tab">
        <div class="panel-title">
          <a class="panel-toggle collapsed" role="button" data-toggle="collapse" href="#collapseBasemaps" aria-expanded="false"   aria-controls="collapseBasemaps"><span class="glyphicon glyphicon-th-large" aria-hidden="true"></span><span class="panel-label">Basemaps</span></a>
          <a class="panel-close" role="button" data-toggle="collapse" data-target="#panelBasemaps"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
        </div>
      </div>
      <div id="collapseBasemaps" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingBasemaps">
        <div class="panel-body">
          <select id="selectBasemapPanel" class="form-control">
            <option value="streets" data-vector="streets-vector">Streets</option>
            <option value="satellite" data-vector="satellite">Satellite</option>
            <option value="hybrid" data-vector="hybrid">Hybrid</option>
            <option value="national-geographic" data-vector="national-geographic">National Geographic</option>
            <option value="topo" data-vector="topo-vector">Topographic</option>
            <option value="gray" data-vector="gray-vector">Gray</option>
            <option value="dark-gray" data-vector="dark-gray-vector">Dark Gray</option>
            <option value="osm" data-vector="osm">Open Street Map</option>
            <option value="dark-gray" data-vector="streets-night-vector" selected>Streets Night</option>
            <option value="streets" data-vector="streets-navigation-vector">Streets Mobile</option>
          </select>
        </div>
      </div>
    </div>

    <!-- Search Panel -->

    <div id="panelSearch" class="panel panel-default collapse hidden-sm hidden-md hidden-lg">
        <div id="headingSearch" class="panel-heading" role="tab">
            <div class="panel-title">
                <a class="panel-toggle collapsed" role="button" data-toggle="collapse" href="#collapseSearch" data-parent="#panelAccordion" aria-expanded="false" aria-controls="collapseSearch"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search</a>
                <a class="panel-close" role="button" data-toggle="collapse" data-target="#panelSearch"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
            </div>
        </div>
        <div id="collapseSearch" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSearch">
            <div class="panel-body calcite-body-expander">
                <div id="searchPanelDiv"></div>
          </div>
        </div>
    </div>

  </div> <!-- /.panel-group -->

  <script type="text/javascript">
    var dojoConfig = {
      packages: [{
        name: "bootstrap",
        location: "https://esri.github.io/calcite-maps/dist/vendor/dojo-bootstrap"
      },
      {
        name: "calcite-maps",
        location: "https://esri.github.io/calcite-maps/dist/js/dojo"
      }]
    };
  </script>

  <script src="https://js.arcgis.com/4.8/"></script>

  <script>

    var app;

    require(["esri/Map",
      "esri/WebMap",
      "esri/layers/FeatureLayer",
      "esri/views/MapView",
      "esri/widgets/Search",
      "esri/widgets/Legend",
      "dojo/query",
      "esri/tasks/Locator",

      // Calcite Maps
      "calcite-maps/calcitemaps-v0.8",

      // Calcite Maps ArcGIS Support
      "calcite-maps/calcitemaps-arcgis-support-v0.8",

      // Bootstrap
      "bootstrap/Collapse",
      "bootstrap/Dropdown",
      "bootstrap/Tab",
      "dojo/domReady!"
    ], function(Map, WebMap, FeatureLayer, MapView, Search, Legend, query, Locator, CalciteMaps, CalciteMapsArcGIS) {

      // App
      app = {
        initialExtent: null,
        mapView: null,
        viewPadding: {
          top: 50
        },
        searchWidgetNav: null,
        searchWidgetPanel: null
      };

      // Webmap
      var map = new WebMap({
        portalItem: {
          id: "7186a92406194797aa518c06c189a71f"
        }
      });

      // View
      app.mapView = new MapView({
        container: "mapViewDiv",
        map: map,
        padding: app.viewPadding,
        ui: {
          components: ["zoom", "compass", "attribution"]
        }
      });

      CalciteMapsArcGIS.setPopupPanelSync(app.mapView);

      app.mapView.when(function(){
        // Set view properties
        app.initialExtent = app.mapView.extent.clone();
        app.mapView.popup.dockOptions = {
          breakpoint: {width: 768}
        }

        // Search
        app.searchWidgetNav = createSearchWidget("searchNavDiv");
        app.searchWidgetPanel = createSearchWidget("searchPanelDiv");

        // Legend
        createLegendWidget("legendDiv");
      });

      function createLegendWidget(parentId) {
        var legend = new Legend({
          viewModel: {
            view: app.mapView
          }
          }, parentId);
        legend.startup();
        return legend;
      }

      function createSearchWidget(parentId) {
        var search = new Search({
            view: app.mapView,
            allPlaceholder: "Find neighborhoods and places",
            includeDefaultSources: false
          }, parentId);

        var sources = [];

        // Add neighborhoods search
        sources.push({
          featureLayer: new FeatureLayer({
            url: "http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Neighborhoods_Enriched_Styled/FeatureServer/0",
            outFields: ["*"]
          }),
          searchFields: ["NAME"],
          displayField: "NAME",
          exactMatch: false,
          outFields: ["*"],
          name: "Find a Neighborhood",
          placeholder: "e.g. old town",
          popupEnabled: true,
          popupOpenOnSelect: true,
          searchExtent: app.initialExtent,
          withinViewEnabled: false,
          searchAllEnabled: true
        },{
          locator: new Locator({ url: "//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }),
          singleLineFieldName: "SingleLine",
          name: "Custom Geocoding Service",
          localSearchOptions: {
            minScale: 300000,
            distance: 50000
          },
          placeholder: "Search Geocoder",
          maxResults: 3,
          maxSuggestions: 6,
          suggestionsEnabled: false,
          minSuggestCharacters: 0
        });

        // // Add Esri geocoder search
        // search.defaultSource.name = "Find an address or place";
        // search.defaultSource.placeholder = "e.g. Starbucks";
        // search.defaultSource.searchExtent = app.initialExtent;
        // sources.push(search.defaultSource);

        // Set search sources
        search.sources = sources;

        search.startup();

        return search;
      }

      // Basemaps
      query("#selectBasemapPanel").on("change", function(e){
        app.mapView.map.basemap = e.target.options[e.target.selectedIndex].dataset.vector;
      });

      // Popup - undock
      query(".calcite-panels .panel").on("show.bs.collapse", function(e) {
        app.mapView.popup.dockEnabled = false;
      });

      // Panels - hide
      app.mapView.popup.watch("currentDockPosition", function(result) {
        if (result && query(".calcite-panels .panel.in").length > 0) {
          if (!(window.innerWidth > 544 && window.innerWidth < 768)) {
            query(".calcite-panels").addClass("invisible");
          }
        } else {
          query(".calcite-panels").removeClass("invisible");
        }
      });

    });

  </script>

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

Re: Calcite Maps Bootstrap sample - Search widget - with Multiple sources(4.8)

ImtiyazPasha — Sun, 12 Aug 2018 12:23:18 GMT

Robert,

Thanks a lot for your response.

I was looking for the same search widget with multiple options in the below sample.

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=frameworks-bootstrap

Re: Calcite Maps Bootstrap sample - Search widget - with Multiple sources(4.8)

RobertScheitlin__GISP — Sat, 11 Dec 2021 20:50:24 GMT

So here is that sample with multiple sources.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Calcite Maps and Bootstrap - 4.8</title>

  <!-- Calcite Bootstrap -->
  <link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.8.css">

  <!-- Calcite Maps -->
  <link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-4.x.min-v0.8.css">

  <!-- ArcGIS JS 4 -->
  <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">

  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
  </style>

</head>

<body class="calcite-maps calcite-nav-top">

  <!-- Navbar -->

  <nav class="navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bg-dark">
    <!-- Menu -->
    <div class="dropdown calcite-dropdown calcite-text-dark calcite-bg-light" role="presentation">
      <a class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">
        <div class="calcite-dropdown-toggle">
          <span class="sr-only">Toggle dropdown menu</span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </a>
      <ul class="dropdown-menu">
        <li class="active"><a class="hidden-md hidden-lg" href="#mapTab" aria-controls="mapTab" role="tab"
            data-toggle="tab"> Map</a></li>
        <li><a class="hidden-md hidden-lg" href="#sceneTab" aria-controls="sceneTab"
            role="tab" data-toggle="tab"> Scene</a></li>
        <li><a role="button" data-target="#panelBasemaps" aria-haspopup="true"><span class="glyphicon glyphicon-th-large"></span> Basemaps</a></li>
        <li><a role="button" data-target="#panelSettings" aria-haspopup="true"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
        <li><a role="button" id="calciteToggleNavbar" aria-haspopup="true"><span class="glyphicon glyphicon-fullscreen"></span> Full Map</a></li>
      </ul>
    </div>
    <!-- Title -->
    <div class="calcite-title calcite-overflow-hidden">
      <span class="calcite-title-main">Calcite Maps</span>
      <span class="calcite-title-divider hidden-xs"></span>
      <span class="calcite-title-sub hidden-xs">A modern framework for building map apps</span>
    </div>
    <!-- Nav -->
    <ul class="nav navbar-nav calcite-nav">
      <li class="active"><a id="mapNav" class="hidden-xs hidden-sm" href="#mapTab" aria-controls="mapTab"
          aria-expanded="true" role="tab" data-toggle="tab" data-tooltip="tip" title="2D View"
          data-placement="bottom">Map</a></li>
      <li><a id="sceneNav" class="hidden-xs hidden-sm" href="#sceneTab" aria-controls="sceneTab"
          role="tab" data-toggle="tab" data-tooltip="tip" title="3D View" data-placement="bottom">Scene</a></li>
      <li>
        <!--<div class="calcite-navbar-search calcite-search-expander">-->
          <div id="searchWidgetDiv"></div>
        <!--</div>-->
      </li>
    </ul>
  </nav>
  <!--/.calcite-navbar -->

  <!-- Map  -->

  <div class="calcite-map calcite-map-absolute">
    <div id="tabContainer" class="tab-content">
      <div id="mapTab" class="tab-pane fade in active" role="tabpanel">
        <div id="mapViewDiv"></div>
      </div>
      <div id="sceneTab" class="tab-pane fade" role="tabpanel">
        <div id="sceneViewDiv"></div>
      </div>
    </div>
  </div>
  <!-- /.calcite-map -->

  <!-- Panels -->

  <div class="calcite-panels calcite-panels-right calcite-text-light calcite-bg-dark panel-group">

    <!-- Basemaps Panel -->

    <div id="panelBasemaps" class="panel collapse">
      <div id="headingBasemaps" class="panel-heading" role="tab">
        <div class="panel-title">
          <a class="panel-toggle collapsed" role="button" data-toggle="collapse" href="#collapseBasemaps"
            aria-expanded="false" aria-controls="collapseBasemaps"><span class="glyphicon glyphicon-th-large" aria-hidden="true"></span><span class="panel-label">Basemaps</span></a>
          <a class="panel-close" role="button" data-toggle="collapse" data-target="#panelBasemaps"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
        </div>
      </div>
      <div id="collapseBasemaps" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingBasemaps">
        <div class="panel-body">
          <div id="basemapPanelDiv"></div>
        </div>
      </div>
    </div>

    <!-- Panel Settings -->

    <div id="panelSettings" class="panel panel-map collapse">
      <div id="headingSettings" class="panel-heading">
        <div class="panel-title">
          <a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseSettings"
            data-parent="#panelAccordion" aria-expanded="true" aria-controls="collapseSettings"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span><span class="panel-label">Settings</span></a>
          <a class="panel-close" role="button" data-toggle="collapse" data-target="#panelSettings"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
        </div>
      </div>
      <div id="collapseSettings" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSettings">
        <div class="panel-body">
          <div class="form-horizontal">

            <!-- Theme -->

            <div class="form-group">
              <label for="settingsTheme" class="col-xs-3 control-label">Theme</label>
              <div class="col-xs-9">
                <select id="settingsTheme" class="form-control">
                  <option value="calcite-dark" data-textcolor="calcite-text-light" data-bgcolor="calcite-bg-dark" selected>Calcite Dark</option>
                  <option value="calcite-light" data-textcolor="calcite-text-dark" data-bgcolor="calcite-bg-light">Calcte Light</option>
                </select>
              </div>
            </div>

            <!-- Color -->

            <div class="form-group">
              <label for="settingsColor" class="col-xs-3 control-label">Color</label>
              <div class="col-xs-9">
                <select id="settingsColor" class="form-control">
                  <option value="" data-theme="calcite-theme-light">Calcite Default</option>
                  <option value="calcite-bgcolor-dark-blue" data-textcolor="calcite-text-light" data-bgcolor="calcite-bg-custom">Calcite Dark Blue</option>
                  <option value="calcite-bgcolor-dark-green" data-textcolor="calcite-text-light" data-bgcolor="calcite-bg-custom">Calcite Dark Green</option>
                  <option value="calcite-bgcolor-dark-brown" data-textcolor="calcite-text-light" data-bgcolor="calcite-bg-custom">Calcite Dark Brown </option>
                  <option value="calcite-bgcolor-dark-red" data-textcolor="calcite-text-light" data-bgcolor="calcite-bg-custom">Calcite Dark Red</option>
                  <option value="calcite-bgcolor-darkest-grey" data-textcolor="calcite-text-light" data-bgcolor="calcite-bg-custom">Calcite Darkest Grey</option>
                  <option value="calcite-bgcolor-lightest-grey" data-textcolor="calcite-text-dark" data-bgcolor="calcite-bg-custom">Calcite Lightest Grey</option>
                  <option value="calcite-bgcolor-blue-75" data-textcolor="calcite-text-light" data-bgcolor="calcite-bg-custom">Calcite Blue 75%</option>
                  <option value="calcite-bgcolor-black-75" data-textcolor="calcite-text-light" data-bgcolor="calcite-bg-custom">Calcite Black 75%</option>
                </select>
              </div>
            </div>

            <!-- Widgets -->

            <div class="form-group">
              <label for="settingsWidgets" class="col-xs-3 control-label">Widgets</label>
              <div class="col-xs-9">
                <select id="settingsWidgets" class="form-control">
                  <option value="calcite-widgets-dark">Calcite Dark</option>
                  <option value="calcite-widgets-light" selected>Calcite Light</option>
                </select>
              </div>
            </div>

            <!-- Layout -->

            <div class="form-group">
              <label for="settingsLayout" class="col-xs-3 control-label">Layout</label>
              <div class="col-xs-9">
                <select id="settingsLayout" class="form-control">
                  <option value="calcite-nav-top" data-nav="navbar-fixed-top" selected>Top</option>
                  <option value="calcite-nav-bottom" data-nav="navbar-fixed-bottom">Bottom</option>
                </select>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- /.calcite-panels -->

  <script type="text/javascript">
    var dojoConfig = {
      packages: [{
        name: "bootstrap",
        location: "https://esri.github.io/calcite-maps/dist/vendor/dojo-bootstrap"
      },
      {
        name: "calcite-maps",
        location: "https://esri.github.io/calcite-maps/dist/js/dojo"
      }]
    };
  </script>

  <!-- ArcGIS JS 4 -->
  <script src="https://js.arcgis.com/4.8/"></script>

  <script>
    var app;

    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/views/SceneView",
      "esri/widgets/Search",
      "esri/widgets/BasemapGallery",
      "esri/core/watchUtils",
      "dojo/query",
      "dojo/on",
      "esri/layers/FeatureLayer",
      "esri/tasks/Locator",

      // Calcite Maps
      "calcite-maps/calcitemaps-v0.8",

      // Calcite Maps ArcGIS Support
      "calcite-maps/calcitemaps-arcgis-support-v0.8",

      // Bootstrap
      "bootstrap/Collapse",
      "bootstrap/Dropdown",
      "bootstrap/Tab",

      "dojo/domReady!"
    ], function(Map, MapView, SceneView, Search, Basemaps, watchUtils,
      query, on, FeatureLayer, Locator, CalciteMaps, CalciteMapsArcGIS) {

      /******************************************************************
       *
       * App settings
       *
       ******************************************************************/

      app = {
        center: [-40, 40],
        scale: 50000000,
        basemap: "streets",
        viewPadding: {
          top: 50,
          bottom: 0
        },
        uiComponents: ["zoom", "compass", "attribution"],
        mapView: null,
        sceneView: null,
        containerMap: "mapViewDiv",
        containerScene: "sceneViewDiv",
        activeView: null,
        searchWidget: null
      };

      /******************************************************************
       *
       * Create the map and scene view and ui components
       *
       ******************************************************************/

      // Map
      var map = new Map({
        basemap: app.basemap
      });

      // 2D view
      app.mapView = new MapView({
        container: app.containerMap,
        map: map,
        center: app.center,
        scale: app.scale,
        padding: app.viewPadding,
        ui: {
          components: app.uiComponents
        }
      });

      CalciteMapsArcGIS.setPopupPanelSync(app.mapView);

      // 3D view
      app.sceneView = new SceneView({
        container: app.containerScene,
        map: map,
        center: app.center,
        scale: app.scale,
        padding: app.viewPadding,
        ui: {
          components: app.uiComponents
        }
      });

      CalciteMapsArcGIS.setPopupPanelSync(app.sceneView);

      // Set the active view to scene
      setActiveView(app.mapView);
      
      var sources = [];

      // Add neighborhoods search
      sources.push({
        featureLayer: new FeatureLayer({
          url: "http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Neighborhoods_Enriched_Styled/FeatureServer/0",
          outFields: ["*"]
        }),
        searchFields: ["NAME"],
        displayField: "NAME",
        exactMatch: false,
        outFields: ["*"],
        name: "Find a Neighborhood",
        placeholder: "e.g. old town",
        popupEnabled: true,
        popupOpenOnSelect: true,
        searchExtent: app.initialExtent,
        withinViewEnabled: false,
        searchAllEnabled: true
      },{
        locator: new Locator({ url: "//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }),
        singleLineFieldName: "SingleLine",
        name: "Custom Geocoding Service",
        localSearchOptions: {
          minScale: 300000,
          distance: 50000
        },
        placeholder: "Search Geocoder",
        maxResults: 3,
        maxSuggestions: 6,
        suggestionsEnabled: false,
        minSuggestCharacters: 0
      });


      // Create the search widget and add it to the navbar instead of view
      app.searchWidget = new Search({
        view: app.activeView,
        sources: sources,
        includeDefaultSources: false
      }, "searchWidgetDiv");

      CalciteMapsArcGIS.setSearchExpandEvents(app.searchWidget);

      // Create basemap widget
      app.basemapWidget = new Basemaps({
        view: app.activeView,
        container: "basemapPanelDiv"
      });

      /******************************************************************
       *
       * Synchronize the view, search and popup
       *
       ******************************************************************/

      // Views
      function setActiveView(view) {
        app.activeView = view;
      }

      function syncViews(fromView, toView) {
        var viewPt = fromView.viewpoint.clone();
        fromView.container = null;
        if (fromView.type === "3d") {
          toView.container = app.containerMap;
        } else {
          toView.container = app.containerScene;
        }
        toView.padding = app.viewPadding;
        toView.viewpoint = viewPt;
      }

      // Search Widget
      function syncSearch(view) {
        watchUtils.whenTrueOnce(view, "ready", function() {
          app.searchWidget.view = view;
          if (app.searchWidget.selectedResult) {
            app.searchWidget.search(app.searchWidget.selectedResult.name)
          }
        });
      }

      // Tab - toggle between map and scene view
      query(".calcite-navbar li a[data-toggle='tab']").on("click", function(
        event) {
        if (event.target.text.indexOf("Map") > -1) {
          syncViews(app.sceneView, app.mapView);
          setActiveView(app.mapView);
        } else {
          syncViews(app.mapView, app.sceneView);
          setActiveView(app.sceneView);
        }
        syncSearch(app.activeView);
      });

      /******************************************************************
       *
       * Apply Calcite Maps CSS classes to change application on the fly
       *
       * For more information about the CSS styles or Sass build visit:
       * http://github.com/esri/calcite-maps
       *
       ******************************************************************/

      var cssSelectorUI = ".calcite-navbar, .calcite-panels",
        cssSelectorMap = ".calcite-map";

      // Theme - light (default) or dark theme
      query("#settingsTheme").on("change", function(event) {
        var textColor = event.target.options[event.target.selectedIndex]
          .dataset.textcolor,
          bgColor = event.target.options[event.target.selectedIndex].dataset
          .bgcolor;
        query(cssSelectorUI).removeClass(
          "calcite-text-dark calcite-text-light calcite-bg-dark calcite-bg-light calcite-bg-custom"
        ).addClass(textColor + " " + bgColor);
        query(cssSelectorUI).removeClass(
          "calcite-bgcolor-dark-blue calcite-bgcolor-blue-75 calcite-bgcolor-dark-green calcite-bgcolor-dark-brown calcite-bgcolor-darkest-grey calcite-bgcolor-lightest-grey calcite-bgcolor-black-75 calcite-bgcolor-dark-red"
        ).addClass(bgColor);
        query("#settingsColor").attr("value", "");
      });

      // Color - custom color
      query("#settingsColor").on("change", function(event) {
        var customColor = event.target.value,
          textColor = event.target.options[event.target.selectedIndex].dataset
          .textcolor,
          bgColor = event.target.options[event.target.selectedIndex].dataset
          .bgcolor;
        query(cssSelectorUI).removeClass(
          "calcite-text-dark calcite-text-light calcite-bg-dark calcite-bg-light calcite-bg-custom"
        ).addClass(textColor + " " + bgColor);
        query(cssSelectorUI).removeClass(
          "calcite-bgcolor-dark-blue calcite-bgcolor-blue-75 calcite-bgcolor-dark-green calcite-bgcolor-dark-brown calcite-bgcolor-darkest-grey calcite-bgcolor-lightest-grey calcite-bgcolor-black-75 calcite-bgcolor-dark-red"
        ).addClass(customColor);
        if (!customColor) {
          on.emit(query("#settingsTheme")[0], "change", {
            bubbles: true,
            cancelable: true
          });
        }
      });

      // Widgets - light (default) or dark theme
      query("#settingsWidgets").on("change", function(event) {
        var theme = event.target.value;
        query(cssSelectorMap).removeClass(
          "calcite-widgets-dark calcite-widgets-light").addClass(
          theme);
      });

      // Layout - top or bottom nav position
      query("#settingsLayout").on("change", function(event) {
        var layout = event.target.value;
        var layoutNav = event.target.options[event.target.selectedIndex]
          .dataset.nav;
        query("body").removeClass("calcite-nav-bottom calcite-nav-top")
          .addClass(layout);
        query("nav").removeClass("navbar-fixed-bottom navbar-fixed-top")
          .addClass(layoutNav);
        setViewPadding(layout);
      });

      // Basemap events
      query("#selectBasemapPanel").on("change", function(event) {
        app.mapView.map.basemap = event.target.options[event.target.selectedIndex]
          .dataset.vector;
        app.sceneView.map.basemap = event.target.value;
      });

      // Set view padding for widgets based on navbar position
      function setViewPadding(layout) {
        var padding, uiPadding;
        // Top
        if (layout === "calcite-nav-top") {
          padding = {
            padding: {
              top: 50,
              bottom: 0
            }
          };
          uiPadding = {
            padding: {
              top: 15,
              right: 15,
              bottom: 30,
              left: 15
            }
          };
        } else { // Bottom
          padding = {
            padding: {
              top: 0,
              bottom: 50
            }
          };
          uiPadding = {
            padding: {
              top: 30,
              right: 15,
              bottom: 15,
              left: 15
            }
          };
        }
        app.mapView.set(padding);
        app.mapView.ui.set(uiPadding);
        app.sceneView.set(padding);
        app.sceneView.ui.set(uiPadding);
        // Reset popup
        if (app.activeView.popup.visible && app.activeView.popup.dockEnabled) {
          app.activeView.popup.visible = false;
          app.activeView.popup.visible = true;
        }
      }

    });
  </script>

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

Re: Calcite Maps Bootstrap sample - Search widget - with Multiple sources(4.8)

RobertScheitlin__GISP — Mon, 03 Sep 2018 12:47:32 GMT

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.