Home Ask Login Register

Developers Planet

Your answer is one click away!

UncleT February 2016

How to Add osm Coordinates to my Collection in meteor

I am working on a simple map on a dashboard that registers click events and save the locations into a collection and also creates a marker on the location clicked. However, only the locations clicked get saved and the markers do not show up. Here is my code below

Template.osm.onRendered(function(){
    var map = L.map('osm-container', {
        center: [6.54, 3.33],
        zoom: 13
    });
    var markers = {};
    var id;

    L.tileLayer('http://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Imagery from <a href="http://mapbox.com/about/maps/">MapBox</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        subdomains: 'abcd',
        id: 'REMOVED',
        accessToken: 'REMOVED'
    }).addTo(map);
    var coordinates = {};
    map.on('click', function(event) {
        var randm = Math.ceil(10000*Math.random());
        var entry = Coordinates.insert({ 
              lat: event.latlng.lat,
              lng: event.latlng.lng,
              seq: randm });
        id = entry;
    });


    Coordinates.find().observe({
        added: function (document) {
            L.marker({ lat: Coordinates.find({_id:id},{lat:1, _id:0}), 
                       lng: Coordinates.find({_id:id},{lng:1,_id:0}) },{
                clickable : true,
                draggable: true,
                keyboard: true,
                riseOnHover: true
            }).addTo(map);

            map.on('dragend', function(event) {
                todo
            });

            // markers[id] = mark;
        },
        changed: function(newDocument, oldDocument) {
            // todo;
        },
        removed: function (oldDocument) {
            // todo 
        }
    });
});

Please can anyone help

Answers


Christian Fritz February 2016

There seem to be multiple things wrong, but one thing for sure is that you are not actually setting the lat/lng for the markers (they are both "1" in your code). Also, you don't need to find there once more. The document is already given to you in whole, so you can just take the fields you need:

Coordinates.find().observe({
    added: function (document) {
        L.marker({ lat: document.lat,
                   lng: document.lng, }, {
              ...

Post Status

Asked in February 2016
Viewed 3,294 times
Voted 13
Answered 1 times

Search




Leave an answer


Quote of the day: live life