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

Popular posts from this blog

javascript - Jquery show_hide, what to add in order to make the page scroll to the bottom of the hidden field once button is clicked -

javascript - Highcharts multi-color line -

javascript - Enter key does not work in search box -