sllvn / angular-mapbox Goto Github PK

Would be great to add bower support!

I've added

mapboxService.init({ accessToken: 'YOUR_ACCESS_TOKEN' });

a few times, but its not being used when requesting tiles.

I've tried it in my run and config. Where do I put it?

Since currently you can only pass in a string, and I had to be able to dynamically change my markers...

(function() {
  'use strict';

  angular.module('angular-mapbox').directive('featureLayer', function() {
    return {
      restrict: 'E',
      require: '^mapbox',
      scope: {
        'mapData': '='
      },
      link: function(scope, element, attrs, controller) {
        controller.getMap().then(function(map) {

          var featureLayer = L.mapbox.featureLayer().addTo(map);
          featureLayer.on('layeradd', function(e) {
            var marker = e.layer,
              feature = marker.feature;
            marker.setIcon(L.icon(feature.properties.icon));
          });

          scope.$watch('mapData', function(data) {
            if(data) {
              featureLayer.setGeoJSON(data);
            }
          });

        });

      }
    };
  });
})();

Example in jade

    mapbox#map-container(map-id="XXXX",zoom="18",trackResize="true",height="{{ mapHeight }}",width="100%")
        feature-layer(map-data="$parent.mappedVenues")

Hi, I'm using ionic framework for a view, and returns me that error on the console, Greetings error completed
Error: An API access token is required to use Mapbox.js. See https://www.mapbox.com/mapbox.js/api/v2.1.9/api-access-tokens/
at Object.module.exports (https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js:60:184)
at Function.module.exports.tileJSON (https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js:60:798)
at module.exports._loadTileJSON (https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js:42:159)
at L.Map.extend.initialize (https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js:44:2552)
at new o.Class.extend.e (https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js:4:2539)
at Object.module.exports.map (https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js:44:4962)
at link (http://localhost:8100/lib/angular-mapbox/dist/angular-mapbox.js:156:30)
at invokeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16918:9)
at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16428:11)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15777:13)

Hi,

I'm working with multiple mapbox instances on the same page, and it does not properly handle adding markers with ng-repeat. Looking at the angular-mapbox.js, it seems that this is still a work in progress;

      // TODO: tie markers to specific map instance

I would like to be able to solve this, but I'm new to angular and can't quite figure it out. The addMarker function on line 444 receives a map instance it will add the markers to. This map is passed after getting it through the controller.getMap() call. However, I dont understand the implementation of getMap() or where to modify it. Could you point me in the right direction?

