MapAPI Module

This module provides the ability to embed a customised map using tiles from the MapBox api.

Configurations

This module ships with a default configuration file, but can be overridden at the app level. The configuration file contains three properties:

access_token: This is an api key for accessing mapbox tiles layers. Create an account to generate a new key.
attribution: The attribution control allows you to display attribution data in a small text box on a map.
styles: An array of styles provided by the mapbox API

The access_token can also be configured per environment using the MAPBOX_ACCESS_TOKEN key in your environment file.

Default Map Settings

You can define default map settings in the Map Api tab of the dashboards settings page.

Embedding Maps

import DistrictMap from "~MapApi/BaseMap";

<district-map v-bind="mapProps" />

Props

tiles: {
    type: Object,
    default: () => {
        return {
            url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            attribution: '...',
        }
    },
},
center: {
    type: String,
    default: () => '',
},
zoom: {
    type: [Number, String],
    default: 15,
},
options: {
    type: Object,
    default: () => {},
},
layers: {
    type: Array,
    default: () => [],
},
use_bounds: {
    type: Boolean,
    default: false,
},
bounds: {
    type: String,
    default: '',
},
min_zoom: {
    type: Number,
    default: 1,
},
max_zoom: {
    type: Number,
    default: 18,
},
markers: {
    type: Array,
    default: () => [],
},
markerIcon: {
    type: String,
    default: 'pin-default',
},