Skip to content

Latest commit

 

History

History
86 lines (66 loc) · 2.27 KB

README.md

File metadata and controls

86 lines (66 loc) · 2.27 KB

ng-maphilight

An Angular 8 component that adds highlights to image maps.

alt text

Usage

Install the package via npm or yarn:

npm i ng-maphilight --save
yarn add ng-maphilight

Import jQuery and maphilight plugin into the <head></head> of the index.html file:

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/jquery.js"></script>
  <!-- or however you want to include -->

  <script src="https://rawcdn.githack.com/kemayo/maphilight/7932449fbc49c7767fbd72a807110c632c11ee95/jquery.maphilight.js"></script>

In your module:

import { MaphilightModule } from 'ng-maphilight'

and add MaphilightModule to the imports array.

In your component class, define a config property:

  config = {
    fade: true,
    alwaysOn: false,
    neverOn: false,

    // fill
    fill: true,
    fillColor: '#ffffff',
    fillOpacity: 0.4,

    // stroke
    stroke: true,
    strokeColor: '#4d0ec0',
    strokeOpacity: 1,
    strokeWidth: 1,

    // shadow:
    shadow: true,
    shadowColor: '#000000',
    shadowOpacity: 0.8,
    shadowRadius: 10
  }

In your template, wrap an <img> and <map> element with a <maphilight> element:

      <maphilight
        id="statesMap"
        [config]="config"
      >
        <img src="assets/states_imgmap.gif">
        <map>
          <area shape="poly" ...>
        </map>
      </maphilight>

Examples and Documentation:

Dependencies

Both are currently assumed/required to be available in the global namespace (window.jQuery) but a pull request that makes it use import and npm packages would be gladly accepted if you can get that to work.

Development

Uses the Angular CLI. See README.ng.md for more information.