Skip to content

TylerRick/ng-maphilight

 
 

Repository files navigation

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.

About

An Angular 5 Directive that adds highlights to your HTML image maps.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • HTML 54.1%
  • TypeScript 36.9%
  • JavaScript 8.0%
  • Other 1.0%