naimikan / angular-mapboxgl-directive Goto Github PK

Hello Naimikan,

Thanks for providing a directive for mapbox.
Will be really useful for new starters if you could post few examples for placing a point, click events, popups etc.

Hi,
love your directives, helped me a lot.
However i am stuck in editing a shape created through draw method.
This is when i get latlong data from the server which i created previously and saved to the server, i was able to render geofence on map with

<div mapboxgl
      gl-controls="glControls"
      gl-zoom="{ value: 10 }"
      gl-center="{ lat: 38.90579608933237, lng:  -77.12973173932926}"
      gl-sources="glSources"
      gl-layers="glLayers">
    </div>

but not able to edit this shape.
Use Case - GEOFENCE

As per title, wanted to give a heads up that if upgrading to 0.34.0 of Mapbox, mapboxgl.util is not longer accessible in the latest release as per https://github.com/mapbox/mapbox-gl-js/issues/4393

Not an expert with Mapbox nor the directive, so im not sure yet what this implies in terms of finding the issue. Give wanted to give a heads up :)

I am working in an Angular 2 project and wish to integrate mapbox. Is it possibile to use this directive?

Hello Naimikan,

first of all: Thank you for your great work.

Today, I realized a strange behaviour: New features don't get displayed once the map has been painted.

For more information - see this Plunker (based on one of your examples):
https://plnkr.co/edit/qhRTztgEAZAhAijiOgM3

Have a great weekend
Tobi

Hi, thank you for this directive, very helpful.

I'd like to use the leaflet-image plugin to make a snapshot.

Here is the example:
https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-image/

$scope.$on('mapboxglMap:load', function (event, mapboxglMapEvent) {
            $scope.mapInstance = mapboxglMapsData.getMapById('worldMap');
            leafletImage(map, function(){});
});

I'm getting getSize() function doesn't exists when the leafletImage plugin calls the getSize() function on the $scope.mapInstance object.
Everything else like addLayer(),addSource() is working.

Hi @Naimikan

Do you have a way in your directive to show up a popup when you hover over a marker ? (i use glLayers and glSources like so :

{
                id: 'medium-circle',
                source: 'medium-circle',
                type: 'circle',
                paint: {
                    'circle-radius': 7,
                    'circle-color': '#FFFFFF',
                    'circle-opacity': 1,
                    'circle-stroke-width': 3,
                    'circle-stroke-color': '#E2E70D'
                },
                popup: {
                    enabled: true,
                    onClick: {
                        message: '<div class="metar-popup"><p>HELLO</p></div>'
                    }
                }
            }

Works on click but i need to understand how to do it on hover with your directive.

Hello,

Thank you for this awesome directive. It has been very helpful for me.
However, I would like to know if there is any way to retrieve the current zoom level.
It would be really helpful.

Thank you. :)

Thanks for writing this directive.
My question is about adding a click event to custom markers, where the array of markers gets attached to the gl-markers attribute.

A mapbox tutorial shows that they manually add event listeners to custom markers.
https://www.mapbox.com/help/tutorials/building-a-store-locator/#add-new-event-listeners

I am able to do similar inside an angularjs controller using the "element" property of the markers api.

My concerns here are:
(1) Is there a different or recommended way of adding a click event using your plugin? (It seems the answer here is "no").
(2) If I have a function in the angular controller to add an event listener to each marker,
do I have to worry about somehow destroying these event listeners in the angular controller's $destroy event? If yes, then how best to remove the listeners added to the custom markers?

function createElementForDivMarker(m_marker, m_index) {
     var el = document.createElement('div');
    el.id = "marker-" + m_index;
    el.className = 'marker marker-' + m_marker.properties.map_marker_class;  
        el.addEventListener('click', function(e) {
            console.log(m_marker.properties);
        }); 
    return el;
 }

Hi @Naimikan !

I have a map on my page. It has default center.

$scope.glCenter = { lat: 45.53, lng: -73.58 };

I added simple event listener to my map in order to change map's center to another coordinates after click by map. It looks like:

$scope.$on('mapboxglMap:click', function (event, events) {
    $scope.glCenter = { lat: 45.53, lng: -72.58 };
});

After I clicked by map it doesn't change the center.

I added ng-keydown to my body tag ng-keydown="keydown($event)".

$scope.keydown = function(event) {
    console.log('just print log');
}

I can change center of the map doing the following steps:

