Antoine Antoine - 1 year ago 266
AngularJS Question

How to configure angular-maphilight

I'm working with angular 1.5 if I'm not mistaken and I'm trying to highlight image's area map. I found angular-maphilight but after the two first steps when I launch my project I receive

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module angular-maphilight due to:
Error: [$injector:nomod] Module 'angular-maphilight' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I checked that
"angular-maphilight": "*"
was added in the
and the folder angular-maphilight into bower_components


(function() {
'use strict';

.module('app', [...., 'angular-maphilight']);


"name": "mwaApp2",
"version": "0.0.0",
"dependencies": {
"jquery": "2.2.x",
"angular": "1.5.x",
"angular-maphilight": "*"
"devDependencies": { ...

and here my rendition.html

<div class="row">
<div class="col-sm-12">
<!--<angular-maphilight id="MapTitle">-->

<img src="{{ rd.paragraph.field_indesign_rendition[1].url }}" height="{{ rd.obj.elem.pageHeight }}" width="{{ rd.obj.elem.pageWidth }}">

<div ng-repeat="articles in rd.obj.elem.articles">

<area class="area" ng-repeat="articleMembers in articles.articleMembers" shape="poly" title="{{}}"
coords='{{ articleMembers.geometricBounds[1] }}, {{ articleMembers.geometricBounds[0] }},
{{ articleMembers.geometricBounds[1] }}, {{ articleMembers.geometricBounds[2] }},
{{ articleMembers.geometricBounds[3] }}, {{ articleMembers.geometricBounds[2] }},
{{ articleMembers.geometricBounds[3] }}, {{ articleMembers.geometricBounds[0] }}'



Answer Source

Module name for Angular Maphighlight is ngMapHilight not angular-maphighlight

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download