Angular-leaflet-directive Custom HTML popup

2
votes

I'm attempting to create a custom popup while using the angular-leaflet-directive. I'm opening the popup from the leaflet.draw on:create event. Here:

map.on('draw:created', function(e) {

    layer = e.layer;
    drawnItems.addLayer(layer);
    var newComment = "Enter Comment";
    var newID = "ID";
    var newGeoJsonFeat = layer.toGeoJSON();
    newGeoJsonFeat.properties = {"comment":newComment, "id":newID};
    console.log(newGeoJsonFeat);

    onEachFeature(newGeoJsonFeat,layer);
    layer.openPopup();
});

Then I'm using @blackjid's logic as seen here: https://github.com/tombatossals/angular-leaflet-directive/issues/238 to bind the custom popup

function onEachFeature(feature, layer) {
    // Create get the view template
    var popupContent = '<div ng-include="\'partials/popup_newfeat.html\'"></div>';
    console.log("assigning popup");

    // Bind the popup
    // HACK: I have added the stream in the popup options
    layer.bindPopup(popupContent,{
      closeButton: false,
      maxHeight: 300,
      feature: feature
    });
};

$scope.$on('leafletDirectiveMap.popupopen', function(event, leafletEvent){

  // Create the popup view when is opened
  var feature = leafletEvent.leafletEvent.popup.options.feature;

  var newScope = $scope.$new();
  newScope.stream = feature;

  $compile(leafletEvent.leafletEvent.popup._contentNode)(newScope);
});

Long story short, Everything works fine except the popup container isn't resizing properly to fit the new content. The height seems right, but the width is off.

I tried using:

.leaflet-popup-content {
    width:auto !important;
}

Which will probably suffice, but this causes the popup anchor to shift to the bottom left of the popup for some reason. AutoPan is also broken when clicking near the top of the map.

Does anyone know where and how I can get popup.update() to fire? I believe thats what needs to happen, but I don't know where to implement it. I've tried calling it after layer.openPopup() like so:

    onEachFeature(newGeoJsonFeat,layer);
    layer.openPopup();
    layer.getPopup().update();
});

But that doesn't seem to do anything. Any help is greatly appreciated!

2
javascriptangularjspopupleafletangular-leaflet-directive

2 Answers

0
votes

You need to use the 'leafletEvent'. Try this:

myApp.controller('YourController', ['$scope', 'leafletEvent', function($scope) {

    // after all your crazy custom popup stuff ...
    leafletData.getMap().then(function(map) {
        layer.getPopup().update();
    });
}]);
0
votes

I ended up storing the image width in the properties of the GeoJson, and then setting the minWidth to that value in the bindPopup function.

layer.bindPopup(popupContent,{
  closeButton: true,
  closeOnClick: false,
  minWidth: feature.properties.width,
  autoPanPadding: L.point(20,20),
  keepInView: false,
  feature: feature
});