Mixins

Mixins (opens new window) are a flexible way to distribute reusable functionalities for Vue components (opens new window). 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.

WARNING

Mixins are only part of the legacy Weacast client module (opens new window), which will not evolve anymore (see discussion here (opens new window)) and will only be maintained for the purpose of our demo application (opens new window). If you'd like to build client applications using Weacast you'd better have a look to our client API layer in core module (opens new window) and build your own map component using dedicated map engine modules like our Leaflet plugin (opens new window).

Map mixins

A Weacast map is based on a Leaflet (opens new window) map object.

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

• Mandatory Base (opens new window) mixin simply initialize the underlying Leaflet map object and registered controls by other mixins
• Base layers (opens new window) adds a base layer selector on the map using Leaflet.Basemaps (opens new window)
• Forecast layers (opens new window) adds a configured set of forecast layers to the map
• File layers (opens new window) adds a file-based layer (GeoJSON or KML) uploader to the map using Leaflet.Basemaps (opens new window)
  • 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 (opens new window) adds methods to ease GeoJson (opens new window) 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 (opens new window) to bind
    • getFeatureTooltip(feature, layer) to provide a tooltip content (opens new window) to bind
    • getFeatureStyle(feature) to provide a style object (opens new window) for your line/polygon features
    • getPointMarker(feature, latlng) to provide a marker object (opens new window) for your point features
• Scalebar (opens new window) adds a scalebar (opens new window) on the map
• Measure (opens new window) adds a measure control on the map using Leaflet.Measure (opens new window)
• Fullscreen (opens new window) adds a fullscreen control on the map using Leaflet.Fullscreen (opens new window)
• Legend (opens new window) adds a legend control on the map using Leaflet.Legend (opens new window), 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'
      }
    }
  }
...