Perspective Map

🗺

Includes a map of Leaflet in Perspective by Populate

Table of Contents

• Installation
• Requeriments
• Dependencies
• How to use
• Examples
• Development

Installation

You can also load directly from UNPKG as a standalone library.

<scriptsrc="https://unpkg.com/@finos/perspective@0.6.2/dist/umd/perspective.js"></script><scriptsrc="https://unpkg.com/@finos/perspective-viewer@0.6.2/dist/umd/perspective-viewer.js"></script><scriptsrc="https://unpkg.com/@finos/perspective-viewer-datagrid@0.6.2/dist/umd/perspective-viewer-datagrid.js"></script><scriptsrc="https://unpkg.com/@finos/perspective-viewer-d3fc@0.6.2/dist/umd/perspective-viewer-d3fc.js"></script><scriptsrc="https://unpkg.com/perspective-map@1.0.1/dist/index.js"></script>

As a module with NPM or YARN

# npm
npm i perspective-leaflet --save-dev
# yarn
yarn add perspective-leaflet

And then import it:

importperspectivefrom"@finos/perspective";import"@finos/perspective-viewer";import"@finos/perspective-viewer-datagrid";import"@finos/perspective-viewer-d3fc";import"@finos/perspective-viewer/themes/all-themes.css";import"perspective-map";

Requirements

The plugin has been tested with the latest versions of Perspective (>= 0.8.0) which was released on 28.04.2021.

You will also need to include the Leaflet CSS

<linkrel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />

Or

import"leaflet/dist/leaflet.css";

How to use

The plugin expects to receive the data as CSV, and it should have a column called geometry, which will have the geospatial data in GeoJSON or TopoJSON format (string-like).

An example:

population,city,geometry785123,"Zaragoza","{""type"":""Point"",""coordinates"":[-0.8850860595703125,41.64828831259533]}"125123,"Teruel","{""type"":""Point"",""coordinates"":[-1.1061859130859375,40.345497469392406]}"785123,"Huesca","{""type"":""Point"",""coordinates"":[-0.41473388671875,42.14202329789122]}"

config-map

You can choose the metric and zoom value of the map with the `map-config. This attribute is optional.

Create an object

constconfigMap={metric: "population",zoom: true}

metric: string This is the column of data used to color the map and display it in the legend. If not defined, the map uses the first value of the data. zoom: boolean, enable/disable the zoom of the map.

Stringify the object to add it as an attribute to the perspective-viewer.

constelement=document.getElementsByTagName("perspective-viewer")[0];element.setAttribute("config-map",JSON.stringify(configMap))

CSS

You can override the color scale using custom properties. To create color scales for maps, we recommend using ColorBrewer

In your CSS, you should override the custom properties that we have created.

:root {
--perspective-map-range-1:#fef0d9;
--perspective-map-range-2:#fdcc8a;
--perspective-map-range-3:#fc8d59;
--perspective-map-range-4:#e34a33;
--perspective-map-range-5:#b30000;
--perspective-map-category-1:#feebe2;
--perspective-map-category-2:#fbb4b9;
--perspective-map-category-3:#f768a1;
--perspective-map-category-4:#c51b8a;
--perspective-map-category-5:#7a0177;
}

Examples

Choroplet spanish regions

Choroplet spanish regions override scale color

Map marker

Chroloplet map with Vue

Development

• Clone the repo
• Install dependencies
• Start coding!
• Send a PR