1. Click by map
2. Press any key
3. Center is changing

I expect other behaviour:

1. Click by map
2. Center is changing

Could you help me?

Thank you!

CODE DEMO

Hi @Naimikan ,

Currently the bower dependencies support only angular 1.5

"dependencies": {
  "angular": "~1.5.8"
}

But from what I tested, angular-mapboxgl-directive library works well with angular version 1.6.3,
So maybe it is possible to change bower.json dependencies like so:

"dependencies": {
  "angular": ">=1.5 <1.7"
}

Thanks.

Hi!
In the beginning thanks for the great directive 👍

I have a trouble when scrolling a map with markers. Each markers lose its position in the moment of scrolling and get right position after finishing of the process.

1. Before scrolling
2. In the moment of scrolling
3. After scrolling

Do you have any idea how can I fix it?

I use the following code to create markers:

$scope.glMarkers = [
        {
            coordinates: [18.080007, 59.332315],
            element: createMarker('el0', 'fa fa-map-marker fa-2x red')
        }
];
function createMarker(id, classNames) {
        let element = document.createElement('div');
        element.className = 'marker';
        element.innerHTML = '<i id="' + id + '" class="' + classNames + '"></i>';
        return element;
    }

Version: 0.40.1
Angular: 1.5.9

Installed both the directive and mapbox-gl from npm. Added the .run(...) with access token to the end of the app.module('app',['mapboxgl-directive']) command. Added the HTML to my controller files. The error is being produced from the access token setting in the app.module().run() block of code as per the examples. I have tons of other controls installed but this is the first that did not work.

angular.module('app', [ 'agGrid', 'ui.router', 'ui.bootstrap', 'mapboxgl-directive' ]).run([function () { mapboxgl.accessToken = 'pk.eyJ1IjoibmFpbWlrYW4iLCJhIjoiY2lraXJkOXFjMDA0OXdhbTYzNTE0b2NtbiJ9.O64XgZQHNHcV2gwNLN2a0Q'; }])

When I create a marker with a popup, it thorws an error:

'LngLatLike' argument must be specified as a LngLat instance, an object {lng: <lng>, lat: <lat>}, or an array of [<lng>, <lat>]

Great work on this project! I've been using it in a project that I am now moving over to browserify and it doesn't seem to work. Maybe I'm doing something wrong but first installing it with 'npm install' and then including it in my angular app with 'require' results in an error saying that 'mapboxgl-directive' doesn't exist and that my angular app therefore can't be loaded. Although the code is includes like it should with 'require'.

Hi! How can we add sprites to the directive?

Hi @Naimikan ,

when listening to the 'data' event in mapbox gl SDK - you will receive a (MapDataEvent) object as the function handler input.

But when I use angular-mapboxgl-directive - I get a different object...

This is my scenario:

$rootScope.$on('mapboxglMap:data', function(obj) {
  console.log(obj);    
});

This output something like:

{
name: "mapboxglMap:data", targetScope: m, defaultPrevented: false, currentScope: m, preventDefault: function
}

While if I use the directly the mapbox gl SDK like so:

var mapInstance = mapboxglMapsData.getMapById('myMap');
mapInstance.on('data', function(obj) {
  console.log(obj)
});

I get the correct output - a "MapDataEvent" object:

{ 
dataType: "source", sourceDataType: "content", type: "data", target: e, isSourceLoaded: false
}

Can you please clarify why this is happening and how can I get the correct MapDataEvent Object?

Hi @Naimikan, I've been messing around with moving to Angular using your helpful directive however the mapbox-gl "fitbounds" function is one that I can't seem to access or maybe it's missing, not really sure as to how to get to this functionality. I found it very useful when using regular Leaflet and Mapbox-Gl.

Hi again,

I have an issue where I load multiple independent maps in the same page, and I am having some issues that I can't really pinpoint with both layers and sources.

I was able to replicate a plunkr here: https://plnkr.co/edit/HY2tR5MSliZKU9Q3fLB6?p=preview

Do you have any idea of why that is?

I basically make independent maps in an array and each of the map has its own params, layers, controls and sources. Also I have them in an ng-if so it doesn't try to render the DOM before everything is assigned and has a value..

Would love to have your take on it! Thanks!!

Able to attach popups from geojson using this object.

