How can we process a form in a popup?

[littlebeeper]

I'd like to accomplish something similar at http://users.leafletjs.com/ --> Add Me to the map (big blue button)

Basically it displays a form within a popup when a point on a map is clicked.

I tried to embed a code in "message" property It did not work. E.g.

angular.extend($scope, {
         center: {
            autoDiscover: true,
            zoom: 13
         },
         markers: {
            mrk1: {
               lat: 40.989,
               lng: 28.819,
               message: 'mrk1' +
                       '<br/> <span ng-click="messageClick()"> Click Me!</span>'
            }

[set321go]

I am embedding code in the message property, not as complex as a form but anyways its possible.

message : spaceFilter(value.type) + '<br/><a href="#!/boat/' + value.type +'/'+ value.sn +'">' + value.sn + '</a>' 

I am basically accomplishing what you are suggesting using a bootstrap modal that I pass the coordinates to, checkout http://mgcrea.github.io/angular-strap/ I prefer http://angular-ui.github.io/bootstrap/ but the modal didn't work properly with bs3 when i tried it

[blackjid]

Hi, is there any way to add a custom message into a geoJSON feature collection??

I'm adding my markes using the geojson directive. How can I add a message?? whether is a plain text o something like @set321go was describing.

Thanks!

[tombatossals]

Hi @blackjid , take a look at the Leaflet GeoJSON onEachFeature, it will let you accomplish what you need:

http://leafletjs.com/reference.html#geojson

[littlebeeper]

Well you can embed HTML to message property. But I don't get angular to process it.

Does anyone know a solution? On Jan 12, 2014 8:49 PM, "David Rubert" notifications@github.com wrote:

Hi @blackjid https://github.com/blackjid , take a look at the Leaflet GeoJSON onEachFeature, it will let you accomplish what you need:

http://leafletjs.com/reference.html#geojson

— Reply to this email directly or view it on GitHubhttps://github.com/tombatossals/angular-leaflet-directive/issues/238#issuecomment-32130053 .

[blackjid]

I did something like this...

$scope.map.geoJSON = {
  data: this.asGeoJSON(),
  onEachFeature: function(feature, layer){
    // Create get the view template
    var popupContent = '<div ng-include="\'/views/templates/map-stream-popup.html\'"></div>';

    // Bind the popup
    // HACK: I have added the stream in the popup options
    layer.bindPopup(popupContent,{
      closeButton: false,
      minWidth: 320,
      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);
});

you can check it here https://github.com/peepoltv/peepoltv-web/blob/master/app/scripts/controllers/explore.js

[littlebeeper]

Thanks a lot.

I didn't think of using ng-include for this case. This is very advanced angular stuff.

On Thu, Jan 16, 2014 at 4:55 PM, Juan Ignacio Donoso < notifications@github.com> wrote:

I did something like this...

$scope.map.geoJSON = { data: this.asGeoJSON(), onEachFeature: function(feature, layer){ // Create get the view template var popupContent = '

';

// Bind the popup
// HACK: I have added the stream in the popup options
layer.bindPopup(popupContent,{
  closeButton: false,
  minWidth: 320,
  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);});

you can check it here https://github.com/peepoltv/peepoltv-web/blob/master/app/scripts/controllers/explore.js

— Reply to this email directly or view it on GitHubhttps://github.com/tombatossals/angular-leaflet-directive/issues/238#issuecomment-32475209 .

[rvanbaalen]

I know it has been a while but @blackjid you are my f*ckin HERO! Awesome solution. This enables me to use my own popup directive with angular-leaflet-directive.

[houqp]

ha, nice hack :)

[cleversprocket]

Thanks @blackjid ! I'm using part of your code to bind ng-click events to marker popups.

[nmccready]

Closing as the hack seem sufficient for now. I'll re-open if people feel otherwise.