https://github.com/iqual-ch/iq_datamaps

https://github.com/iqual-ch/iq_datamaps

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/iqual-ch/iq_datamaps
• Owner: iqual-ch
• Created: 2023-01-04T14:13:03.000Z (about 2 years ago)
• Default Branch: 2.x
• Last Pushed: 2023-10-27T13:50:01.000Z (about 1 year ago)
• Last Synced: 2024-11-16T16:48:07.151Z (about 2 months ago)
• Language: JavaScript
• Size: 23.4 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


# iq_datamaps

A basic wrapper for Map Integrations using [DataMaps](http://datamaps.github.io/).

## Background

Every now and then, we need to implement some sort of map functionality that

cannot be achieved using Google maps. DataMaps provides a powerfull, highly

customizable framework for any kind of map functionalities. The purpous of this

module is to provide a basic wrapper to easily integrate DataMaps into web

projects.

## Usage

The modul provides a Drupal library containing all necessary assets:

    iq_datamaps/datamaps_base

It can be attached like any other drupal library. Besided the DataMaps

distribution it contains very basic map and tooltip styling and a JS class to

interact with DataMaps JS: `iqDataMapsWrapper`.

### The iqDataMapsWrapper Class

Create a new JS object from the iqDataMapsWrapper class:

    let mapObject = new iqDataMapsWrapper(element);

element: DOM Container element that will hold the map.

The `iqDataMapsWrapper` provides a set of base settings for DataMaps to print a

basic world map and the following methods:

##  clearSettings()

Removes all base settings. DataMap's defaults are now applied.

**Kind**: public function

##  clearSettings()

Removes all base settings. DataMap's defaults are now applied.

**Kind**: public function

##  restoreBaseSettings()

Restores base settings.

**Kind**: public function

##  setScope(scope)

Restores base settings.

**Kind**: public function

| Param  | Type                | Description  |

| ------ | ------------------- | ------------ |

| scope  | string | 3-digit country code of scope. |

##  initMap(scope) ⇒ DataMaps Object

Prints a map with a given set of custom settings.

**Kind**: public function

| Param  | Type                | Description  |

| ------ | ------------------- | ------------ |

| settings  | Object | Custom DataMaps settings. |

##  initMap(scope) ⇒ DataMaps Object

Uses `initMap()` to print a responsive map with a given set of custom settings.

**Kind**: public function

| Param  | Type                | Description  |

| ------ | ------------------- | ------------ |

| settings  | Object | Custom DataMaps settings. |

## Use-cases / examples

Print a (responsive) world map:

    let element = document.getElementById('map-wrapper');

    let dataMap = new  iqDataMapsWrapper(element);

    dataMap.initResponsiveMap();

Highlight countries on world map:

    let element = document.getElementById('map-wrapper');

    let dataMap = new  iqDataMapsWrapper(element);

    let highlights = {

      'CHE': {fillKey:  'active'},

    }

    dataMap.initResponsiveMap({data:  highlights});

Print a swiss map

    let element = document.getElementById('map-wrapper');

    let dataMap = new  iqDataMapsWrapper(element);

    dataMap.setScope('che');

    dataMap.initResponsiveMap({

      setProjection:  function (element) {

        let  scaleFactor = element.offsetWidth * 12.5;

        var  projection = d3.geo.mercator()

          .center([8.2, 46.8182])

          .scale(scaleFactor)

          .translate([element.offsetWidth / 2, element.offsetHeight / 2]);

        var  path = d3.geo.path().projection(projection);

        return { path:  path, projection:  projection };

      }

    });

Print a swiss map with markers

    let element = document.getElementById('map-wrapper');

    let dataMap = new  iqDataMapsWrapper(element);

    let mapMarkers = [

      {

        'radius': 5,

        'latitude': 46.9376,

        'longitude': 7.3950,

        'tooltip_content':  "Oh, hi Marc!",

        'fillKey': 'active'

      }

    ];

    dataMap.setScope('che');

    dataMap.initResponsiveMap({

      setProjection:  function (element) {

        let  scaleFactor = element.offsetWidth * 12.5;

        var  projection = d3.geo.mercator()

          .center([8.2, 46.8182])

          .scale(scaleFactor)

          .translate([element.offsetWidth / 2, element.offsetHeight / 2]);

        var  path = d3.geo.path().projection(projection);

        return { path:  path, projection:  projection };

      }

    }).bubbles(mapMarkers, {

      popupTemplate:  function (geo, data) {

        return  '
' + data.tooltip_content + '
';

      },

      highlightFillColor:  'var(--map-color-active)',

      highlightBorderColor:  'var(--map-color-active)',

    });