Mapbox GL JS wrapper for modularity.
npm install @skymapglobal/mapMapbox GL JS wrapper for modularity.
``bash`
yarn add @skymapglobal/map
`html
`
`html
`
`html
`
`html
:top="top"
:right="right"
:title="title"
:width="width"
:height="height"
:visible.sync="popup.visible"
>
My Module
`
#### Props
* mapboxAccessToken: String
* initOptions: Object - Mapbox GL init options. Default:
`javascript`
{
center: [75.02861351131037, 20.27995156503087],
zoom: 2.0538984656017196,
maxZoom: 22,
attributionControl: false,
zoomControl: false,
style: {
version: 8,
name: "Empty",
metadata: {},
glyphs: "https://tiles.eofactory.ai/fonts/{fontstack}/{range}.pbf",
sources: {},
layers: []
}
}
#### Events
* map-loaded: (map) => {} - Used for getting map instance in parent component
* layer: Object - Mapbox GL Layer. More details:
* popupOptions: Object - Layer Popup Options. Default:
`javascript`
{ maxWidth: "none" } // "none" for fitting content
#### Data
* loaded: Boolean - whether map is loaded
* map: mapboxgl.Map - Mapbox GL instance
* control: mapboxgl.Control - Mapbox GL control instance
* bus: EventBus - internal event bus
#### Methods
* addControl(control) - add control to map
* removeControl() - remove control
* getControl() - get control
* addLayer(layer) - add layer to module group, don't need to worry about order of layers between modules, wait until map is initialized to perform
* removeLayer(layerId) - remove layer with helper to remove source also
#### Hooks
* onInit() - fired when map is ready to use
* onDestroy() - fired when module has been destroyed
#### Bus Events
* module-loaded
E.g.
`javascript`
mounted() {
this.bus.$once("module-loaded", () => {
// Code
});
}
* module-failed
E.g.
`javascript`
mounted() {
this.bus.$once("module-failed", () => {
// Code
});
}
* BaseControl - used as base, abstract control
* Getters/ Setters
* visible: boolean - set control visible
* GroupControl - group of controls
* Props
* controls: BaseControl[] - list of controls
* Methods
* addControl(control: BaseControl) => void - add control
* removeControl(control: BaseControl) => void - remove control
* ButtonControl - button control (Do not use directly, use ButtonGroupControl with one ButtonControl instead. Recommend: ButtonGroupControl.create() method)
* Props
* title: string - button title
* icon: string - button icon class
* className: string - custom button class
* onClick: () => void - on click event
* Getters/ Setters
* visible: boolean - set control visible
* ButtonGroupControl - group of button controls
* Props
* buttons: ButtonControl[] - list of button controls
* Getters/ Setters
* visible: boolean - set control visible
* Static Methods
* create({ title: string, icon: string, className: string, onClick: () => void }[]) => void - Create list of buttons
* Methods
* addButton(button: ButtonControl) => void - add button control
* removeButton(button: ButtonControl) => void - remove button control
* LabelControl - label control
* Props
* title: string - label content text
* icon: string - prepend icon class
* className: string - custom label class
* Getters/ Setters
* visible: boolean - set control visible
Default glyphs url is:
The server support fonts: Noto Sans Bold, Noto Sans Regular.
So when using symbol layer, set layout text-font to Noto Sans Regular.
`javascript``
{
id: "label-layer",
type: "symbol",
source: {
type: "geojson",
data: {
type: "Feature",
properties: {
label: "My Label"
},
geometry: {
type: "Point",
coordinates: [78.662109375, 22.63429269379353]
}
}
},
layout: {
"text-field": ["get", "label"],
"text-font": ["Noto Sans Regular"],
"text-variable-anchor": ["top", "bottom", "left", "right"],
"text-justify": "auto"
}
}