@skymapglobal/map
Advanced tools
Mapbox GL JS wrapper for modularity.
yarn add @skymapglobal/map
<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>
<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>
<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>
<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>
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: []
}
}
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
loaded: Boolean - whether map is loaded
map: mapboxgl.Map - Mapbox GL instance
control: mapboxgl.Control - Mapbox GL control instance
bus: EventBus - internal event bus
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
onInit() - fired when map is ready to use
onDestroy() - fired when module has been destroyed
module-loaded
E.g.
mounted() {
this.bus.$once("module-loaded", () => {
// Code
});
}
module-failed
E.g.
mounted() {
this.bus.$once("module-failed", () => {
// Code
});
}
BaseControl - used as base, abstract control
Getters/ Setters
GroupControl - group of controls
Props
Methods
ButtonControl - button control (Do not use directly, use ButtonGroupControl with one ButtonControl instead. Recommend: ButtonGroupControl.create() method)
Props
Getters/ Setters
ButtonGroupControl - group of button controls
Props
Getters/ Setters
Static Methods
Methods
LabelControl - label control
Props
Getters/ Setters
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"
}
}
FAQs
Mapbox GL JS wrapper for modularity.
The npm package @skymapglobal/map receives a total of 2 weekly downloads. As such, @skymapglobal/map popularity was classified as not popular.
We found that @skymapglobal/map demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.
Research
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.