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 optional Object

  An object containing key value options for the search control.

  • className String optional

    A custom CSS class name to assign to the control.

  • hoverMarker Object optional

    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'.

  • search Object optional

    An object containing key/values that control the Place Search API request made by the control.

  • searchLayer Object optional

    An object containing key/values that control the look and feel of the search Layer.

  • searchInput Object optional

    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.

Basic Example

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