Dynamic Mapbox Markers in Meteor.js

The ability to dynamically set the map viewpoint by passing the street address stored in my database to the geocoder.

But instead of just pointing the map view to the address, I want to draw a marker at the location.

Template.vendorPage.rendered = function(){


//get address from database by ID
address = function(){
    pathname =location.pathname.split("/"); 
    thisId = pathname[2]; 
    return Vendors.findOne({_id: thisId}).address
}
//set variable to the address function
thisAddress = address(); 

//draw the mapbox
L.mapbox.accessToken = '<My Token Here>';
var geocoder = L.mapbox.geocoder('mapbox.places-v1'),
    map = L.mapbox.map('map', 'alexnetsch.j786e624');

geocoder.query(thisAddress, showMap);

function showMap(err, data) {
    // The geocoder can return an area, like a city, or a
    // point, like an address. Here we handle both cases,
    // by fitting the map bounds to an area or zooming to a point.
    if (data.lbounds) {
        map.fitBounds(data.lbounds);
    } else if (data.latlng) {
        map.setView([data.latlng[0], data.latlng[1]], 16);
    }
}


}

      

Has been playing around with the documentation for hours and can't figure it out. I would like to just pass the marker function 'thisAddress'

It looks like instead of setting the viewport, I could set the map to be zoomed in and centered around my marker.

Here's an example from the documentation, but without geocoding.

L.mapbox.accessToken = 'pk.eyJ1IjoiYWxleG5ldHNjaCIsImEiOiJsX0V6Wl9NIn0.i14NX5hv3bkVIi075nOM2g';
var map = L.mapbox.map('map', 'examples.map-20v6611k')
    .setView([38.91338, -77.03236], 16);

L.mapbox.featureLayer({
    // this feature is in the GeoJSON format: see geojson.org
    // for the full specification
    type: 'Feature',
    geometry: {
        type: 'Point',
        // coordinates here are in longitude, latitude order because
        // x, y is the standard for GeoJSON and many formats
        coordinates: [
          -77.03221142292,
          38.913371603574 
        ]
    },
    properties: {
        title: 'Peregrine Espresso',
        description: '1718 14th St NW, Washington, DC',
        // one can customize markers by adding simplestyle properties
        // https://www.mapbox.com/foundations/an-open-platform/#simplestyle
        'marker-size': 'large',
        'marker-color': '#BE9A6B',
        'marker-symbol': 'cafe'
    }
}).addTo(map);

      

+3


source to share


1 answer


Finally I thought.



Template.vendorPage.rendered = function(){
    address = function(){
        pathname =location.pathname.split("/"); 
        thisId = pathname[2]; 
        return Vendors.findOne({_id: thisId}).address
    }

    thisAddress = address(); 

    //draw the mapbox
    L.mapbox.accessToken = 'pk.eyJ1IjoiYWxleG5ldHNjaCIsImEiOiJsX0V6Wl9NIn0.i14NX5hv3bkVIi075nOM2g';
    var geocoder = L.mapbox.geocoder('mapbox.places-v1'),
        map = L.mapbox.map('map', 'alexnetsch.j786e624');

    geocoder.query(thisAddress, showMap);

    function showMap(err, data) {
        // The geocoder can return an area, like a city, or a
        // point, like an address. Here we handle both cases,
        // by fitting the map bounds to an area or zooming to a point.
        if (data.lbounds) {
            map.fitBounds(data.lbounds);
        } else if (data.latlng) {
            map.setView([data.latlng[0], data.latlng[1]], 16);
        }
    }

    var addMarker;
    addMarker = function(geocoder, map, placeName) {
      return geocoder.query(placeName, function(error, result) {
        var marker;
        marker = L.marker(result.latlng);
        return marker.addTo(map);
      });
    };

    addMarker(geocoder, map, thisAddress);

      

+2


source







All Articles