0%

mapbox tips

Posted on

options.preserveDrawingBuffer

If true , the map’s canvas can be exported to a PNG using map.getCanvas().toDataURL() . This is false by default as a performance optimization.

1
map.getCanvas().toDataURL()

queryRenderedFeatures

Returns an array of GeoJSON Feature objects representing visible features that satisfy the query parameters.

https://docs.mapbox.com/mapbox-gl-js/api/map/#map#queryrenderedfeatures

1
2
3
4
5
// Find all features within a static bounding box
var features = map.queryRenderedFeatures(
  [[10, 20], [30, 50]],
  { layers: ['my-layer-name'] }
);
1
2
3
4
5
6
7
// Find all features within a bounding box around a point
var width = 10;
var height = 20;
var features = map.queryRenderedFeatures([
  [point.x - width / 2, point.y - height / 2],
  [point.x + width / 2, point.y + height / 2]
], { layers: ['my-layer-name'] });
1
2
// Query all rendered features from a single layer
var features = map.queryRenderedFeatures({ layers: ['my-layer-name'] });

querySourceFeatures

Returns an array of GeoJSON Feature objects representing features within the specified vector tile or GeoJSON source that satisfy the query parameters.

https://docs.mapbox.com/mapbox-gl-js/api/map/#map#querysourcefeatures

1
2
3
4
// Find all features in one source layer in a vector source
var features = map.querySourceFeatures('your-source-id', {
sourceLayer: 'your-source-layer'
});

updateImage

1
2
3
// If an image with the ID 'cat' already exists in the style's sprite,
// replace that image with a new image, 'other-cat-icon.png'.
if (map.hasImage('cat')) map.updateImage('cat', './other-cat-icon.png');
1
2
3
4
5
6
7
8
"icon-color": [
  "case",
  ["boolean", ["feature-state", "hover"], false],
  "#F89806",
  ["boolean", ["==", ["get", "state"], 0], false],
  "#2363F8",
  ["get", "color"]
],