Home/ Questions/Q 8253369
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T00:51:19+00:00

I am trying to use ImageMapster plugin for my application. It works fine when

  • 0

I am trying to use ImageMapster plugin for my application. It works fine when using static image map in html. But my problem is that, when am rendering image and area tag through jquery, it is not working. I am using web api for getting attributes for image.

Here is my script :

$(document).ready(function () {

       var iiim = "";
       var url = 'http://mobileappapi.azurewebsites.net/api/HomeApiImage';
       $.get(url, function (data) {
           iiim = data["BgImg"];
           var url = 'http://mobileappapi.azurewebsites.net/api/HomeApi';
           $.get(url, function (data) {


               $('#map_demo').prepend('<img  src="' + iiim + '" usemap="#usa" id="myimage" style="margin-top:43px;"/>')
               for (var i = 0; i < data.length; i++) {

                   $('#usa_image_map').append('<area href="#" coords="' + data[i].Node_Location + '" state="n' + i + '" shape="rect" title="' + data[i].Node_Title + '" />')


               }
           }, "jsonp");

       }, "jsonp");


       $('#myimage').mapster({

           fillColor: 'ff0000',
           fillOpacity: 0.3
       });
   });

here is my html code,

 <body>
<div id="map_demo"> 
</div>
    <map id="usa_image_map" name="usa">
    </map>


 </body>

Please help me,
Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    $.get() is an AJAX function; as such, it hasn’t finished generating the new images before your .mapster method runs.

    You have to put your .mapster call in your .get callback, after the image is created, to make sure it runs at the correct time.

    Try this:

    $(document).ready(function () {

    var iiim = "";
    var url = 'http://mobileappapi.azurewebsites.net/api/HomeApiImage';
    $.get(url, function (data) {
        iiim = data["BgImg"];
        var url = 'http://mobileappapi.azurewebsites.net/api/HomeApi';
        $.get(url, function (data) {
            $('#map_demo').prepend('<img  src="' + iiim + '" usemap="#usa" id="myimage" style="margin-top:43px;"/>')
            for (var i = 0; i < data.length; i++) {
                $('#usa_image_map').append('<area href="#" coords="' + data[i].Node_Location + '" state="n' + i + '" shape="rect" title="' + data[i].Node_Title + '" />')
            }
            $('#myimage').mapster({
                fillColor: 'ff0000',
                fillOpacity: 0.3
            });
        }, "jsonp");
    }, "jsonp");

});
    • 0