{
            id: 'metars',
            source: 'metars',
            type: 'circle',
            layout: {
                visibility: 'visible'
            },
            paint: {
                'circle-radius': 5,
                'circle-color': {
                    property: 'fltcat',
                    type: 'categorical',
                    stops: [
                                    ['VFR', '#00b33c'],
                                    ['MVFR', '#0066ff'],
                                    ['IFR', '#ff0000'],
                                    ['LIFR', '#ff00ff']
                                ]
                },
                'circle-opacity': 1.0
            },
            popup: {
                enabled: true,
                onClick: {
                    message: '<div class="metar-popup"><p>${fltcat}</p></div>'
                }
            }
        },

Once rendered on map though, the first popup clicked will go away with off click. But it returns on the next marker that you click for it's popup. So essentially showing two popups. The popups also have trouble showing next to their respective marker, when that marker is close to the edge of the map, and marker has a wide div.

Also unable to style the marker popup with css. Tried setting own class in message popup, and also using generated class.

.mapboxgl-popup-content {
    background: 'white';
}

.metar-popu {
    background: 'white';
}

See image for explination.

Hi @Naimikan !
Are there any ability to get information about the source which was clicked on the map?
Suppose I have two sources at one layer, like here!

$scope.glSources = [
        {
            id: 'actualRoute',
            type: 'geojson',
            data: {
                type: 'FeatureCollection',
                features: [{
                    type: 'Feature',
                    geometry: {
                        type: 'LineString',
                        coordinates: [
                            [18.061287, 59.346934],[18.061288, 59.346934]...
                        ]
                    },
                    properties: {
                        "color": '#DD0330'
                    }
                },{
                    type: 'Feature',
                    geometry: {
                        type: 'LineString',
                        coordinates: [                        
                        [18.0612, 59.346942],[18.061218, 59.34693],[18.061235, 59.346898]...
                        ]
                    },
                    properties: {
                        'color': '#0275d8'
                    }
                }]
            }
        }
    ];

If I click on the one of lines, I would like to get event about click on this line.

How can I do it? Thanks!

Hi @Naimikan,

We have a production application that leverages https://github.com/angular-ui/ui-leaflet, which is a fork of https://github.com/tombatossals/angular-leaflet-directive. On top of angular-ui leaflet we use https://github.com/Leaflet/Leaflet.markercluster for marker clustering, and https://github.com/Leaflet/Leaflet.label for advanced labeling needs. Lastly, we have a huge implementation that overlays thousands of geoJSON shapes over the mapbox tiles so users can perform geospatial queries.

My question is, can your directive do any form of marker clustering, advanced marker labeling, and are there geoJSON click listeners so I can do things that change the colors of geoJSON shapes to indicated the user selected it? Thanks for clarification here.

We're working hard to find a solution that combines mapboxGl + Angular1 + plus all the features our production application needs.

Hi again,

Everything is running smoothly now, but i'm facing the following problem:

I have a map where I draw a circle via glSources and glLayers and it all works well. However, if I leave my dashboard page and browse to another page on my app, and then I go back to the dashboard, I get the following:

Any idea what why? If I stay on dashboard and simply refresh the page, everything works just fine...

Hi everyone!

Are there any plans to write a directive for Angular 2?

Best regards,
Thomas

Hey, thanks for a great directive, I'm trying to extend it a bit with some custom functions which I need. I've already added circle drawing tool which works perfect.

Now I would need some kind of floorplan positioning tool, currently I'm adding image layer with floorplan and I would like to add drawing tool polygon with same coordinates onto that and then redraw image in draw.update event. However I can't figure out how to get drawing tool instance in the directive so I can add polygon programatically. So I would need to do something like that straight in directive:

var feature = {
  id: 'draw-'+elementId,
  type: 'Feature',
  properties: {},
  geometry: { type: 'Polygon', coordinates: cornerPoints }
};
var featureIds = draw.add(feature);

I've already tried to init whole drawing plugin in directive instead of enabling drawing via glControls like that:

//Create a Draw control
var draw = new MapboxDraw();

// Add the Draw control to your map
map.addControl(draw);

var feature = {
        id: 'draw-'+elementId,
        type: 'Feature',
        properties: {},
        geometry: { type: 'Polygon', coordinates: cornerPoints }
};
var featureIds = draw.add(feature);

but it's working a bit weird as polygon is not visible initially but after clicking somewhere on map it appears. So question, is it possible to get draw instance somehow and add polygon programatically?

Any advices are welcome, thanks.

