[SOLVED] Npm leaflet-bing-layer


#1

I am trying to use the NPM package leaflet-bing-layer, so I typed

meteor npm install --save leaflet
meteor npm install --save leaflet-bing-layer

Then, in buildingMap.js I have
import L from 'leaflet'; import tileLayer from 'leaflet-bing-layer'; Template.buildingMap.onRendered(function() { map = L.map('map', {zoomControl: false}).setView([-120,52], 12); L.tileLayer.bing("<my_bind_id>").addTo(map); });

but I get an error that says

TypeError: L.tileLayer.bing is not a function


#2

The leaflet-bing-layer package exports L.TileLayer.Bing, so you just need to change your import to something like:

import bingTileLayer from 'leaflet-bing-layer';

then update your onRendered callback like:

Template.body.onRendered(function onRendered() {
  map = L.map('map', {zoomControl: false}).setView([-120,52], 12);
  bingTileLayer('YourBingMapsKey').addTo(map);
});

#3

Now I get the following error:

TypeError: this.callInitHooks is not a function

It looks like the npm leaflet package is version 0.7.7 and the leaflet-bing-layer is built for version 1.0 of leaflet.

Any workarounds for this?


#4

Well, the fastest would be to download the source from http://leafletjs.com/ and put it into /client/compatibility.


#5

when i put v1.0.0 rc3 leaflet.js and leaflet.css in the /client/compatibility directory, I get the same TypeError. Weird.

Leaflet works if I add the default openstreet layer.


#6

Well, as a last resort, try using https://github.com/gmaclennan/leaflet-bing-layer

And if that doesn’t help, ask the author of the plugin :slight_smile:

Me, I’m using my own tile server (Mapnik) so I can’t really help you there.


#7

This seems to work

npm install leaflet@1.0.0-rc.1 lealfet-bing-layer