PS: for anyone looking for a nasty hacky workaround; I've added a mapinstance=x to the marker element, and in the marker directive I've placed a condition to check this value in attrs.mapinstance , and depending on the passed value I'm setting map = mapboxService.getMapInstances()[x] (line 420). Although this works, it may not be the right solution, as I'm simply overwriting the passed map argument. (I have no idea of the side effects, though I haven't experienced any bugs so far)

Thanks for the great work!

Just a wee note to say that this is great, and worked pretty much out of the box for my pre-existing dataset. Thanks!

Any thoughts on an approach to getting the map to readjust (zoom) to the boundaries of the marker set? (eg on filter of the marker set scope)

Cheers.

How can I draw a polygon?

Does this module support clustering yet?

Cheers,
Ross

#5 is one symptom of this

Likely problem with sibling transclusions (see angular/angular.js#7874)

The mapbox provides various image format like png, jpg, jpg70, jpg90, @2xpng etc.
Can we have that support to make lighter maps of richer maps ?

Few days ago, I noticed that markers weren't displaying anymore (I may have changed something)
I don't know why and now, I want to fix this problem.

So in my case, I have an angular controller in which I init mapbox with my access token.
My map is displaying well, and I can a display a marker or more than one (without an ng-repeat of course).
So when a user load my page, I directly make an ajax request to get my object containing my markers.
and when I fill the $scope.markers with the data I retrieve from my server, nothing happen.

What did I miss ? it was working so it can't be too hard to solve.
Thank you.

PS: if I use the native method to add a marker it's working.
(ex: L.marker([38.913184,-77.031952]).addTo(mapLeaflet))

EDIT: In fact, every angular content I try to append inside the is not working.
For example:
// Not working.
// Working.
This is totally confusing..

While integrating a map on a page we discovered that markers don't work without a ng-repeat attribute.
For instance, this will not display any marker:

<mapbox map-id="{{mapTemplate}}" scale-to-fit height="400" width="100%">
    <marker ng-repeat="page in pages" lat="{{place.latitude}}" lng="{{place.longitude}}"></marker>
</mapbox>

The only work-around I found is doing it like so:

<mapbox map-id="{{mapTemplate}}" scale-to-fit height="400" width="100%">
    <marker ng-repeat="onePlace in [place]" lat="{{onePlace.latitude}}" lng="{{onePlace.longitude}}"></marker>
</mapbox>

Although it does work, it's only a work-around, and not a clean way of doing it. Maybe someone who knows the codebase better than I do can understand what's causing the bug.

So i am using marker directive to plot the markers , but cannot reference the particular marker by an id. like make the popup show of some particular marker. it would be good if the marker has some id as an attribute similar size and color, symbol.

When I use angular-mapbox.js I get errors saying I need to include the access token, yet when I use angular-mapbox-standalone.js I do not and the map appears (though I'm loading angular more than once). Do I need to include the access token someplace when using angular-mapbox.js?

hello, how it adapts to the resolutions of a div map

Hello,

I have an object like in your example with all my marker coordonates.
When I retrieve a json object in ajax and when I override the actual marker object use by my ng-repeat it's not actualizing the marker position if the coordonates had changed. It only add or delete the marker on the map.

What did I miss ?

Couple options:

1. mapService that contains all map instances
2. $emit() map object upward to parent $scope

Hi,
First of all, thanks for the good work with these directives.
I'm starting to use this modules with my team for a project, and we need the html-marker directive.
The problem is that it is not included in the latest release you posted to Bower, so my question is: do you plan to release a new version? That would be much appreciated, so that we don't need to use our own fork of the module.
If you are willing to release an updated version, could you please first check out and possibly merge the pull request made by my collaborator? This is the one: #33

Thanks in advance

Running into a weird bug here. Any help would be appreciated! I am using bower to include mapbox into my project.

I am using UI Router to load my controllers, rather than specifying the controller in a HTML tag.

Error:

Error: [$compile:ctreq] Controller 'mapbox', required by directive 'marker', can't be found!
http://errors.angularjs.org/1.3.15/$compile/ctreq?p0=mapbox&p1=marker
    at REGEX_STRING_REGEXP (vendor.js:21188)
    at getControllers (vendor.js:28708)
    at nodeLinkFn (vendor.js:28897)
    at compositeLinkFn (vendor.js:28242)
    at compositeLinkFn (vendor.js:28245)
    at publicLinkFn (vendor.js:28121)
    at $get.boundTranscludeFn (vendor.js:28260)
    at controllersBoundTransclude (vendor.js:28920)
    at ngRepeatAction (vendor.js:45806)
    at Object.$watchCollectionAction [as fn] (vendor.js:35300)(anonymous function) @ vendor.js:32780$get @ vendor.js:29721$get.Scope.$digest @ vendor.js:35451(anonymous function) @ vendor.js:35630completeOutstandingRequest @ vendor.js:26049(anonymous function) @ vendor.js:26437

Jade template:

.map(data-ng-show="view == 'map'")
    mapbox#map-container(map-id="XXXX",zoom="10")
    .markers(data-ng-repeat="venue in results")
        marker(lat="{{venue.coordinates.lat}}",lng="{{ venue.coordinates.lon }}",symbol="grocery",color="#000")
            h1 {{ venue.name }}

scale-to-map only works with markers, and not with feature layers. Make this more generic (to work with lines, feature layers, etc.).

The module shouldn't be loaded per default. You should need to load it via

angular.module('app', ['angularMapbox']);