CODEWITHSUNDEEP
javascriptmeteorleaflet
David J.
David J.

Reputation: 1913

How can I use meteor-leaflet to integrate leaflet and meteor?

I tried going through the instructions here and I do not see a map when I run meteor.

Here are all the steps I take:

meteor create map-project
cd map-project
meteor add bevanhunt:leaflet

then I change the contents of client/main.html to:

<head>
  <title>map-project</title>
</head>

<body>
  <div id="map"></div>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}
  {{> info}}
</body>

<template name="hello">
  <button>Click Me</button>
  <p>You've pressed the button {{counter}} times.</p>
</template>

<template name="info">
  <h2>Learn Meteor!</h2>
  <ul>
    <li><a href="https://www.meteor.com/try" target="_blank">Do the Tutorial</a></li>
    <li><a href="http://guide.meteor.com" target="_blank">Follow the Guide</a></li>
    <li><a href="https://docs.meteor.com" target="_blank">Read the Docs</a></li>
    <li><a href="https://forums.meteor.com" target="_blank">Discussions</a></li>
  </ul>
</template>

and the contents of client/main.css to:

  #map {
    min-height: 350px;
    min-width: 100%;
  }

and finally the contents of client/main.js to:

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

import './main.html';

Template.hello.onCreated(function helloOnCreated() {
  // counter starts at 0
  this.counter = new ReactiveVar(0);
});

Template.hello.helpers({
  counter() {
    return Template.instance().counter.get();
  },
});

Template.hello.events({
  'click button'(event, instance) {
    // increment the counter when button is clicked
    instance.counter.set(instance.counter.get() + 1);
  },
});
if (Meteor.isClient) {
    L.Icon.Default.imagePath = 'packages/bevanhunt_leaflet/images/';
    var map = L.map('map');
  }

  if (Meteor.isClient) {
    L.tileLayer.provider('Thunderforest.Outdoors').addTo(map);
  }

Then I do:

meteor npm install
meteor

Then navigate to the hosted url, and there is no map to be seen.

Has anyone done this successfully who can help? Thanks.

Upvotes: 0

Views: 345

Answers (1)

Philippe V.
Philippe V.

Reputation: 518

The problem is that you haven't declared your Leaflet map variable, as in below (from the meteor-leaflet documentation):

if (Meteor.isClient) {
    L.Icon.Default.imagePath = 'packages/bevanhunt_leaflet/images/';
    var map = L.map('map');
  }

You need to have a Leaflet map object (it is not just your map div!) before adding layers, which you were trying to do in the following line of code:

if (Meteor.isClient) {
    L.tileLayer.provider('Thunderforest.Outdoors').addTo(map);
  }

I suggest you read over this tutorial for a simple implementation of meteor-leaflet. Hope that helps!

Upvotes: 1

Related Questions