Hi,

Question - should the language attribute work when applying a custom style to mapbox?

It seems to work when there is no style applied, but as soon as I apply my custom style with the gl-style directive the language reverts back to English.

Thanks.

Hi there,

First off thanks for the directive!

I was wondering what's the best approach to add markers? I can see you have glMarkers but I also see others drawing things using the geoJson method.

I tried the following:
var a = new mapboxgl.LngLat(12.584943, 55.681505); var b = new mapboxgl.LngLat(12.584589, 55.681599); $scope.glMarkers = [a, b];

<mapboxgl track-resize="true" gl-controls="glControls" gl-zoom="mapParam.zoom" gl-style="mapParam.style" gl-center="mapParam.center" gl-markers="glMarkers" ng-if="mapHasLoaded"></mapboxgl>

But no luck; it says " Error: LngLatLike argument must be specified as a LngLat instance, an object {lng: , lat: }, or an array of [, ] ", which is odd because if I inspect it, it does receive the coordinates, but sometimes it also gets undefined.

Do you have some examples on how to work with markers via the directive?

Hello Naimikan,
Thanks for your great library. I was trying to load sample json data along with new layer to add a marker on the map but unfortunately, the marker was not showing. The sample data in a non-angular way, It means using map-box script add-layer is working fine. below is the code I was trying.

angular-way:
In html:

<mapboxgl 
			gl-style="'mapbox://styles/mapbox/streets-v9'"
			id="<map_id>"
			gl-center="[-77.04, 38.907]"
			gl-min-zoom="11.15"
			gl-max-zoom="18"
			height="height"
			gl-layers="glLayers"
			gl-sources="glSources">
</mapboxgl>

In JS Controller file:

