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"});
new Map(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
-
view (object): The map view
-
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
- addVectorLayer(name, options)
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).- 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
- 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:
- Circle (for simple representation)
- Icon (for shapes other than circle)
- 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
- text (object): Defines text properties
- style (object): Define an OpenLayers style for the layer
- addFeature(layer, geometry, options)
Add feature to an existing layer
- 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.
- 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:
- Circle (for simple representation)
- Icon (for shapes other than circle)
- 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
- text (object): Defines text properties
- style (object): OpenLayers style for feature
- 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)
-
Set map view to the extent of an existing layer
- name (string): The name of the layer to focus on
-
Change visibility of an existing layer
-
Change base layer of map
-
Change the style of the map buttons
- options (object): Define button style as an object with CSS properties such as borderRadius, fontFamily etc.
- options (object): Define button style as an object with CSS properties such as borderRadius, fontFamily etc.
new NetworkMap(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
new MapChart(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
new ChoroplethMap(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
new FlowMap(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.
- Change version in package.json
- npm run build (Builds index.js & index.css for vanillaJS)
- npm publish (Releases npm package)