Mapbox filter - Filter features within map view

Question

I'm trying to extend a map built in Mapbox with advanced filtering options (e.g., display data with zoom) with Mapbox GL JS for a web-based application.

The available examples (https://docs.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/) use imported GeoJSON "ne_10m_airports" data but my data is provided by MySQL database.

My JavaScript skills are limited so I'm having trouble updating the filter code to work with my dataset. Any recommendations or relevant samples of this type of interaction?

Example: http://www.scubacentral.net/map2.html

map.addLayer({
'id': 'airport',
'source': {
'type': 'vector',
'url': 'mapbox://mapbox.04w69w5j'
},
'source-layer': 'ne_10m_airports',
'type': 'symbol',
'layout': {
'icon-image': 'airport-15',
'icon-padding': 0,
'icon-allow-overlap': true
}
});

Adriana Babakanian Adriana Babakanian · Accepted Answer · 2020-03-10T22:38:21

The provided example makes use of a vector source. As noted in the linked Mapbox style specification, a vector source must be in the Mapbox Vector Tile format, which is not very trivial to generate from a MySQL database. The 'ne_10m_airports' data that you mentioned is one particular source layer within the vector source specified by 'url': 'mapbox://mapbox.04w69w5j'. As such, the request here is less about the relevant JavaScript and more about the format of the source data.

A GeoJSON source would likely be the best source type option for your implementation. This will require writing a script or using some other functionality to translate the structure of your data from the MySQL database to GeoJSON. As noted in the linked documentation, GeoJSON is an open standard file format for representing map data and there are many existing resources for creating GeoJSON files out of existing data. The map in your linked example 401s due to an incorrect Mapbox access token so I'm not able to gather more information about your particular use case, but regardless, a GeoJSON source will definitely be the best option when compared to the others (namely, vector, raster, raster-dem, image, and video, as enumerated in the sidebar here).

Mapbox filter - Filter features within map view

1 Answers