Mixins

Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options.

Map mixins

A Weacast map is based on a Leaflet map object.

This set of mixins is to be used to construct a new Weacast Map component and underlying Leaflet objects:

  • Mandatory Base mixin simply initialize the underlying Leaflet map object and registered controls by other mixins
  • Base layers adds a base layer selector on the map using Leaflet.Basemaps
  • Forecast layers adds a configured set of forecast layers to the map
  • File layers adds a file-based layer (GeoJSON or KML) uploader to the map using Leaflet.Basemaps
    • it will use the configured GeoJson style of the GeoJson layers mixin or you will have to implement a getGeoJsonOptions() method in your map component
  • GeoJson layers adds methods to ease GeoJson and timestamped GeoJson layers addition to the map
    • it will use the statically configured GeoJson style or you can implement the following methods on your map component to have dynamic styling of your features:
      • getFeaturePopup(feature, layer) to provide an HTML popup content to bind
      • getFeatureTooltip(feature, layer) to provide a tooltip content to bind
      • getFeatureStyle(feature) to provide a style object for your line/polygon features
      • getPointMarker(feature, latlng) to provide a marker object for your point features
  • Scalebar adds a scalebar on the map
  • Measure adds a measure control on the map using Leaflet.Measure
  • Fullscreen adds a fullscreen control on the map using Leaflet.Fullscreen
  • Legend adds a legend control on the map using Leaflet.Legend, the legend is attached to the last forecast layer that has been made visible

A Weacast map relies on a configuration object detailing mixins to be used with their options like this:

module.exports = {
  ...
map: {
    // Mixins to be applied to map
    mixins: [ 'base', 'baseLayers', 'forecastLayers', 'geojsonLayers', 'fileLayers', 'fullscreen', 'measure', 'scalebar', 'legend' ],
    // Config for Base Layers mixin
    baseLayers: [
      {
        type: 'tileLayer',
        arguments: [
          'https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',
          {
            maxZoom: 20,
            label: 'Streets',
            attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
          }
        ]
      },
      ...
    ],
    // Config for Forecast Layers mixin
    forecastLayers: [
      {
        type: 'FlowLayer',
        options: {
          elements: ['u-wind', 'v-wind'],
          attribution: 'Forecast data from <a href="http://www.meteofrance.com">Météo-France</a>',
        }
      },
      ...
    ],
    // Default GeoJSON layer style for polygons/lines in File Layers mixin
    featureStyle: {
      opacity: 1,
      radius: 6,
      color: 'red',
      fillOpacity: 0.5,
      fillColor: 'green',
      popup: {
        excludedProperties: ['wikipedia']
      }
    },
    // Default GeoJSON layer style for points in File Layers mixin
    pointStyle: {
      type: 'circleMarker',
      options: {
        opacity: 1,
        color: 'red',
        fillOpacity: 0.5,
        fillColor: 'green'
      }
    }
  }
...

results matching ""

    No results matching ""