Creating a Search Widget in Angular with No Map

[bigalnz]

I have managed to add a search widget to the Angular github sample. My modified code looks like:

    async initializeMap() {
    try {
      // Load the modules for the ArcGIS API for JavaScript
      const [EsriMap, EsriMapView, Search, Locator] = await loadModules([
        "esri/Map",
        "esri/views/MapView",
        "esri/widgets/Search",
        "esri/tasks/Locator"
      ]);
      const locator = new Locator({url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"});

      const search = new Search(this._view);

      // Configure the Map
      const mapProperties: esri.MapProperties = {
        basemap: this._basemap
      };

      const map: esri.Map = new EsriMap(mapProperties);

      // Initialize the MapView
      const mapViewProperties: esri.MapViewProperties = {
        container: this.mapViewEl.nativeElement,
        center: this._center,
        zoom: this._zoom,
        map: map
      };

      this._view = new EsriMapView(mapViewProperties);
      this._view.ui.add(search, "top-right");
      await this._view.when();
      return this._view;

How would I add the search widget to the web page without a map?

I would also like my search widget to have the same styling (css?) as the rest of my inputs which are bootstrap.

How would I override the styling so all my inputs are consistent in look and theme?

[andygup]

For working with search widget without a map the best answers are on GeoNET, for example take a look at this post and samples, it's a bit older but the concepts still apply: https://community.esri.com/thread/231579-how-to-get-search-widget-responses-lat-long-in-arcgis-api-for-javascript.

For styling you'll need to use our saas library and manually figure out which properties to override: https://developers.arcgis.com/javascript/latest/guide/styling/ and https://github.com/Esri/jsapi-resources/blob/master/4.x/npm/demo/SASS.md. If you have questions about using saas with the ArcGIS API for JavaScript the best place is also on GeoNET since widget CSS works independent of any JS framework.

[bigalnz]

So the two repos on here for calcite-bootstrap and bootstrap-map-js do not help at all with styling a input widget?

[andygup]

I don't recommend them. They aren't up-to-date and they aren't maintained.

[andygup]

Closing...