Perspective Viewer Plugin Template

A mapp view plugin for Perspective

Setup

  yarn
  yarn start

or with npm:

  npm install
  npm run start

About the plugin

It uses OpenLayers and OpenStreetMap to display data as a map view.

See the "making-of" blog article Perspective Plugin API - How to build a new plugin;

Point maps

The "Map Points" view requires a "Longitude" and "Latitude" parameter to show the data as points on the map.

Region maps

The "Map Regions" view doesn't need coordinates, but requires a boundary map to associate with the data. It matches the "group" to the region and color codes the region.

For example, if "Group By" is "Country", you'll need to register a map boundary source with the command:

  registerMapRegions({
      name: "Country", 
      url: "https://opendata.arcgis.com/datasets/252471276c9941729543be8789e06e12_0.kml",
      key: "Country"
  });

• name is the name of the parameter in the "Group By" field
• url is the boundary data file to load
• key is the name of the property in the boundary data that identifies the region (e.g. the country name in this example), or a function that takes an array of feature parameters from file, and returns a value to match to the data group. Using a function is useful if the feature names don't match the data group, and some translation is required.
• format (optional) specifies the format for loading the features. Defaults to KML, which is:

  // KML format (remove syles so they can be applied by the plugin)
  format = new KML({extractStyles: false})

See the OpenLayers documentation for more information about FeatureFormat

Themes

Perspective viewer itself, and the map plugin can be themed.

The plugin includes a dark-theme file maps.plugin.dark.css, with some default theme variables. Alternatively, you can override specific theme variables using a style block:

  <style>
    perspective-viewer {

      // Change the first 2 categories to red and green
      --map-category-1: #ff0000;
      --map-category-2: #00ff00;

      // Change the color gradient to blue-grey-red
      --map-gradient: linear-gradient(#0000ff 0%, #a0a0a0 50%, #ff0000 100%);

      // Change the source url for the map tiles
      --map-tile-url: "http://{a-c}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"
    }
  </style>

Examples

UK MetOffice Sites plotted by lat/long or region

NewYork Citibikes map showing a live-updated view of Citibikes availability

World Airports plotted by lat/long or region