Geofluxus-map NPM

geofluxus-map

To use, either install through NPM:

npm install geofluxus-map

or add the following in vanilla:

<script src="https://cdn.jsdelivr.net/npm/geofluxus-map@version/dist/index.js"></script>
<link href="https://cdn.jsdelivr.net/npm/geofluxus-map@version/dist/index.css" rel="stylesheet" type="text/css">

The following visualizations are available:

Map: A basic visualization for creating and styling simple maps with tooltips
NetworkMap: A map visualization for distributions along road networks
MapChart: A map visualization for qualitative information over areas
ChoroplethMap: A map visualization for quantitative information over areas
FlowMap: A map visualization for data flows

To initialize any visualization, first create a target HTML element with id to host the map:

<div id="map"></div>

ATTENTION! Make sure that you have specified both the width and height of the target element.

Then, initialize a simple map in NodeJS:

import Map from 'geofluxus-map';
const map = new Map({target: "map"});

or in vanilla JS:

const map = new gFMap.Map({target: "map"});

Map

new Map(options)

Options

target (string): The id of the HTML element to host the map.

projection (string): The map projection (EPSG code) for rendering feature geometries. The default projection for input geometries is EPSG:4326 (WGS84) which corresponds to longitude / latitude coordinates. All input geometries are transformed to EPSG:3857 (Web Mercator).

base (object): The map background
- source (string): Background provider.\ Available options: 'osm', 'cartodb_dark', 'cartodb_light'
- opacity (float): The background opacity. Ranges in 0, 1.

view (object): The map view
- zoom (object): The zoom level
- minZoom (float): Minimum zoom level
- maxZoom (float): Maximum zoom level
- center (Array): The map center. Coordinates provided in map projection (ie. 0, 0)

controls (object): Enables / disables map control buttons on the top left corner of the map. All buttons are active by default.
- zoom (boolean): Allows zooming via mouse & keyboard. If disabled, zoom is available only via the map zoom controls on the top left corner of the map.
- drag (boolean): Allows dragging along the map
- fullscreen (boolean): Activates the fullscreen button
- reset (boolean): Activates the reset button. Allows to reset to the initial view extent (either the initial map view or one specified by focusing on certain layer)
- exportPNG (boolean): Activates the screenshot button. Allow to export a png version of the map on the current view.

hover (object): Enables hover interactions
- tooltip (object): Enables HTML div tooltip on hover over feature.
  - body (function): A function which iterates through the map features and load the tooltip content in HTML
  - style (object): Define tooltip style as an object with CSS properties such as borderRadius, fontFamily etc.
- style (object): Enables feature highlighting on hover, defined as an OpenLayers style object.
  - stroke (object): Style of feature boundary.
    - color (string): Stroke color. Available formats: RGB, RGBA, HEX.
    - width (float): Stroke width.
  - fill (object): Style of feature surface.
    - color (string): Fill color. Available formats: RGB, RGBA, HEX.
  - zIndex (float): Define z-index for a highlighted feature

Methods

addVectorLayer(name, options)
Description
Define a vector layer to load geometric features on it\ ATTENTION! For multiple layers, make sure each of them has a unique name. Keep in mind that each layer can host ONLY one type of geometry (see the available options for a vector layer below).
Arguments
- name (string): A string to define the layer name
- options (object):
  - style (object): Define an OpenLayers style for the layer
    - stroke (object): Style of feature boundary
      - color (string): Stroke color. Available formats: RGB, RGBA, HEX.
      - width (float): Stroke width
    - fill (object): Style of feature surface
      - color (string): Fill color. Available formats: RGB, RGBA, HEX
    - zIndex (float): Define z-index for layer features
    - image (object): (For point layers) Define one of the following: 1) Circle (for simple representation)
      - radius (float): Circle radius
      - stroke (object): Style of feature boundary
        color (string): Stroke color. Available formats: RGB, RGBA, HEX.
        width (float): Stroke width
      - fill (object): Style of feature surface * color (string): Fill color. Available formats: RGB, RGBA, HEX 2) Icon (for shapes other than circle)
      - icon (object): Defines icon properties scale (float): Icon scale radius (string): A url to the icon to be used (svg, png etc.) 3) Text (for labels instead of shapes - for example, for labels over polygon centroids)
      - text (object): Defines text properties
        text (string): Text content
        font (float): Font size
        textBaseline (string): Anchor of text from geometry. Available options: 'bottom', 'top', 'middle'
        textBaseline (string): Anchor of text from geometry. Available options: 'bottom', 'top', 'middle'
        fill (object): Text fill
        color (string): Fill color. Available formats: RGB, RGBA, HEX

