@skymapglobal/map
v1.2.42
Published
Mapbox GL JS wrapper for modularity.
Downloads
96
Readme
Skymap Map
Mapbox GL JS wrapper for modularity.
Install
yarn add @skymapglobal/mapUsage
<template>
<div id="app">
<Map>
<BaseMapControl position="top-right" />
</Map>
</div>
</template>
<script>
import { Map, BaseMapControl } from "@skymapglobal/map";
export default {
name: "App",
components: {
Map,
BaseMapControl,
},
};
</script>
<style>
html,
body,
#app {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>Full Example
<template>
<Map>
<ZoomControl position="top-right" />
<BaseMapControl position="top-right" />
<HomeControl position="top-right" />
<GeolocateControl position="top-right" />
<MouseCoordinatesControl position="bottom-right" />
<FullScreenControl position="bottom-right" />
<ScaleBarControl position="bottom-left" />
<!-- Layers -->
<Layer v-for="layer of layers" :key="layer.id" :layer="layer" />
</Map>
</template>
<script>
import {
Map,
BaseMapControl,
FullScreenControl,
HomeControl,
MouseCoordinatesControl,
ScaleBarControl,
ZoomControl,
GeolocateControl,
Layer
} from "@skymapglobal/map";
export default {
components: {
Map,
BaseMapControl,
FullScreenControl,
HomeControl,
MouseCoordinatesControl,
ScaleBarControl,
ZoomControl,
GeolocateControl,
Layer
},
data() {
return {
layers: [
{
id: "raster-layer",
type: "raster",
source: {
type: "raster",
// use the tiles option to specify a WMS tile source URL
// https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/
tiles: [
"https://img.nj.gov/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015"
],
tileSize: 256
},
paint: {}
},
{
id: "vector-layer",
type: "line",
source: {
type: "vector",
tiles: [
"https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt"
],
minzoom: 6,
maxzoom: 14
},
"source-layer": "mapillary-sequences",
layout: {
"line-cap": "round",
"line-join": "round"
},
paint: {
"line-opacity": 0.6,
"line-color": "rgb(53, 175, 109)",
"line-width": 2
}
},
{
id: "geojson-layer",
type: "fill",
source: {
type: "geojson",
data: {
type: "Feature",
properties: {
description: {
title: "Title Text",
table: {
id: 1,
name: "Name"
},
images: [
"https://via.placeholder.com/120x67.png",
"https://via.placeholder.com/67x120.png",
"https://via.placeholder.com/120x67.png",
"https://via.placeholder.com/67x120.png",
"https://via.placeholder.com/1920x1080.png",
"https://via.placeholder.com/1080x1920.png"
]
}
},
geometry: {
type: "Polygon",
coordinates: [
[
[76.46484375, 20.632784250388028],
[81.123046875, 20.632784250388028],
[81.123046875, 24.607069137709683],
[76.46484375, 24.607069137709683],
[76.46484375, 20.632784250388028]
]
]
}
}
},
paint: {
"fill-color": "#800",
"fill-opacity": 0.8
}
}
]
};
}
};
</script>Create a simple Module example
<template>
<ModuleContainer>
<!-- Children modules -->
<slot />
</ModuleContainer>
</template>
<script>
import { ModuleMixin } from "@skymapglobal/map";
export default {
mixins: [ModuleMixin],
methods: {
// Init
onInit() {
// Use this.map to access mapbox gl instance
},
// Destroy
onDestroy() {
}
}
};
</script>
<style scoped>
</style>Create Draggable Popup Module example
<template>
<ModuleContainer>
<DraggablePopup
v-bind="$attrs"
:top="top"
:right="right"
:title="title"
:width="width"
:height="height"
:visible.sync="popup.visible"
>
My Module
</DraggablePopup>
<!-- Children modules -->
<slot />
</ModuleContainer>
</template>
<script>
import { ModuleMixin, ButtonGroupControl, DraggablePopup } from "@skymapglobal/map";
import { mdiInformation } from "@mdi/js";
export default {
mixins: [ModuleMixin],
components: {
DraggablePopup
},
props: {
top: {
type: Number,
default: 10
},
right: {
type: Number,
default: 50
},
height: {
type: String,
default: "10vh"
},
width: {
type: String,
default: "30vw"
},
title: {
type: String,
default: "My Module"
},
controlIcon: {
type: String,
default: mdiInformation
}
},
data() {
return {
popup: {
visible: false
}
};
},
methods: {
// Init
onInit() {
// Use this.map to access mapbox gl instance
this.addControl(
ButtonGroupControl.create([
{
title: this.title,
icon: this.controlIcon,
onClick: () => {
this.popup.visible = !this.popup.visible;
}
}
])
);
},
// Destroy
onDestroy() {
}
}
};
</script>
<style scoped>
</style>API
Map
Props
mapboxAccessToken: String
initOptions: Object - Mapbox GL init options. Default:
{ 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
layer: Object - Mapbox GL Layer. More details: https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/
popupOptions: Object - Layer Popup Options. Default:
{ maxWidth: "none" } // "none" for fitting content
ModuleMixin
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.
mounted() { this.bus.$once("module-loaded", () => { // Code }); }module-failed
E.g.
mounted() { this.bus.$once("module-failed", () => { // Code }); }
Mapbox Controls
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
Troubleshooting
I have error: {message: "Unimplemented type: 4"}
Default glyphs url is: https://tiles.eofactory.ai/fonts/{fontstack}/{range}.pbf.
The server support fonts: Noto Sans Bold, Noto Sans Regular.
So when using symbol layer, set layout text-font to Noto Sans Regular.
{
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"
}
}