Skip to content
Docs version
@hungpvq/vue-map@1.1.0@hungpvq/vue-map-core@1.1.0@hungpvq/vue-map-dataset@1.1.0@hungpvq/vue-map-draw@1.1.0@hungpvq/map-draw@1.1.0@hungpvq/react-map@1.1.0@hungpvq/react-map-core@1.1.0@hungpvq/react-map-dataset@1.1.0@hungpvq/react-map-draw@1.1.0

Layer

MapLibre paint layers. Pair with a source on the same parent.

Events: none (visibility / opacity go through the list UI).

Factory

ts
createMultiMapboxLayerComponent(name: string, layers?: BaseLayerSpec[])

BaseLayerSpec is a MapLibre LayerSpecification without a required id (an id is assigned if missing).

ts
import { createMultiMapboxLayerComponent } from '@hungpvq/map-dataset';
import { LayerSimpleMapboxBuild } from '@hungpvq/map-dataset/style';

const layer = createMultiMapboxLayerComponent('cities', [
  new LayerSimpleMapboxBuild().setStyleType('point').setColor('#ff6b6b').build(),
]);

const multi = createMultiMapboxLayerComponent('mixed', [
  new LayerSimpleMapboxBuild().setStyleType('point').setColor('#ff6b6b').build(),
  new LayerSimpleMapboxBuild().setStyleType('line').setColor('#4ecdc4').build(),
]);

Or pass a raw spec:

ts
createMultiMapboxLayerComponent('fill', [
  {
    type: 'fill',
    paint: { 'fill-color': '#4ecdc4', 'fill-opacity': 0.4 },
  },
]);

Methods on the node: getAllLayerIds(), getLayers(), moveLayer(map, beforeId), updateValue(map, value).

Style editor from the list ⋮ menu uses getComponentUpdate() → registry key style-control. Mount ComponentManagementControl so that dialog can open.

See LayerSimpleMapboxBuild for point / line / area / symbol.