[SOLVED] Bdunnette: leaflet-draw L.map is not a function

help
1

I’m using Meteor 1.5 (fresh project)

contents of main.js:

import L from 'meteor/bdunnette:leaflet-draw';
import './main.html';


Template.map.onCreated(function helloOnCreated() {
  $("#mapcanvas").css({
    height: ($(window).height() - 90) + 'px'
  });
});

var map, markers = {};

Template.map.onRendered(function mapOnRendered() {
   map = L.map('mapcanvas', {
    doubleClickZoom: false,
    drawControl: true
   }).setView([51.5, -0.09], 12);
   L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
});

I get a message in the chrome console that

TypeError: L.map is not a function

Any body have an idea of what I need to do?

2

I’m not familiar with that specific leaflet package, but…

The convention in atmosphere package is that you have to import them using the object curlies. Try:

import { L } from 'meteor/bdunnette:leaflet-draw';

Who knows :slight_smile:

3

Now I get

TypeError: Cannot read property ‘map’ of undefined

4

Ah… I’ve taken a closer look at the package. Its an oldy in Javascript terms. 1 year no changes. This package is a wrapper package and does not yet support modules. You can however just use the NPM one. Try this:

  1. Run meteor npm install leaflet-draw
  2. Import it:
import L from 'leaflet-draw';

Meteor supports npm modules already for a while now :slight_smile:

5

I’ve tried

import L from 'leaflet-draw';
import 'leaflet-draw/dist/leaflet.draw.css';

and i get

Uncaught reference error: L is not defined

6

I tried the @spalger/leaflet-draw npm package and changed code to be this:

import L from '@spalger/leaflet-draw';
import '@spalger/leaflet-draw/dist/leaflet.draw.css';

I get the same message:

Uncaught reference error: L is not defined

7

Just to be sure. You did run meteor npm install --save leaflet-draw right?

8

I did (included the --save)

9

Ok. I’ve tried it. It doesnt work on my machine either. You can still manually add the leaflet-draw.js file in a lib folder. Meteor will minify it for you and you can use it by importing the file.

10

I saw the following line in leaflet.draw.js

Leaflet.draw assumes that you have already included the Leaflet library.

So I decided to give this a try

meteor npm install --save leaflet leaflet-draw

Then I tried

import L from 'leaflet'
import 'leaflet-draw'

var map, markers = {};
Template.map.onRendered(function mapOnRendered() {
  map = L.map('mapcanvas', {
    doubleClickZoom: false,
    drawControl: true
  }).setView([51.5, -0.09], 12);
  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
});

Now I get an error:

Cannot add propoerty segmentsIntersect, object is not extensible

11

It appears that the leaflet-draw package does not like v1.1 of leaflet.

I installed:

meteor npm install --save leaflet@1.0.0 leaflet-draw

and now it all works

1 Like