$scope.glSources = [{
		        "id": "places",
		        "type": "geojson",
		        "data": {
		            "type": "FeatureCollection",
		            "features": [{
	                    "type": "Feature",
	                    "properties": {
	                        "description": "<strong>Make it Mount Pleasant</strong><p><a href=\"http://www.mtpleasantdc.com/makeitmtpleasant\" target=\"_blank\" title=\"Opens in a new window\">Make it Mount Pleasant</a> is a handmade and vintage market and afternoon of live entertainment and kids activities. 12:00-6:00 p.m.</p>",
	                        "icon": "theatre"
	                    },
	                    "geometry": {
	                        "type": "Point",
	                        "coordinates": [-77.038659, 38.931567]
	                    }
	                }, {
	                    "type": "Feature",
	                    "properties": {
	                        "description": "<strong>Mad Men Season Five Finale Watch Party</strong><p>Head to Lounge 201 (201 Massachusetts Avenue NE) Sunday for a <a href=\"http://madmens5finale.eventbrite.com/\" target=\"_blank\" title=\"Opens in a new window\">Mad Men Season Five Finale Watch Party</a>, complete with 60s costume contest, Mad Men trivia, and retro food and drink. 8:00-11:00 p.m. $10 general admission, $20 admission and two hour open bar.</p>",
	                        "icon": "theatre"
	                    },
	                    "geometry": {
	                        "type": "Point",
	                        "coordinates": [-77.003168, 38.894651]
	                    }
	                }, {
	                    "type": "Feature",
	                    "properties": {
	                        "description": "<strong>Big Backyard Beach Bash and Wine Fest</strong><p>EatBar (2761 Washington Boulevard Arlington VA) is throwing a <a href=\"http://tallulaeatbar.ticketleap.com/2012beachblanket/\" target=\"_blank\" title=\"Opens in a new window\">Big Backyard Beach Bash and Wine Fest</a> on Saturday, serving up conch fritters, fish tacos and crab sliders, and Red Apron hot dogs. 12:00-3:00 p.m. $25.grill hot dogs.</p>",
	                        "icon": "bar"
	                    },
	                    "geometry": {
	                        "type": "Point",
	                        "coordinates": [-77.090372, 38.881189]
	                    }
	                }, {
	                    "type": "Feature",
	                    "properties": {
	                        "description": "<strong>Ballston Arts & Crafts Market</strong><p>The <a href=\"http://ballstonarts-craftsmarket.blogspot.com/\" target=\"_blank\" title=\"Opens in a new window\">Ballston Arts & Crafts Market</a> sets up shop next to the Ballston metro this Saturday for the first of five dates this summer. Nearly 35 artists and crafters will be on hand selling their wares. 10:00-4:00 p.m.</p>",
	                        "icon": "art-gallery"
	                    },
	                    "geometry": {
	                        "type": "Point",
	                        "coordinates": [-77.111561, 38.882342]
	                    }
	                }, {
	                    "type": "Feature",
	                    "properties": {
	                        "description": "<strong>Seersucker Bike Ride and Social</strong><p>Feeling dandy? Get fancy, grab your bike, and take part in this year's <a href=\"http://dandiesandquaintrelles.com/2012/04/the-seersucker-social-is-set-for-june-9th-save-the-date-and-start-planning-your-look/\" target=\"_blank\" title=\"Opens in a new window\">Seersucker Social</a> bike ride from Dandies and Quaintrelles. After the ride enjoy a lawn party at Hillwood with jazz, cocktails, paper hat-making, and more. 11:00-7:00 p.m.</p>",
	                        "icon": "bicycle"
	                    },
	                    "geometry": {
	                        "type": "Point",
	                        "coordinates": [-77.052477, 38.943951]
	                    }
	                }, {
	                    "type": "Feature",
	                    "properties": {
	                        "description": "<strong>Capital Pride Parade</strong><p>The annual <a href=\"http://www.capitalpride.org/parade\" target=\"_blank\" title=\"Opens in a new window\">Capital Pride Parade</a> makes its way through Dupont this Saturday. 4:30 p.m. Free.</p>",
	                        "icon": "star"
	                    },
	                    "geometry": {
	                        "type": "Point",
	                        "coordinates": [-77.043444, 38.909664]
	                    }
	                }, {
	                    "type": "Feature",
	                    "properties": {
	                        "description": "<strong>Muhsinah</strong><p>Jazz-influenced hip hop artist <a href=\"http://www.muhsinah.com\" target=\"_blank\" title=\"Opens in a new window\">Muhsinah</a> plays the <a href=\"http://www.blackcatdc.com\">Black Cat</a> (1811 14th Street NW) tonight with <a href=\"http://www.exitclov.com\" target=\"_blank\" title=\"Opens in a new window\">Exit Clov</a> and <a href=\"http://godsilla.bandcamp.com\" target=\"_blank\" title=\"Opens in a new window\">Gods’illa</a>. 9:00 p.m. $12.</p>",
	                        "icon": "music"
	                    },
	                    "geometry": {
	                        "type": "Point",
	                        "coordinates": [-77.031706, 38.914581]
	                    }
	                }, {
	                    "type": "Feature",
	                    "properties": {
	                        "description": "<strong>A Little Night Music</strong><p>The Arlington Players' production of Stephen Sondheim's  <a href=\"http://www.thearlingtonplayers.org/drupal-6.20/node/4661/show\" target=\"_blank\" title=\"Opens in a new window\"><em>A Little Night Music</em></a> comes to the Kogod Cradle at The Mead Center for American Theater (1101 6th Street SW) this weekend and next. 8:00 p.m.</p>",
	                        "icon": "music"
	                    },
	                    "geometry": {
	                        "type": "Point",
	                        "coordinates": [-77.020945, 38.878241]
	                    }
	                }, {
	                    "type": "Feature",
	                    "properties": {
	                        "description": "<strong>Truckeroo</strong><p><a href=\"http://www.truckeroodc.com/www/\" target=\"_blank\">Truckeroo</a> brings dozens of food trucks, live music, and games to half and M Street SE (across from Navy Yard Metro Station) today from 11:00 a.m. to 11:00 p.m.</p>",
	                        "icon": "music"
	                    },
	                    "geometry": {
	                        "type": "Point",
	                        "coordinates": [-77.007481, 38.876516]
	                    }
	                }]
		        }
		    }];
		$scope.glLayers = [{
	        "id": "places",
	        "type": "symbol",
	        "source":"places",
	        "layout": {
	            "icon-image": "{icon}-15",
	            "icon-allow-overlap": true
	        }
	    }];

Is there anything am doing wrong? I didn't get any error in the console also.

I've been staring at this one trying to figure it out for a while now and can't seem to figure it out, I apologize if it's something simple that I'm missing! I'm trying to add a source from a mapbox url through the gl-sources directive, so I'm feeding an [Object] type in:

And receive the error:

Error: Invalid source ID
    at SourcesManager.removeSourceById (angular-mapboxgl-directive.js:1360)

