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

    • 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);