CODEWITHSUNDEEP
meteorleaflet
Dany Y
Dany Y

Reputation: 7031

Using leaflet with Meteor

Hi I'm making a simple app to show leaflet map with meteor.

This simple example is not working

testApp.html : 

<head>
  <title>testApp</title>
</head>

<body>
  <h1>Hello World!</h1>
  <div id="map"></div>
</body>

testApp.js

if (Meteor.isClient) {
var map = L.map('map').setView([51.505, -0.09], 13);
  var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
  var osmAttrib='Map data © OpenStreetMap contributors';
  var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 12, attribution: osmAttrib});   
  map.setView(new L.LatLng(51.3, 0.7),9);
  map.addLayer(osm);

}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

It's giving me Uncaught TypeError: Cannot read property '_leaflet' of null

if i write the same code in the console , the map shows.

Thank you for your help

Upvotes: 0

Views: 2116

Answers (2)

jamin79
jamin79

Reputation: 380

you need to put your map rendering code in a callback that will run when template is rendered

Template.nameofyourtemplate.rendered = function() { //map code }

Wrap your map div like below

<template name='nameofyourtemplate'>
 {{#constant}}
   <div id='map'></>
 {{/constant}}
<template>

separate map template from HTML body

<body>
 <{{> nameofyourtemplate>}}
</body>

Upvotes: 4

jamin79
jamin79

Reputation: 380

You need to wrap your map div as below

{{#constant}}
  <div id="map"></div>
{{/constant}}

Upvotes: 0

Related Questions