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


#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