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.

WARNING

Mixins are only part of the demo application. If you'd like to build client applications using Weacast you'd better have a look to our client API layer in core module and build your own map component using dedicated map engine modules like our Leaflet plugin.

Map mixins

The 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'
      }
    }
  }
...