Angular-Mapbox Integration

[Prudvi Seshu]

Hi,

I am a newbie to Angular Js, I am currently working on the angular-mapbox directive to embed the mapbox maps into the html page. I am facing issue while injecting the angular-mapbox directive to the application. When i have injected in parent controller, there are no errors and when accessing in child controller it is showing the error: 

$injector:unpr  Unknown Provider error.

Please give me some instructions to properly inject this directive 

I have included the mapbox.js, angular-mapbox-directive.js files in my index.html file. and all the files are of recent version. 

Many thanks in advance.

Regards,

Prudhvi.

[Sander Elias]

Hi Prudhvi,

Did you inject your mapbox into your application?

Regards

Sander

[Prudvi Seshu]

Hi Sander Elias,

Many thanks for the reply. Yes I have injected angular-mapbox directive into the main app.js file like this:

var app = angular.module(sakeetApp, ['ngRoute', 'ngCookies','ngStorage','angular-mapbox','angularFileUpload']);

  app.config(['$routeProvider', '$locationProvider', '$httpProvider',

    function ($routeProvider, $locationProvider, $httpProvider) {

In child controller (AdminController.js):

'use strict';

(function () {

  var injectParams = ['$scope','$rootScope','$location','$route','$localStorage','$window','$cookieStore',

    'ConfigService', 'UserService','CategoryService','angular-mapbox', 'FeedService','NotifyService'];

  var controller = function ($scope,$rootScope, $location,$route,$localStorage,$window,$cookieStore,

                             ConfigService, UserService, CategoryService,FeedService, NotifyService) {

After injecting into Admincontroller.js, i am getting the error. I have included the 1.mapbox.js, 2. angular-mapbox.js files in index.html file. But still the error persist.

[Sander Elias]

Prudvi,

Are you sure you are loading your scripts in the right order then? Rule of thumb, your own scripts come last..

On a side note, you are injecting an awful lot of dependencies. Often this is a clear sign that your controller is doing way to much, and it needs some splitting into parts. 

Also, read carefully through the styleguide. Read the whole thing at least twice!

Regards

Sander

[Prudvi Seshu]

Hi Sander Elias,

Thanks for the style guide link. I will go through it and will check whether all of my scripts are loading in right order.

[Philipp Litzenberger]

Hi Prudhvi,

The ‘angular-mapbox’ is missing in the controller function.

Regards,

Philipp

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Prudvi Seshu]

Hi philipp,

Thank you very much for the reply.  If I use 'angular-mapbox' in the controller function, I am getting the error:

Uncaught SyntaxError: Unexpected token -

I am actually referring to:  https://github.com/licyeus/angular-mapbox   for mapbox integration to my website, I think i have to use mapboxService in the controller function. But it is not working properly. Any other ideas please...

My only concern is to integrate mapbox map in html page using angular js.

Regards,

Prudhvi.

[Philipp Litzenberger]

Ah, I see. The ‘angular-mapbox’ is a module. U can’t inject this in your controller. Remove it from injectParams and just use the directive “mapbox” in your view.

<mapbox map-id="YOUR-MAP-ID" lat="47.603569" lng="-122.329453"></mapbox>

Best, Philipp

[Prudvi Seshu]

Hi Philipp,

Thanks for the reply, I have removed the angular-mapbox and checked with <mapbox map-id="YOUR-MAP-ID" lat="47.603569" lng="-122.329453"></mapbox> in my html. It says 401 Unauthorized in the console and map is not displaying. I think we have to provide the access token for authorization (I have provided the map-id), In the link provided by you, it is mentioned that:

As of Mapbox.js 2.0, a Mapbox API access token is also required. In your Angular app, set the access token with the following line:

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

If i inject mapboxservice in the child controller, the other part of the controller is not working and the resultant html page is not loading properly. Please suggest me where to use the access token properly.

Regards,

Prudhvi.

[Sander Elias]

Hi Prudvi,

Try doing the mapboxService.init({ accessToken: 'YOUR_ACCESS_TOKEN' }) inside the modules .run callback.

Regards
Sander

​

[Philipp Litzenberger]

Hi Prudhvi,

have you checked out the examples? There you find the file example-app.js with the initialisation of the mapboxService.

Best,

Philipp

[Prudvi Seshu]

Hi sander Elias,

 please tell me where to initialize the mapboxService. If I initialize in the parent controller function it is throwing error.

Regards,

Prudhvi

[Prudvi Seshu]

Hi Philipp,

I have checked the examples and when initializing mapboxService in the controller function it is throwing error. Can you please tell me how to properly initialize map box service in controller.

I have a parent controller app.js, There i have initialized the angular-mapbox directive. I want to access the mapboxService in the admincontroller.js. I am sending the gist files of app.js and admincontroller.js can you please tell me where i am going wrong..

app.js file:

https://gist.github.com/prudvihemanth/b670432816c10e5ce900

admincontroller.js file:

https://gist.github.com/prudvihemanth/fc88ec2456c5c29f1709

I have included the mapbox.js and angular-mapbox.js files in the index.html page.

Regards,

Prudhvi

[Philipp Litzenberger]

Hi Prudhvi,

the objects in injectParams and the function arguments need to be in the exact same order. Thats the problem here.

like this:

var injectParams = ['$scope','$rootScope’, “…”]

var controller = function ($scope, $rootScope, …]

Best, P

[Prudvi Seshu]

Thanks you philipp, 

All the previous errors were not showing, I think module is injected correctly but it still says:

http://a.tiles.mapbox.com/v3/sakeet.cifa1vwoa1scjsdknbg73ii.json 401 (Unauthorized)            error1 and 

could not load TileJSON at http://a.tiles.mapbox.com/v3/sakeet.cifa1vwoa1scjsdknbg73ii.json   error2..

A gray colored map is showing up, I think we are nearer to the output. Thank you Phillip.

Regards,

Prudhvi.

[Philipp Litzenberger]

your welcome. Seems there is a problem with your credentials. I can’t really help with that. I think you should check your map-id and accessToken.

[Prudvi Seshu]

Hi Philipp,

I have replaced the mapbox.js file with the cdn and it is now working perfectly fine. The map is loading good. You have done me a great help phillip, Thanks a lot....!!!!

...

[Prudvi Seshu]

Hi sander Elias,

I have resolved the issue, I needed to use the mapbox.js cdn. Thank you very much for the help sander Elias.  Have a nice day....!!!



Regards,

Prudhvi.