@skymapglobal/map

1.2.42 • Public • Published

Skymap Map

Mapbox GL JS wrapper for modularity.

Install

yarn add @skymapglobal/map

Usage

<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

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"
  }
}

Readme

Keywords

none

Package Sidebar

Install

npm i @skymapglobal/map

Weekly Downloads

5

Version

1.2.42

License

CC-BY-NC-4.0

Unpacked Size

210 kB

Total Files

90

Last publish

Collaborators

  • ducvt7593