Unable to load a lat lon on open street map using openlayer.js

help
1

hi
I am trying to plot a lat lon on open street map using open layers and I am struggling to get this working. All i have done so far is

  1. added mizzao:openlayers package

  2. Adde the below code in my js
    /*if (Meteor.isClient) {
    Template.tracking.rendered = function () {

    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.isClient) {

    var userLatitude;
    var userLongitude;

    var map, markers;

    Template.tracking.rendered = function () {

     // Setup map
 map = new L.map('map', {
     dragging: false,
     zoomControl: false,
     scrollWheelZoom: false,
     doubleClickZoom: false,
     boxZoom: false,
     touchZoom: false
 });

 map.setView([52.35873, 4.908228], 17);
 //map.setView([51.9074877, 4.4550772], 17);

 L.tileLayer('http://{s}.tile.cloudmade.com/9950b9eba41d491090533c541f170f3e/997@2x/256/{z}/{x}/{y}.png', {
     maxZoom: 17
 }).addTo(map);

 // If user has location then place marker on map
 /*if (userLatitude && userLongitude) {
     var marker = L.marker([userLatitude, userLongitude]).addTo(markers);
 }

 var playersList = players.find().fetch();
 playersList.forEach(function(players) {
     // Change position of all markers
     var marker = L.marker([players.latitude, players.longitude], options={"id" : 666}).addTo(map);
 });*/

    };

    // If the collection of players changes (location or amount of players)
    /*Meteor.autorun(function() {

     var playersList = players.find().fetch();
 markers.clearLayers();
 playersList.forEach(function(players) {
     // Change position of all markers
     var marker = L.marker([players.latitude, players.longitude]).addTo(markers);
 });

    });*/
    }

  3. And added the bellow code in my html

{{>tracking}}

Can someone please help me with this? I initally just trying to load the map which itself is not working. The above code has been commented which does the plotting of a the lat lon as well. But since the map load isnot happening, i am stuck to proceed further.
I am able to get this working in a plain and simple html using open layers.js but i am trying to use meteor so that i can do real time plotting of multiple moving lat lons on the same map.

2

If I’m not mistaken, your example is using leafletjs API not openlayer.

Try with this package bevanhunt:leaflet instead of mizzao.

3

Did you set height of map container?
And yes, it’s look like Leaflet