0

This is a specific Leaflet/AngularJS question and i hope someone can help me.

I use Leaflet (0.7.7) in an AngularJS Application with the ui-leaflet(1.0.0) directive. angular-ui/ui-leaflet

Everything works fine except of tapping the markers on the map for showing the popup on mobile devices (on Desktops everything works fine!). The click event is never fired. Instead of the click event on mobile devices the touchstart and the touchend events are fired while "tapping" on a marker. In the _onUp Method which is being executed after the touchend event there is a little snippet which should perform a simulated click event on the tapped target.

// simulate click if the touch didn't move too much
if (this._isTapValid()) {
    this._simulateEvent('click', first);
}

I included some debug messages and my application executes the _simulateEvent() Method after tapping on a marker. The _simulateEvent() Method simply dispatches a click event on the tapped target:

var simulatedEvent = document.createEvent('MouseEvents');

   simulatedEvent._simulated = true;
   e.target._simulatedClick = true;

    simulatedEvent.initMouseEvent(
         type, true, true, window, 1,
         e.screenX, e.screenY,
         e.clientX, e.clientY,
         false, false, false, false, 0, null);

     e.target.dispatchEvent(simulatedEvent);

But then nothing else happens. The Popup dont appear. When i change the _simulateEvent() Method and "force" a click on the target everything works fine.

e.target.click();

The popup opens on tapping the marker.

Can someone maybe help me or explain me why the official implementation dont work for me?

EDIT: My snippet for adding markers to the Map. I have an array of cities. For each city i add a marker to the markers.

addMarker(city) {
    this.markers[city.id] = {
        lat: city.coordinates.latitude,
        lng: city.coordinates.longitude,
        clickable: true,
        dragable: false,
        focus: false,
        message: markerTemplate,
        getMessageScope: _ => {
            let $childScope = this.$scope.$new();

            this.cities.map((_city) => {
                if (_city.id == city.id) {
                    $childScope.city = _city;
                }
            });

            $childScope.switchToCity = () => {
                this.switchToCity(city.id);
            };

            return $childScope;
        },
        icon: {
            iconUrl:'/images/pin_home.png',
            iconSize: [40, 46],
            iconAnchor: [20, 46]
        },
        label: {
            message: city.name,
            options: {
                noHide: true
            }
        }
    };
}

The markerTemplate is a AngularMaterial md-card directive with some informations about the city. Angular Material md-card

Then i pass the markers array to the leaflet drective:

<leaflet width="100%" height="100%" defaults="vm.mapOptions" maxbounds="vm.maxBounds" markers="vm.markers" lf-center="vm.center" id="world_map"></leaflet>

Where vm is my controller.

Sylar
  • 71
  • 6
  • 1
    Why do you not use the first directive? For ui-leaflet is says that the master branch is not stable yet. However, can you please add some code on how you create your markers? – El Dude May 05 '16 at 17:34

1 Answers1

0

Use viewport height and viewport width instead of percentage in the leaflet directive. 

<leaflet width="100vw" height="100vh" defaults="vm.mapOptions" maxbounds="vm.maxBounds" markers="vm.markers" lf-center="vm.center" id="world_map"></leaflet>

Also make sure you diable the tap on the container

<ion-content data-tap-disabled="true">
louffi
  • 215
  • 5
  • 19