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 May 14, 2021.