html – i am developing an existing angular map to add zoom in and out feature but the pins aren’t fixed on the image while zooming


 var all = document.getElementsByClassName('pin');
   

function zoomin() {
    var GFG = document.getElementById("imgcont");
    
   
    var currWidth = GFG.clientWidth;
    GFG.style.width = (currWidth + 100) + "px";
    
for (var i = 0; i < all.length; i++) {
  //this for loop is not used , i have tried to edit pins position through the style.
  //  all[i].style = "top:{{Building.inn_top}}px;left:{{Building.inn_left}}px;background:none;border:none;";

  
}

  
}

function zoomout() {
    var GFG = document.getElementById("imgcont");
    var currWidth = GFG.clientWidth;
    GFG.style.width = (currWidth - 100) + "px";
   
   
for (var i = 0; i < all.length; i++) {

 //  all[i].style = "top:{{Building.inn_top}}px;left:{{Building.inn_left}}px;background:none;border:none;";

}
}
<div class="img-project" id="imgcont" >

                    <a class="pin project1" ng-click="SelectBuilding(this)" data-isunit="false" data-toggle="{{Building.inn_unitsid}}" ng-repeat="Building in AllMappedBuldings" id="{{Building.inn_unitsid}}" title="{{Building.inn_name}}" data-top="{{Building.inn_top}}" data-left="{{Building.inn_left}}" style="top: {{Building.inn_top}}px;left:{{Building.inn_left}}px;background:none;border:none;">
                    <i class="fa fa-map-marker map-pin" style="color: {{Building.Color}};"></i>
                </a>
               
            </div>



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here