Map Component

VMap

See miro board for diagram

Functionality is spread across several mixins as seen below.

Responsible for (raw component):

• Initiating the Mapbox gl map
• Watching selectedBaselayer in store and switching style when required
• Watching visibleLayers and adding layers or updating layer visibility on map

Components: VMapBaselayerControls

Props:

options: {
  type: Object,
  default: EMPTY_OPTIONS // const imported from `default-options.js`
}

See default-options.js for details on configuration. Some of these align with Mapbox documentation

MixinAddLayers

Responsible for (raw component):

• Adding raster and geojson layers and setting mapbox style options for these layers

MixinBoundingBox

Responsible for (raw component):

• Zooming to a given bounding box or country iso

If boundsUrl is defined in the options passed to VMap then the map will be initialised with this bounding box. It will make a request to a given ArcGIS Feature or Map Server for the extent and then zoom based on the result returned.

In Protected Planet, after zooming to a popup should be added - this means this mixin requires MixinPaPopup to work

MixinControls

Responsible for:

• Adding Mapbox controls (e.g. zoom, and attribution)

MixinLayers

Responsible for:

• Finding the layer in the base style above which data layers should be added (firstForegroundLayer)
• Defining a method that enables functions to be carried out after the map style is loaded

MixinPaPopup (Protected Planet specific)

Responsible for:

• Adding popups and using PointQuery from request-helpers.js to query ArcGIS server for popup data

VMapBaselayerControls

Responsible for:

• Toggling the map style (baselayer).

Props:

baselayers: { //passed in from VMap, see default options for example
  type: Array,
  required: true
}

Map Store

Responsible for:

• Maintaining the current state of visible layers (and the baselayer) on the map

    visibleOverlays: [],
    visibleLayers: [],
    selectedBaselayer: {}

Note an overlay can contain multiple layers, but will relate to one toggle in the filters. This is used, for example, when a dataset contains points and polygons that must be styled different, so are added to the map as separate layers under one overlay.

VMap does not know which layers are shown, it simply looks at the store and makes sure it adds or removes layers to match whenever the store changes

VMapFilters

This is a pane that can be collapsed. It lists the data shown on the map.

Responsible for:

• Hosting filters that control which layers are shown
• Showing map disclaimer via slot and any extra guidance

Components: VMapFilter, VMapHeader

Slots: top, bottom - used for headers and footers (e.g. the disclaimer)

Props:

    overlays: { //datasets shown on the map
      type: Array,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    isHidden: { //as the filters are nested in this and they initialise the shown layers, this component cannot be removed, only hidden
      type: Boolean,
      default: false
    }

VMapFilter

Responsible for:

• Showing legend for data layers on the map
• Toggling the layers on the map

Components: VMapToggler

Prop:

    color: {
      type: String,
      default: '#cccccc'
    },
    title: {
      type: String,
      required: true
    },
    isShownByDefault: {//is it initially shown
      type: Boolean,
      default: true
    },
    isToggleable: {
      type: Boolean,
      default: true
    },
    layers: { // can have mulitple layers in one filter/overlay
      type: Array,
      required: true
    },
    id: {
      type: String,
      required: true
    },
    type: { // maybe this can go - not sure if it's actually used!
      type: String,
      required: true
    }

VMapHeader

Responsible for:

• Showing filters header info
• Emitting the toggle event that collapses the filter pane

Props:

    title: {
      type: String,
      required: true
    },
    closeable: {
      type: Boolean,
      default: false
    },
    filtersShown: {
      type: Boolean,
      default: true
    }

VMapDisclaimer

Reponsible for:

• Showing the disclaimer

Props:

    disclaimer: {
      type: Object,
      required: true,
      validator: type => (
        type.hasOwnProperty('heading') &&
        typeof type.heading === 'string' &&
        type.hasOwnProperty('body') &&
        typeof type.heading === 'string'
      )
    }

VMapToggler

This is a toggle input type. Can bind using v-model="active"

Responsible for:

• Offering user toggle interaction

Props:

    active: {
      type: Boolean,
      required: true
    },
    gaId: {
      type: String
    },
    onText: {
      type: String,
      default: 'ON',
    },
    offText: {
      type: String,
      default: 'OFF'
    }

VMapPaSearch (Protected Planet Specific)

Helpers

DefaultOptions

Has default map options along with examples.

RequestHelpers (Protected Planet specific)

Responsible for:

• Querying ArcGIS to find information from point query (defines PointQuery class). PointQuery can be give a list of services to try and query the point on, if you are showing more than one MapServer data on your map.

This is specific to Protected Planet, but could be adapted to future maps