This project is abandoned. Please use tombatossals/angular-leaflet-directive instead
Install with bower install angular-mapbox
.
Please see the documentation for usage.
DEPRECATED - use tombatossals/angular-leaflet-directive instead
Install with bower install angular-mapbox
.
Please see the documentation for usage.
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.
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 ?
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..
How can I draw a polygon?
scale-to-map
only works with markers, and not with feature layers. Make this more generic (to work with lines, feature layers, etc.).
#5 is one symptom of this
Does this module support clustering yet?
Cheers,
Ross
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.
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
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?
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 }}
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)
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?
The module shouldn't be loaded per default. You should need to load it via
angular.module('app', ['angularMapbox']);
hello, how it adapts to the resolutions of a div map
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 ?
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.
Couple options:
Would be great to add bower support!
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")
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.