MapQuest.js

L.mapquest.searchControl(options)

A control that allows for drop-in Place Search API functionality.

Syntax

L.mapquest.key = 'KEY';
let map = L.mapquest.map('map', {
  center: [40.7128, -74.0059],
  layers: L.mapquest.tileLayer('map'),
  zoom: 14,
  zoomControl: false
});

let searchControl = L.mapquest.searchControl({
  className: '',
  hoverMarker: {
    icon: 'marker',
    iconOptions: {
      size: 'sm',
      primaryColor: '#333333',
      secondaryColor: '#333333'
    }
  },
  search: {
    sort: 'relevance',
    pageSize: 20
  },
  searchInput: {
    searchAheadOptions: {
      limit: 6,
      collection: 'address,adminArea,airport,poi,category,franchise'
    },
    compactResults: true,
    placeholderText: 'Search',
    clearTitle: 'Clear search'
  },
  searchLayer: {
    buffer: 256,
    collisionMargin: 2,
    marker: {
      icon: 'via',
      iconOptions: {
        primaryColor: '#ffffff',
        secondaryColor: '#333333',
        size: 'lg'
      },
      popupEnabled: true
    },
    paddingTopLeft: [420, 20],
    paddingBottomRight: [20, 20],
    searchResponse: {},
    updateResultsOnMapMove: true
  }
}).addTo(map);

Parameters

controlOptions Object

An object containing key value options for the search control.

Request Parameter	Description	Required
className String	A custom CSS class name to assign to the control.	No
hoverMarker Object	An object containing any of the following key value options: icon and iconOptions. This controls the marker that is rendered when search results are selected in the result list. icon: A string that specifies the type of icon to be rendered. Default is 'marker'. iconOptions: An object containing any of the following key value options: primaryColor, secondaryColor, and size. primaryColor: The string hex code primary color of the marker. secondaryColor: The string hex code secondary color of the marker. size: The size of the marker as a string: 'sm', 'md', or 'lg'. Default is 'sm'.	No
search Object	An object containing key/values that control the Place Search API request made by the control.	No
searchLayer Object	An object containing key/values that control the look and feel of the search Layer.	No
searchInput Object	An object containing key/values that control the look and feel of the search input. compactResults: A boolean that determines if the search input search ahead results are compact. Default is true. clearTitle: A string that controls the search input title. Default is 'Clear search'. placeholderText: A string that controls the search input placeholder text. Default is 'Search'. searchAheadOptions: Options to be passed into the Search Ahead API if it is enabled.	No

Basic Example

let searchControl = L.mapquest.searchControl().addTo(map);