pauloborges / meteor-mapbox Goto Github PK

Mapbox.js for Meteor apps

CSS 10.73% JavaScript 73.98% HTML 15.29%

meteor-mapbox's Introduction

pauloborges:mapbox

Mapbox.js for Meteor apps.

Version matrix:

Mapbox JS	Mapbox GL
`2.2.3`	`0.12.1`

Deprecation notice

Unfortunately I can't maintain this project anymore. So it can be broken. Use it with caution.

Install

$ cd to/my/meteor/project
$ meteor add pauloborges:[email protected]_2

or (if you want to modify the code):

$ cd to/my/meteor/project
$ mkdir packages # ensure that packages folder exists
$ git clone https://github.com/pauloborges/meteor-mapbox.git packages/pauloborges:mapbox
$ meteor add pauloborges:mapbox

Supported plugins

All plugins listed here are supported:

Usage

Call Mapbox.load() in your client code. Use Mapbox.loaded() to check if it finished loading. This function is reactive.

API

`Mapbox.load(opts)`

Mapbox.load({
    gl: boolean // optional
    plugins: list // optional
})

opts is optional.
gl: if true Mapbox GL will be loaded

Examples

// Basic
Meteor.startup(function(){
    Mapbox.load({
        plugins: ['minimap', 'markercluster']
    });
});

Deps.autorun(function () {
  if (Mapbox.loaded()) {
    L.mapbox.accessToken = MY_ACCESS_TOKEN;
    var map = L.mapbox.map('map', MY_MAP_ID);
  }
});


// Using a template's rendered callback
Meteor.startup(function(){
    Mapbox.load();
});

Template.Map.rendered = function () {
    this.autorun(function () {
        if (Mapbox.loaded()) {
            L.mapbox.accessToken = TOKEN;
            var map = L.mapbox.map('map', MAP_ID);
        }
    });
};

meteor-mapbox's People

Contributors

Stargazers

Watchers

meteor-mapbox's Issues

Mapbox GL directions plugin not working

I am trying to load Mapbox GL with directions plugin support as shown below, yet I am always getting following errors. Also code I am using shown below. Thanks

  TypeError: mapboxgl.Directions is not a function
    at app.js:113
    at Tracker.Computation._compute (tracker.js:331)
    at Tracker.Computation._recompute (tracker.js:350)
    at Object.Tracker._runFlush (tracker.js:489)
    at onGlobalMessage (setimmediate.js:102)

 Uncaught ReferenceError: L is not defined    index.js:3

Line 112 in app.js contains

map.addControl(new mapboxgl.Directions());

   Meteor.startup(function() {
     Mapbox.debug = true;
     Mapbox.load({
        gl: true,
        plugins: ['directions']
     });
   });

Android Cordova not showing map.

I can get the map to load on the web fine. Including on the default Chome app on an Android device. But when I run it as a native app on an Android it gives me a white screen with no map controls. I can get it to work on the iOS emulator and will be testing on an iPhone soon. I thought maybe it was a css issue but I can't see how:

html:

<body> <!-- final result after iron:router, before MapBox init -->
<div id='mapDisplay'>
  <div class="mapper" id="map"></div>
</div>
</body>

css:

div#mapDisplay {
  height: 100%;
  width: 100%;
 }
div.mapper {
  width: 100%;
  height: 100%;
}

Plugins aren't working using this.

Meteor.startup(function () {
  Mapbox.load({
    plugins: ['minimap', 'markercluster', 'locate']
  });
});

Meteor 1.3: Can't find variable L

I'm trying to use this package in Meteor 1.3, yet I can't get it to work. Here is the code as I have it now:

Template.map.onRendered(function(){
    Mapbox.load({
        gl: true
    })

    this.autorun(function (){
        if(Mapbox.loaded()){            
            L.mapbox.accessToken = 'MY_ACCESS_KEY'
            var map = L.mapbox.map('map', 'mapbox://styles/mapbox/outdoors-v9')
        }
    })
})

Since this package is made for Meteor 1.2, I don't seem to need an import statement for the package in this file since Mapbox is defined. Yet L isn't.

L.mapbox.accessToken?

Hi there. I must be doing something wrong because I can't seem to get the accessToken to work. After Mapbox.loaded() fires, if I log L, I get this result, which does not contain accessToken:

Thoughts? What am I missing?

[locate] .../v0.43.0/L.Control.Locate.js not found

Hey there,
it seems https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/L.Control.Locate.js does not exists.
I looked into the docs and found the following (working) ressource https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/L.Control.Locate.min.js.

Support for GL

Can we get an option to switch out to https://www.mapbox.com/mapbox-gl/?

Binding popup onclick to reactive component

Great work on getting Mapbox to work with Meteor and React.
I am trying to find a way to bind a react component's method to the click of a popup.
My first attempt was through a session variable, however I don't know how to make session variable reactive.

Please advise

Mapbox.load() with multiple plugins does not seem to work

I am trying to use Mapbox with multiple plugins, namely
'''
Mapbox.load('markercluster', 'directions');
'''

Whenever I do this, the map stops working - The map is not loaded at all into the DOM. Is there a problem anywhere?

Error: Map container is already initialized when using iron-router

I can get this working just fine for a simple page load but when the autorun gets triggered from navigating to and from another page I get:

Error: Map container is already initialized.

I can avoid this by using a isMapInitialised Session var but I was wondering if there might be a better approach? Indeed, have you been able to setup a fully reactive map?

Great package though, thanks.

Using with urigo:angular-meteor

Hi, I tried to use meteor-mapbox with urigo:angular-meteor plugin. But I am stuck at the beginning. I have put this in server/startup folder.

Meteor.startup(function(){
    Mapbox.load();
});

But I get the error in the terminal ReferenceError: Mapbox is not defined (NB : The plugin is already added.)

Have you an idea on this ?

Panning support not working with react / material-ui

When combing meteor-mapbox with react, it seems like dragging the map is not possible to move the region of interest. Could you imaging that this a meteor-mapbox issue or more on the meteor react resp. material-ui side (https://atmospherejs.com/izzilab/material-ui) ?