Work with Popup() object without marker

[bosiakov]

Hello!

In my project I need to use the popup without marker. I could not find similar cases in the documentation and wrote this

Full example here

    $scope.map = null;
    leafletData.getMap('map').then(function(map) {
        $scope.map = map;
    });
    /* ... */
    $scope.createWindow = function(lat, lng) {
        var html = $compile("<button \
         ng-click='setSourceMarker(" + lat + ","+lng+")'>First button</button> \
         <button class='btn btn-danger btn-block' \
         ng-click='setDestinationMarker(" + lat + ","+lng+")'>Second button</button>")({});
        L.popup()
            .setContent(html[0])
            .setLatLng(L.latLng(lat, lng)).openOn($scope.map)
    }
    $scope.$on("leafletDirectiveMap.click", function(event, args) {
        var leafEvent = args.leafletEvent;
        $scope.createWindow(leafEvent.latlng.lat, leafEvent.latlng.lng)
    });

My problem - I can not send in setContent full html. In general, this method looks awful. What are the ways to solve the problem and whether it is possible to write better?

[tombatossals]

Hi, sorry I don't know how you could compile the HTML inside a L.popup. Using the core leaflet functions (like L.popup) makes you loose some interaction with the directive and the scope.

Haven't you tried to add the marker with a transparent marker? Enablig message compilation in those markers should do the job

This jsfiddle could guide you as a starting point:
http://jsfiddle.net/bz5s7ybm/25/

Please, if you try the solution and it works, update this issue so I can close it.

Cheers

[bosiakov]

I have created a marker with zero transparency and move it to the mouse cursor. But i can not find a way to open a marker pop-up programmatically.

Can you tell me how I can open a marker pop-up programmatically?

[tombatossals]

You can take a look at this example:

http://tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html#/markers/events-add-example

When you click in the map, a marker is added. If you add the marker with the property "focus: true", the marker will be added with the popup opened. You could use labels too:

http://tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html#/markers/label-example

It should be easy to compile the label message too, I haven't coded that before, but I think it should work. If you code a jsfiddle and want to share it, I will add it to the list of examples.

Cheers

[bosiakov]

Here's my solution, but it works is not entirely correct. After the first click the marker moves, but the pop-up does not open.

[tombatossals]

You are right, it's a little bug in the library. The focus message do not open if the marker has moved its position.

I have solved it and make a new example based in your solution, I will publish it with the new version of the library, 1.0. This version makes use of the "lf-center", "lf-tiles", "lf-markers", etc. attributes in the markup, so you will need to change a little your HTML code if you want to use it.

Thanks for reporting and for the jsfiddle!