addFeature(layer, geometry, options)
Description
Add feature to an existing layer
Arguments
- name (string): The layer name to which the feature belongs
- geometry (object): The feature geometry. Should be provided from GeoJSON format containing (a) the geometry type & (b) the geometry coordinates.\ Supported geometry types: Point, LineString, MultiLineString, Polygon, MultiPolygon
- options (object):
  - style (object): OpenLayers style for feature
    - stroke (object): Style of feature boundary.
      - color (string): Stroke color. Available formats: RGB, RGBA, HEX.
      - width (float): Stroke width.
    - fill (object): Style of feature surface.
      - color (string): Fill color. Available formats: RGB, RGBA, HEX.
    - zIndex (float): Layer z-index. By default, OpenLayers renders features in Last In, FirstOut order (the last layer declared is rendered on canvas top).
    - image (object): (For point layers) Define one of the following: 1) Circle (for simple representation)
      - radius (float): Circle radius
      - stroke (object): Style of feature boundary
        color (string): Stroke color. Available formats: RGB, RGBA, HEX.
        width (float): Stroke width
      - fill (object): Style of feature surface * color (string): Fill color. Available formats: RGB, RGBA, HEX 2) Icon (for shapes other than circle)
      - icon (object): Defines icon properties scale (float): Icon scale radius (string): A url to the icon to be used (svg, png etc.) 3) Text (for labels instead of shapes - for example, for labels over polygon centroids)
      - text (object): Defines text properties
        text (string): Text content
        font (float): Font size
        textBaseline (string): Anchor of text from geometry. Available options: 'bottom', 'top', 'middle'
        textBaseline (string): Anchor of text from geometry. Available options: 'bottom', 'top', 'middle'
        fill (object): Text fill
        color (string): Fill color. Available formats: RGB, RGBA, HEX
- props (object): Add to feature properties other than geometry with key-value pairs (ie. if you want to later call them in the map tooltip)

focusOnLayer(name)
Description
Set map view to the extent of an existing layer
Arguments
- name (string): The name of the layer to focus on

setVisible(name, visible)
Description
Change visibility of an existing layer
Arguments
- name (string): The layer name
- visible (boolean): Turn to visible (true) or not (false)

changeBase(base)
Description
Change base layer of map
Arguments
- base (string): The source name of the new base layer (check here for options)

stylizeButtons(options)
Description
Change the style of the map buttons
Arguments
- options (object): Define button style as an object with CSS properties such as borderRadius, fontFamily etc.

NetworkMap (extends Map)

new NetworkMap(options)

Options

controls (object): Enables / disables control on top of basic map controls (check here)
- toggleNetwork (boolean): Allows to show/hide parts of network with zero amount
- toggleLegend (boolean): Allows to show/hide the map legend
- toggleLight (boolean): Allows to interchange between dark & light mode map
data (Array): Loads the network map data
scale (Array): A array of strings which defines the map color scale. Default color scale provided by ColorBrewer
legend (object): Defines the legend title, width, height and other CSS properties
- title (string): The legend title
- width (float): The legend width provided in pixels
- height (float): The legend height provided in pixels

MapChart (extends Map)

new MapChart(options)

Options

controls (object): Enables / disables control on top of basic map controls (check here)
- toggleLegend (boolean): Allows to show/hide the map legend
- toggleLight (boolean): Allows to interchange between dark & light mode map
data (Array): Loads the map chart data
scale (Object): An object which assigns a color to each value of the groupBy property
groupBy (Array): The property for splitting and coloring flows into groups
legend (object): Defines the legend title, width, height and other CSS properties
- title (string): The legend title
- width (float): The legend width provided in pixels
- height (float): The legend height provided in pixels

ChoroplethMap (extends NetworkMap)

new ChoroplethMap(options)

Options

controls (object): Enables / disables control on top of basic map controls (check here)
- toggleLegend (boolean): Allows to show/hide the map legend
- toggleLight (boolean): Allows to interchange between dark & light mode map
- toggleTransparency (boolean): Allows to interchange between transparent and opaque fills
data (Array): Loads the choropleth map data
scale (Array): A array of strings which defines the map color scale. Default color scale provided by ColorBrewer
legend (object): Defines the legend title, width, height and other CSS properties
- title (string): The legend title
- width (float): The legend width provided in pixels
- height (float): The legend height provided in pixels

FlowMap (extends Map)

new FlowMap(options)

Options

controls (object): Enables / disables control on top of basic map controls (check here)
- toggleFlows (boolean): Allows to show/hide map flows
- toggleNodes (boolean): Allows to show/hide map nodes
- animate (boolean): Allows to animate flows
- toggleLegend (boolean): Allows to show/hide the map legend
- toggleLight (boolean): Allows to interchange between dark & light mode map
data (Array): Loads the flowmap data
scale (Object): An object which assigns a color to each value of the groupBy property
groupBy (Array): The property for splitting and coloring flows into groups
minFlowWidth (float): The minimum flow width
maxFlowWidth (float): The maximum flow width
animate (float): Defines the default animation mode\ Available options: 0 (No animation), 1 (Dash animation)
legend (object): Defines the legend title and other CSS properties
- title (string): The legend title
tooltip (object): The map tooltip. Overrides the map hover option.
- body (function): A function which iterates through the map features and load the tooltip content in HTML
- style (object): Define tooltip style as an object with CSS properties such as borderRadius, fontFamily etc.