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: "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 | Object containing properties for the address. Properties addr , city , state , zip , region .
|
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
|
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. |
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
| ["NA", "EU", "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. |
Popup Configuration
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. |