How to make a polygon clickable about angular-mapboxgl-directive HOT 5 CLOSED

@kalabalik
I had a similar issue, make sure your using rel=stylesheet in your css link as here in this issue..

Also you can see this site I've been testing with:
https://gom-blocks-and-platforms.firebaseapp.com/#!/map
Should be able to inspect the code and see some working examples. There aren't always polygons on there. But if there are they should have working popups.

@Naimikan That being said, I have noticed the "x" to close a popup is no longer working, and if the text is too long or can't wrap seems to throw off the placement of the popup. I think that may be more of the type of data I'm showing.

from angular-mapboxgl-directive.

Hi @kalabalik!

Sorry, I hadn't time for test your issue, but I think that you have to put popup attribute in $scope.layers object, like:

$scope.layers = [{
    id: "layers",
    source: "sources",
    type: "fill",
    paint: {
       "fill-color": "#000000",
       "fill-opacity": .4
    },
   popup: {
      enabled: true,
      onClick: {
         coordinates: [0, 52],
         message: "Clicked via GeoJSON!"
      }
   }
}];

Tell me if it worked!

from angular-mapboxgl-directive.

@LennyZ71 Thanks, but the css was linked correctly.

@Naimikan That was it! Moving the popup into $scope.layers did the trick.

Now my only remaining problem is how to make each polygon show a different message in the popup. How would I reference the properties in the (many) features inside $scope.sources from the (one) popup declaration? In a situation like this:

                $scope.sources = {
                    "id": "sources",
                    "type": "geojson",
                    "data": {
                        "type": "FeatureCollection",
                        "features": [{
                            "type": "Feature",
                            "properties": {
                                "popupmessage": "Popup text specifically for this popup"
                            },
                            "geometry": {
                                "type": "Polygon",
                                "coordinates": [
                                    [
                                        [0, 52],
                                        [0, 53],
                                        [1, 52],
                                        [0, 52]
                                    ]
                                ]
                            }
                        }]
                    }
                };
                $scope.layers = [{
                    id: "layers",
                    source: "sources",
                    type: "fill",
                    paint: {
                        "fill-color": "#000000",
                        "fill-opacity": .4
                    },
                    "popup": {
                        "enabled": true,
                        "onClick": {
                            "coordinates": [0, 52],
                            "message": ? ? ? // here a reference to popupmessage[i] is needed
                        }
                    }
                }];

I tried popupmessage, feature.properties.popupmessage, createMessage(event) and createMessage($event). Every time a not defined error was thrown (for popupmessage, feature, event and $event respectively).

Any suggestions how to get the correct message into each popup? Thanks again for your help!

from angular-mapboxgl-directive.

Hi @kalabalik!

Yes, you can do this with:

$scope.layers = [{
   id: "layers",
   source: "sources",
   type: "fill",
   paint: {
      "fill-color": "#000000",
      "fill-opacity": .4
   },
   "popup": {
      "enabled": true,
      "onClick": {
         "coordinates": [0, 52],
         "message": '{$popupmessage}'
      }
   }
}];

Tell me it it worked! (Sorry, I have to update the wiki)

from angular-mapboxgl-directive.

'${popupmessage}' (dollar sign outside the curly brackets) worked for me.

Thank you very much for your straightforward help and patience with me!

from angular-mapboxgl-directive.