geofluxus-map

Powered by OpenLayers & d3. Check examples on JS (examples) and ReactJS (react-examples).

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.

Release

• Change version in package.json
• npm run build (Builds index.js & index.css for vanillaJS)
• npm publish (Releases npm package)