javascript - Mapbox dynamic markers in Meteor.js -
able set mapbox viewpoint dynamically passing geocoder street address stored in database.
but rather setting map view address, want draw marker @ address' location.
template.vendorpage.rendered = function(){ //get address database id address = function(){ pathname =location.pathname.split("/"); thisid = pathname[2]; return vendors.findone({_id: thisid}).address } //set variable address function thisaddress = address(); //draw 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) { // geocoder can return area, city, or // point, address. here handle both cases, // fitting map bounds area or zooming point. if (data.lbounds) { map.fitbounds(data.lbounds); } else if (data.latlng) { map.setview([data.latlng[0], data.latlng[1]], 16); } } }
played around documentation hours , can't figure out. i'd pass marker function 'thisaddress'
seems rather setting viewport, set map zoomedin , centered around marker.
here example documentation without geocoding 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({ // feature in geojson format: see geojson.org // full specification type: 'feature', geometry: { type: 'point', // coordinates here in longitude, latitude order because // x, y standard geojson , many formats coordinates: [ -77.03221142292, 38.913371603574 ] }, properties: { title: 'peregrine espresso', description: '1718 14th st nw, washington, dc', // 1 can customize markers adding simplestyle properties // https://www.mapbox.com/foundations/an-open-platform/#simplestyle 'marker-size': 'large', 'marker-color': '#be9a6b', 'marker-symbol': 'cafe' } }).addto(map);
figured out finally.
template.vendorpage.rendered = function(){ address = function(){ pathname =location.pathname.split("/"); thisid = pathname[2]; return vendors.findone({_id: thisid}).address } thisaddress = address(); //draw 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) { // geocoder can return area, city, or // point, address. here handle both cases, // fitting map bounds area or zooming 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);
Comments
Post a Comment