Recently, I was able to dynamically set the mapbox viewpoint by passing a street address from my database to the geocoder.
However, I now want to take it a step further and add a marker at the location of the address instead of just setting the map view.
Template.vendorPage.rendered = function(){
// Retrieve address from database using ID
var getAddress = function(){
var pathname =location.pathname.split("/");
var thisId = pathname[2];
return Vendors.findOne({_id: thisId}).address;
}
// Set variable to the address function
var thisAddress = getAddress();
// 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) {
if (data.lbounds) {
map.fitBounds(data.lbounds);
} else if (data.latlng) {
map.setView([data.latlng[0], data.latlng[1]], 16);
}
}
}
I have spent hours trying to implement markers without success. I would like to simply pass the address to the marker function.
Rather than just setting the viewport, I am looking to zoom in and center the map around my marker.
Here is an example from the documentation, but without geocoding the location.
L.mapbox.accessToken = 'pk.eyJ1IjoiYWxleG5ldHNjaCIsImEiOiJsX0V6Wl9NIn0.i14NX5hv3bkVIi075nOM2g';
var map = L.mapbox.map('map', 'examples.map-20v6611k')
.setView([38.91338, -77.03236], 16);
L.mapbox.featureLayer({
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [
-77.03221142292,
38.913371603574
]
},
properties: {
title: 'Peregrine Espresso',
description: '1718 14th St NW, Washington, DC',
'marker-size': 'large',
'marker-color': '#BE9A6B',
'marker-symbol': 'cafe'
}
}).addTo(map);