Having issues importing Mapbox GL with 1.3

help
1

Am I a dunce or am I on to something? Was previously using pauloborges:mapbox for my mapbox goodness but 1.3 happend and now we hopefully dont have to rely on paul (sorry paul).

I can’t get mapbox to work with npm.

meteor npm install --save mapbox-gl

then in a client file

import mapboxgl from 'mapbox-gl'

sick!! :guitar: :musical_score: :metal:

but then when i try to do some fancy stuff like

map = new mapboxgl.Map({
        container: 'event-map',
        style: 'mapbox://styles/dylmcg/cikvpjory00da9flxuej7ldih',
        center: [data.loc.coordinates[0], data.loc.coordinates[1]],
        zoom: 13.5,
        attributionControl: false
      });

my console gets mad and throws this

unable to resole some modules: "gl in /path/ "
If you notice problems related to these missing modules, consider running: `meteor npm install --save gl`

I also tried npm installing / importing mapbox before mapboxgl… with no avail.

Has anyone experienced similar issues? Am i doing imports wrong?? Again I’ll ask… Am I a dunce?

In all seriousness, any help would be much appreciated.

1 Like
2

It’s not just you. I was trying to get mapbox working via Npm yesterday but in the end gave up and went with Paul’s package. I’m not saying it’s impossible but I didn’t feel like spending ages trying to make it work.

3

The console error came from not importing ‘gl’ from npm… But nonetheless, Mapbox still isnt working. Looking at the mapbox-gl npm package my guess is because of the require statements. Is there any way to de-browserify a npm module??

4

I use it with webpack, so far no luck. Here a post on StackOverflow

5

Has anyone had any luck with this so far? I’m lost…
I can’t even seem to get paul’s package to work with 1.3

6

Hey jeroen,

I haven’t had any luck importing it. It kind of sucks. As a placeholder work around i threw

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.0/mapbox-gl.js'></script>

in the head of my app.

Best of luck and hopefully a solution will be found soon!

7

Hey dylmcg,

That did the trick! Even though adding a script tag definatly isn’t my favourite solution, I seem to have ran out of options… This will have to do for now.

Best case would be an update to the npm mapbox-gl package I guess.

Thanks!

EDIT: After implementing this into my actual project, it seems FlowRouter is causing some troubles. I tried out your original suggestion in a basic project, which worked, but once I introduced a non hierarchical system with FlowRouter, it seems mapboxgl is no longer found.

How do you implemented this in your project?

8

What do you mean when you say non-hierarchial system?

With my project I pretty much copied the structure of the 1.3 Todos (Blaze) example. In imports/startup/client is where the route definitions go. And inside of those route files you import all of the layouts & pages that get rendered. Inside of the pages you import the components, and if those components have components you import them there, etc, etc. Haha you get the idea.

The component level is where I was trying to use the es6 import syntax for mapboxgl. Throwing that link tag in the head magically solved my problems. I use the mapboxgl variable in the onRendered of the template. Hope this was of some help.

-Dylan

9

Have you guys tried Mapbox GL in Meteor+React? My client simply fails to start because of some odd issue caused by Mapbox GL. See details in a relevant thread and an issue on Github.