So I try to include an id in the source definition:

And receive a new error:

TypeError: currentSource.setData is not a function
    at SourcesManager.updateSourceByObject (angular-mapboxgl-directive.js:1414)

I'm scratching my head over this one can't seem to figure it out.
Thanks!

Currently, if I hook into map events using $scope.$on('mapboxglMap:...' the handler is running outside of a digest cycle and so model changes inside of them will not be reflected through the rest of the app.

According to the Angular dev guide, $scope.$apply() should occur as close to the async event binding as possible.

Is there a reason not to do $rootScope.$apply($rootScope.$broadcast('mapboxglMap:' ...)) inside mapboxglEventsUtils.exposeMapEvents or in glControl when adding angular events for the control?

This is relevant particularly when listening to mapboxglDraw events.

Hello,
thanks for tis great library, i have the following issue
i have the style url in a scope object "gl-style=vm.mapboxStyle" but when i change the string the new style gets loaded but all previously loaded layers are gone, how do i retain them?

Hi! First of all tnx for the great job on the directive.
I'm not be able to add markers after the map initialization.
This is a Plunker with the bug (i used your example from a previous issue, #14 )

https://plnkr.co/edit/KqlbdOoAbgA9YmABxuMe?p=preview

Maybe i'm doing something wrong..

Hi, I'm trying to add navigation control to my map but it doesn't appear. I use code from example.
Also I tried to run other examples from control section and it also didn't work.
What is wrong? Why does it not work? Example in jsfiddle

Thanks!

Hi @Naimikan ,
Thanks you for your work...

I was wondering how do I get the Mapbox GL JS map instance that was created by this directive ?

I mean this part:

var mapboxGlMap = new mapboxgl.Map(initObject);
mapboxglMapsData.addMap(scope.mapboxglMapId, mapboxGlMap);

Guess I just need to know how to access the map API directly? https://docs.mapbox.com/mapbox-gl-js/api/#map#getbounds

Thanks for the help.

Hi! I would like the map to center on a certain location directly on load, however when you use the gl-center directive there is always a "fly to" effect. How can this effect be avoided for the first location set. So that it works like mapbox gl default location?

I am trying to show popups when the user clicks on (or hovers over) a polygon (similar to this example). I tried it via pure GeoJSON and via an explicit listener ($scope.$on). Neither approach worked for me. While the first one a no observable result, the second one throws an error with the following stack trace (if I click anywhere on the map):

Error: listeners[i].apply is not a function
$broadcast@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:18005:15
b/</<@https://cdnjs.cloudflare.com/ajax/libs/angular-mapboxgl-directive/0.36.0/angular-mapboxgl-directive.min.js:7:13098
[203]</Evented.prototype.fire@https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.js:416:833
h@https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.js:358:1328
s@https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.js:358:1109

Here is my code including both approaches:

        angular
            .module("app", ["mapboxgl-directive"])
            .run([function() {
                mapboxgl.accessToken = "<access token>";
            }])
            .controller("ctrl", ["$scope", function($scope) {
                $scope.sources = {
                    "id": "sources",
                    "type": "geojson",
                    "data": {
                        "type": "FeatureCollection",
                        "features": [{
                            "type": "Feature",
                            "properties": {},
                            "geometry": {
                                "type": "Polygon",
                                "coordinates": [
                                    [
                                        [0, 52],
                                        [0, 53],
                                        [1, 52],
                                        [0, 52]
                                    ]
                                ],
                                "popup": {
                                    "enabled": true,
                                    "onClick": {
                                        "coordinates": [0, 52],
                                        "message": "Clicked via GeoJSON!"
                                    }
                                }
                            }
                        }]
                    }
                };
                $scope.layers = [{
                    id: "layers",
                    source: "sources",
                    type: "fill",
                    paint: {
                        "fill-color": "#000000",
                        "fill-opacity": .4
                    },
                }];
                $scope.$on("mapboxglMap:click", "layers", function(e) {
                    console.log("Clicked via event listener!");
                })
            }]);

Could you please point me towards a working approach? Thank you very much!

Valió madres la funsionalidad limpia de divujar círculos muchas grasias le dejo mis 10.

It would be great if whenever the project version changes (i.e. version in bower.json), the repository was tagged, so that navigation was easier and external tools could handle this package's versioning as well (in my case, I want to use it via Rails Assets but the package cannot be added unless it includes tags for versions [please see https://github.com/FezVrasta/bootstrap-material-design/issues/57 as an example]).

Maybe tags aren't needed for every single patch but maybe minor and major version changes should be tagged IMO.

Hi @Naimikan !
I try to remove all layers from from the map but in some reason it doesn't work.

I have the following sources

$scope.glSource

In order to remove all source I do:

$scope.glSource = []

After that I try to add a source with id that was in $scope.glSource before removing I receive an error because the souce already exists with such id.

How can I remove source/layer correctly?

Hello Naimikan,

first of all: Thank you for your great work.

In my opinion the language attribute is not working correctly.

For more information - see this Plunker (based on one of your examples):
https://plnkr.co/edit/paI3ABad1WingeeZiMCR

Maybe something like this peace of code is missing:
if (angular.isDefined(attrs.language)) {
updateLanguage(map);
}

Thank you & have a great weekend
Tobi

Hi @Naimikan,

I couldn't find how can solve this problem on the document. As I mentioned on this issue title, I am going to implement this functionality using this directive. I used Airmap for gl-style.

Looking forward to your kind response.

Regards,
jfan0888

Hi,
Thanks for this directive, it was very useful for me. I have successfully integrated this in one of my project . But the icon(marker) that I placed in map is not fixed while zoom in or out. The marker is changes its position while zoom. I am using angular-mapboxgl-directive 0.38.0 2017-07-11.

Hi!
I'm having problems with the popup api. Very easy to get popups to display by adding the 'popup' object to 'glLayers', however I cannot find a way to add a dynamic message or run a callback function on click? The 'message' attribute only allows for string.

For example: I send certain properties for each feature in my GeoJSON, such as an id. I'd like to use this id to fetch more data on the feature and display that in the popup. Have I missed something or is this just not possible right now?

Also: Would it be possible to trigger popups with hover?

Naimikan,

I hate asking for help when I'm sure it's somthing I'm doing. But could you demonstrate the ideal way to add this radar WMS layer?

'https://nowcoast.noaa.gov/arcgis/services/nowcoast/radar_meteo_imagery_nexrad_time/MapServer/WmsServer?service=WMS&request=GetMap&version=1.3.0&layers=1&styles=&format=image%2Fpng&transparent=true&height=481&width=1024&srs=EPSG%3A3857&bbox={bbox-epsg-3857}'

I've tried several different ways to no avail.

Thanks in advance ;)

Hi,

Haven't spent too much time digging around the src but looking through the examples, I was wondering if there is a way to get a reference (to be able to call methods) on the underlying mapboxGL object in a controller.

I can set zoom, center, etc as properties in my controller and pass those to the directive according to the examples that are on the site but what if I wanted to get a reference to the map in my controller? Is that possible?

Thank you
Best

• J

Im trying to use the glMaxBounds directive but getting an Invalid max bounds error.

I face this error both while trying to use it as per the wiki
<mapboxgl gl-max-bounds="[[-73.9876, 40.7661], [-73.9397, 40.8002]]"></mapboxgl>
, and with the controller scope
<mapboxgl gl-max-bounds="bounds"></mapboxgl>
$scope.bounds = [[-73.9876, 40.7661], [-73.9397, 40.8002]]

When debugging it looks like maxBounds is set to undefined in mapboxGlMaxBoundsDirectiveLink().

Do you have a working example for this directive?

Off-topic: Is there a way to do what map.fitBounds() does using this project? If not, how could I get an instance of the map on my controller?

I've been trying to use gl-sources and gl-layers directives according to the wiki documentation but I haven't had any visible results on the map when doing so, so I think that working examples for these (and in the future for all) directives would be extremely helpful.

For example I am using the following for gl-sources without success:

$scope.sources = [
  {
    id: "route",
    type: "geojson",
    data: {
      type: "Feature",
      geometry: {
        type: "LineString"
        coordinates: [[19.44236,-99.20003],[19.441570000000002,-99.20051],[19.44086,-99.2008],[19.44033,-99.20108],[19.44005,-99.203],[19.44012,-99.20415],[19.440170000000002,-99.20513],[19.440360000000002,-99.20795],[19.441940000000002,-99.20779],[19.443270000000002,-99.20768],[19.444360000000003,-99.20764],[19.445350000000005,-99.20746],[19.446380000000005,-99.20746]],
      }
    }
  }
]

Is there a way to explicitly set map dimensions?