Image map doesn't work good

ionic-v1
1

Hi all,

I trying to create an image map with ionic but this image map is not responsive, everyone know a plugin or similar that allow me to create an image map responsive? I tryed this one https://github.com/cowglow/angular-image-maps-rwd but it doesn’t work.

Please help me :smile:
Thanks

2

I’d like this too, for navigation in some sections of apps.

3

I just used this tool but if I install my app on my tablet the responsive of tool doesn’t work. probably I do some mistakes in my code?

So lets look it

index.html

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta name="msapplication-tap-highlight" content="no" />
<title></title>

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- cordova Native Audio plugin js-->
<script src="js/cordovaNativeAudio.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>

<!-- image map angular js -->
<script src="js/angular-rwdImageMaps.min.js"></script>

in my template.html

<img class="rwdimgmap" src="img/image.png" style="margin-top:10%;width:100%;height:auto;" usemap="#hangdrum">
    		<map name="hangdrum">
    			<area class="drum" id="A" shape="circle" coords="268,100,27" ontouchstart="audio.play('A');" ontouchend="audio.touchEnd(event);" onFocus="this.blur()">

in app.js

angular.module('starter', ['ionic', 'starter.controllers', 'rwdImageMaps'])

and finish… I don’t add no others lines of code for using this feature…

5

I think this is the integration with the ionic plugin for angularjs which is causing the problem. I copied past the example of the plugin utilisation. Everything worked fine until I added the ionic plugin to the module.

This work :

angular.module('map', ['rwdImageMaps']);

This is not working :

angular.module('map', ['rwdImageMaps', 'ionic']);

Looks like the ionic integration with angularjs is flawed.

6

There is only one line which is causing problems.

Replace

angular.element($window).resize(resize).trigger('resize');

by

element.bind('load', my_resize());

And the image will be resized, as well as the map, on loading.

I failed to make it be resized every time the window is resized.

7

What is my_resize()?

8

use this plugin and simple code
https://www.npmjs.com/package/image-map-resizer

     <img usemap="#image-map" src="/img/new/3.jpg" style="height:640;width: 100%;">
     <map name="image-map">
       <area shape="poly" alt="blue" title="blue" onclick="selectRegion('blue')"
             coords="123,145,414,134,406,269,132,284">
       <area shape="poly" alt="yellow" title="yellow" onclick="selectRegion('yellow')"
             coords="309,292,464,243,613,285,600,378,512,414,396,440,319,387">
       <area shape="poly" alt="pink" title="pink" onclick="selectRegion('pink')"
             coords="435,467,707,465,709,605,457,610,432,544">
       <area shape="poly" alt="orange" title="orange" onclick="selectRegion('orange')"
             coords="426,738,714,730,724,871,430,869">
       <area shape="poly" alt="orange" title="orange" onclick="selectRegion('orasssnge')"
             coords="317,934,625,928,626,1043,330,1050">
       <area shape="poly" alt="orange" title="orange" onclick="selectRegion('owefwerasssnge')"
             coords="110,1040,301,1027,413,1143,303,1187,135,1168">
     </map>

     <script>
       $('map').imageMapResize();

       function selectRegion(srt) {
         alert(srt);
       }
     </script>
1 Like