# datamaps-icons > A Datamaps plugin to display a layer of icons on a Datamap svg Latest version **0.2.7** (published 2018-01-22) · ISC license · 0 weekly downloads ## Install ```sh npm install datamaps-icons pnpm add datamaps-icons yarn add datamaps-icons bun add datamaps-icons ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.2.7 | | Published | 2018-01-22 | | First published | 2015-09-28 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 3 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 5 | | Author | Joel Lubrano | | Maintainers | jdlubrano | | Keywords | d3, datamaps, icons | ## Links - npm: https://www.npmjs.com/package/datamaps-icons - Repository: https://github.com/jdlubrano/datamaps-icons-plugin - Homepage: https://github.com/jdlubrano/datamaps-icons-plugin#readme - Issues: https://github.com/jdlubrano/datamaps-icons-plugin/issues - npm.io page: https://npm.io/package/datamaps-icons ## Dependencies (3) - [d3](https://npm.io/package/d3.md) ^3.5.6 - [datamaps](https://npm.io/package/datamaps.md) ^0.4.0 - [topojson](https://npm.io/package/topojson.md) ^1.6.0 ## Alternatives - [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads - [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads - [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads - [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads - [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads ## Recent versions - 0.2.7 (latest) — 2018-01-22 - 0.2.6 — 2016-06-12 - 0.2.5 — 2015-11-02 - 0.2.3 — 2015-10-28 - 0.2.2 — 2015-10-28 - 0.2.1 — 2015-10-05 - 0.2.0 — 2015-10-05 - 0.1.1 — 2015-10-02 - 0.1.0 — 2015-10-02 - 0.0.3 — 2015-09-28 - 0.0.2 — 2015-09-28 - 0.0.1 — 2015-09-28 ## README # Datamaps Icons Plugin [![Build Status](https://travis-ci.org/jdlubrano/datamaps-icons-plugin.svg?branch=master)](https://travis-ci.org/jdlubrano/datamaps-icons-plugin) ## Contributors * Joel Lubrano ## Description This project provides a plugin for generating a layer of customizable icons on top of a D3/Datamaps svg. ## Getting Started ### Git Clone the project via `git`. Dependencies can be installed with `npm install`, and running `grunt` will build the source code. The original and minified versions will be present in the `build` directory. ### NPM Run `npm install datamaps-icons`. The source will then be located in `node_modules/datamaps-icons/build`. ## Example Usage ```javascript // Create a Datamaps instance var dm = new Datamap({ element: document.getElementById('map') }); // Retrieve the data for rendering icons var iconsData = [ { // the icon's latitude lat: [int], // the icon's longitude lng: [int], // CSS class name that is to be appended to the class set // via the options parameter, cssClass: [optional, String], // The svg element for an icon. // This parameter overrides the iconFn passed in the options parameter. icon: [optional, DOM element], // Click event options click: { // overrides the click.onClass property in the // options parameter for an individual icon onClass: [optional, String], // overrides the click.offClass property in the options // parameter for an individual icon offClass: [optional, String] }, hover: { // overrides the hover.overClass property in the options paramter // for an individual icon overClass: [optional, String], // overrides the hover.outClass property in the options parameter // for an individual icon outClass: [optional, String] } }, ... ]; // Setup the options for the icons plugin (defaults given) // These options will apply to all icons unless they are overridden // at the data level. // All properties are optional. var iconOpts = { // The CSS class given to all icons cssClass: 'datamap-icon', // A function that returns an SVG element to serve as an icon. iconFn: function() { return a black circle with radius 5. }, // Hover event options hover: { // Hover functions are passed the icon svg // element as their context (i.e. this) // and the icon's data and index are passed as arguments. // A function to be executed when an icon undergoes a mouseover event. overFn: null, // A function to be executed when an icon undergoes a mouseout event. outFn: null, // A CSS class applied to an icon on a mouseover event. overClass: 'hover-over', // A CSS class applied to an icon on a mouseout event. outClass: 'hover-out', }, click: { // Allow multiple icons to be in a clicked state allowMultiple: false, // Click functions are called with the icon svg element as the context // and the icon's data as the first argument. // A function to be executed when an icon is clicked // and was previously in an unclicked state. onFn: null, // A function to be executed when an icon is clicked // and was previously in a clicked state. offFn: null, // A CSS class applied to an icon in a clicked state. onClass: 'click-on', // A CSS class applied to an icon in an unclicked state. This does not get // applied to icons by default, only after the icon is clicked on // then later clicked off does this class get applied. offClass: 'click-off', // Execute the clickOff function for all icons in a clicked state when the // Datamaps svg is clicked but an icon was not. clickOffOnClickAway: false, // A function to be executed when the Datamaps svg is clicked // but an icon was not. The Datamaps object is passed as the context. awayFromIconFn: null } }; // call the icons plugin dm.icons(iconsData, iconOpts); ``` Also see `examples/basic.html`. ## Dependencies See `package.json`. --- _Source: https://npm.io/package/datamaps-icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._