Issue with clickable area in an AGM-MAP

25 views Asked by At

I am having an issue when I show a map in my webpage and I have some icons inside it. The issue is with the area of the icon when the click triggers an action. Because it has a big square arround each icon: Example of the area where a click

As you can see on the screenshot, all the blue square around my icon has the same behavior as if I click inside it. I would like to fit to the form of the icon the action radious to avoid, as you can see in the screeshot, clicking elements (as the one on the left where I am pointing in the image) and performing the action to other elements near them.

I have the icon in PNG but it is fit when I see it on the windows images. As you can see, in the windows folder the margins of the square are much thiner than when I display the icons on the map.I have them too in .svg but it has the same results in the AGM MAP: Example using a SVG file

The code for my map is:

                    <agm-map
                    [scrollwheel]="null"
                    (idle)="updateMapCenter()"
                    (mapReady)="getMapInstance($event)"
                    [latitude]="latCentroMobile"
                    [longitude]="lonCentroMobile"
                    [zoom]="zoomMobile"
                    (boundsChange)="checkMarkersInBounds($event)"
                >
                    <agm-marker-cluster
                        [imagePath]="'https://github.com/googlemaps/js-marker-clusterer/blob/gh-pages/images/m1.png?raw=true'"
                        [styles]="mapOptions.styles"
                        [calculator]="mapOptions.calculator"
                        style="background-repeat: no-repeat"
                        [maxZoom]="15"
                        [minimumClusterSize]="2"
                    >
                        <agm-marker
                            *ngFor="let m of mupisFiltered; let i = index"
                            [markerClickable]="!isDisabled(m)"
                            (markerClick)="selectMupi1(m.index)"
                            [latitude]="m.lat"
                            [longitude]="m.lon"
                            [iconUrl]="{
                                url: '../../../assets/img/icons/soportes/svg/10.svg',
                                scaledSize: { height: 35, width: 35 }
                            }"
                        ></agm-marker>
                    </agm-marker-cluster>
                </agm-map>

I don't modify nothing in my TS file related to the map.

Can someone help me with that?

Best regards

0

There are 0 answers