mapbox-gl-geojson-search

A geojson feature search control for mapbox-gl-js.

Local Development

npm i
npm run dev

Usage

Control Options

containerClass (String): class name for container (optional)

inputID (String): id for input field (optional)

btnID (String): id for control button (optional)

characterThreshold (Number): number of characters before results are shown (optional; defaults to 5)

maxResults (Number): maximum number of results shown for a given search (optional; defaults to 5)

draggable (Boolean): allows ability for input field to be draggable/moveable (optional; defaults to false)

layers(Array{Object}) : list of layers with associated properties required for search (required)

• source(String): source reference id - ie. same as map.addSource(id) (required)
• displayName(String): name shown in layer picker (required)
• category(String): groups layers in picker by categories (required)
• type(String): feature type (i.e. 'polygon') (required)
• uniqueFeatureID(String): unique identifier to identify search features - ideally unique per feature (required)
• searchProperties(Array{String}): search properties to include from geojson feature (optional; cannot be used in conjuction with excludedProperties)
• excludedProperties(Array{String}): search properties to excluded from geojson feature (optional; cannot be used in conjuction with searchProperties)
• zoomOnSearch(Boolean): zooms to feature on select (optional; defaults to true)
• highlightColor(String): highlight color (optional; defaults to yellow - '#ff0')
• dataPath(String): url path to data - only neccessary when loading layers dynamically or if source is initially empty (optional)

Example

  const searchControl = new mapboxgl.MapboxSearch({
    containerClass: 'search-container',
    inputID: 'search-box',
    btnID: 'search-btn',
    characterThreshold: 2,
    maxResults: 6, 
    layers: [
      {
        "source": "places",
        "displayName": "Places",
        "category": "Geo",
        "type": "polygon",
        "uniqueFeatureID": "adm0_a3",
        "searchProperties": ['name', 'name_long'],
        "zoomOnSearch": true,
        "highlightColor": '#ff0',
        "dataPath": 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_map_units.geojson'
      },
    ]
  });

  map.addControl(searchControl)

Assumptions

The underlying geojson must have consistent keys. This means that for a given FeatureCollection, each feature must have the same properties as the other features in the collection. As an example, the following would be incompatible as the second feature is missing the name property.

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "id": 1,
        "name": "Feature 1"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          98.437,
          64.320
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "id": 2
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          73.828,
          49.382
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "id": 3,
        "name": "Feature 3"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -106.1718,
          54.775
        ]
      }
    }
  ]
}