Single Search Add-on

Contents

Single Search addon control provides a single box for all search types. By default, the control displays the results stacked under the search box.

Example Setup: #

Click here for a working demo and follow the steps below to create your own 

<script src="https://maps-sdk.trimblemaps.com/addon/trimblemaps-singlesearch-1.0.0.js"></script>
<!-- Single Search addon reference js -->
<link href="https://maps-sdk.trimblemaps.com/addon/trimblemaps-singlesearch-1.0.0.css" rel="stylesheet">
<!-- Single Search addon reference css -->

TrimbleMaps.APIKey = "YOUR_ACCESS_TOKEN";

var map = (window.map = new TrimbleMaps.Map({
  container: "map",
  style: TrimbleMaps.Common.Style.TRANSPORTATION,
  zoom: 12.5,
  center: [-77.01866, 38.888],
  region: TrimbleMaps.Common.Region.NA
}));

var ctrl = new TrimbleMapsControl.SingleSearch({
  placeholderText: "Search here",
  doneTypingInterval: 700,
  hideResults: true,
  locationRelevance: "mapCenter",
  searchOption: {
    region: TrimbleMaps.Common.Region.WW,
    maxResults: 30
  },
  markerStyle: {},
  markerConfig: {},
  popupConfig: {}
  // Include other optional customisation options
});

// Map#addControl takes an optional second argument to set the position of the control.
// If no position is specified the control defaults to `top-right`.

map.addControl(ctrl, "top-left");

Customization Options #

Parameter Name Type/Values Description
doneTypingInterval 
Number
Default: 700
The debounce value in milliseconds. The search web service request fire rate limit to this value.
placeholderText 
String
Default: Address
Placeholder text for the search box.
minSearchTextLength 
Number
Default: 3
If search text is longer than this value, then search can be started.
locationRelevance 
String
Default: null
Available values are “mapCenter”, “device”, or null. If it is set, map view center or device location will be used to assist search.
hideResults 
Boolean
Default: false
Hide results list or not when a result item is clicked on or enter key is pressed on a focused item.
searchOption 
Object
Optional.
See the section below.
markerStyle 
Object
Optional.
See the section below.
markerConfig 
Object
Optional.
See the section below.
popupConfig 
Object
Optional.
See the section below.

Search Option: #

The searchOption parameter contains options that are used by the geocoder web service to perform the search.

Parameter Type/Values Description
query 
String
Default: null
If it is not null, the search input box value will be ignored by the control. It is optional.
maxResults 
Number
Default: 20
Maximum returned results.
currentLonLat 
LngLat.L.latLng
Default: null
Search near the location provided. Latitude and longitude values are in degrees. It is optional. The control can set current location based on navigator.geolocation location or map view center. They are optional too.
excludedSearchTypes 
String
Default: null
Comma-separated list of types to exclude from the search.
poiCategories 
String
Default: null
Comma-separated list of POI category names by which you want to filter all POI results.Note: To get supported categories, call SearchService.singleSearchGet(“poiCategories”) method.
countries 
String
Default: null
Comma-separated list of country abbreviations by which you want to filter all results.
countryType ["ISO", "FIPS", "GENC2", "GENC3"] Default: null
states 
String
Default: null
Comma-separated list of state abbreviations by which you want to filter all results.
region [TrimbleMaps.Common.Region.NA, TrimbleMaps.Common.Region.EU, TrimbleMaps.Common.Region.WW] Required.
async 
Boolean
Default: true
Open an asynchronous request or not.
success 
Function
Optional.
If it is provided, it will replace the control built-in handler method.
failure 
Function
Optional.
If it is provided, it will replace the control built-in handler method.

Marker Style #

After search results are returned, the control will display them as a stacked list under the search input box by default. When a list item is clicked or the Enter key is pressed on an item having the focus in the list, a marker for the location will be shown on the map. The markerStyle parameter determines the marker’s look and feel.

Parameter Type/Values Description
externalGraphic 
String
Default: null
If the URL is supplied, it will replace the default icon. If null, the control will choose icon for the marker based on result type.
graphicHeight 
Number
Default: 26
Marker height in pixels.
graphicWidth 
Number
Default: 26
Marker height in pixels.
graphicXOffset 
Number
Default: -13
Marker x-direction offset.
graphicYOffset 
Number
Default: -13
Marker y-direction offset.

Marker Configuration #

The markerConfig parameter contains options related to the creation of the marker on the map.

Parameter Type/Values Description
exclusive 
Boolean
Default: true
If true, erases all other makers first.
centerOnMap 
Boolean
Default: true
Center the marker on the map.
zoomLevel 
Number
Default: 12
Centers the marker at the zoom level.

The popupConfig parameter contains options related to the creation of the marker popup on the map.

Parameter Type/Values Description
show 
Boolean
Default: true
If true, shows popup with the marker.
className 
String
Default: single-search
CSS class name. If you change this value, you need to add your CSS class to your style file.
offset 
Number
Popup location offset.
closeBox 
Boolean
Default: false
If true, shows the close button on the popup.
Last updated April 5, 2021.