javascript - set leaflet.js map to display current location -


i working leaflet.js package meteor , having trouble getting map default current location on initial render. setview method works fine hard numbers doesn't variables. pretty new js maybe mistake obvious. here's have: 

 template.map.rendered = function() {  l.icon.default.imagepath = 'packages/bevanhunt_leaflet/images';   if (navigator.geolocation) {   navigator.geolocation.getcurrentposition(function(position) {     console.log('--- position: ---');     console.log('lat: ' + position.coords.latitude);     latit = position.coords.latitude;     console.log('long: ' + position.coords.longitude);     longit = position.coords.longitude;     console.log('---------------------');     var abc = l.marker([position.coords.latitude, position.coords.longitude]).addto(map); }  )}  map = l.map('map', {   doubleclickzoom: false }).setview([latit, longit], 13);

the error keep getting is

uncaught typeerror: cannot read property 'addlayer' of undefined l.marker.l.class.extend.addto @ leaflet-src.js:3511 (anonymous function) @ client.js?ea76789cca0ff64d5985320ec2127d5de1fb802f:28

when console.log(latit) or console.log(longit) returns number, "undefined" after it. in advance can this!

edit:

exact console output on initial render:

exception tracker afterflush function: debug.js:41 referenceerror: latit not defined     @ template.map.rendered (client.js?    ea76789cca0ff64d5985320ec2127d5de1fb802f:36)     @ template.js:116     @ function.template._withtemplateinstancefunc (template.js:437)     @ firecallbacks (template.js:112)     @ null.<anonymous> (template.js:205)     @ view.js:104     @ object.blaze._withcurrentview (view.js:523)     @ view.js:103 @ object.tracker._runflush (tracker.js:468) @ onglobalmessage (setimmediate.js:102) client.js?ea76789cca0ff64d5985320ec2127d5de1fb802f:22 --- position: --- client.js?ea76789cca0ff64d5985320ec2127d5de1fb802f:23 lat: 41.0525926 client.js?ea76789cca0ff64d5985320ec2127d5de1fb802f:25 long: -73.5398427 client.js?ea76789cca0ff64d5985320ec2127d5de1fb802f:27 --------------------- leaflet-src.js:3511 uncaught typeerror: cannot read property 'addlayer' of     undefinedl.marker.l.class.extend.addto @ leaflet-src.js:3511(anonymous function)     @ client.js?ea76789cca0ff64d5985320ec2127d5de1fb802f:28

edit 2: wanted keep simple here js in entirety:

var map; var latit; var longit;  // on startup run resizing event meteor.startup(function() { $(window).resize(function() { $('#map').css('height', window.innerheight - 82 - 45); }); $(window).resize(); // trigger resize event  });  // create marker collection var markers = new meteor.collection('markers');  meteor.subscribe('markers');   template.map.rendered = function() {  l.icon.default.imagepath = 'packages/bevanhunt_leaflet/images';   if (navigator.geolocation) {   navigator.geolocation.getcurrentposition(function(position) {     console.log('--- position: ---');     console.log('lat: ' + position.coords.latitude);     latit = position.coords.latitude;     console.log('long: ' + position.coords.longitude);     longit = position.coords.longitude;     console.log('---------------------');     var abc = l.marker([position.coords.latitude, position.coords.longitude]).addto(map); }  )}  map = l.map('map', {   doubleclickzoom: false }).setview([latit, longit], 13); //error somewhere before here!!  l.tilelayer.provider('thunderforest.outdoors').addto(map);   map.on('dblclick', function(event) {  markers.insert({latlng: event.latlng}); });  //add markers var query = markers.find(); query.observe({ added: function (document) {   var marker = l.marker(document.latlng).addto(map)     .on('click', function(event) {       map.removelayer(marker);       markers.remove({_id: document._id});     }); }, //remove markers removed: function (olddocument) {   layers = map._layers;   var key, val;   (key in layers) {     val = layers[key];     if (val._latlng) {       if (val._latlng.lat === olddocument.latlng.lat && val._latlng.lng === olddocument.latlng.lng) {         map.removelayer(val);       }     }   } } }); };

thanks, @sosdoc , initializing variables , me in long term of project. rendering map @ current location found easier answer! leaflet has locate method built it. instead of passing 'uninitialized' latit , longit vars, did this:

map = l.map('map', {doubleclickzoom: false}).locate({setview: true, maxzoom: 16});

which sets map location. maxzoom variable amount of times can zoom , can changed.


Comments

Post a Comment

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

i'm looking dynamically populate select element names of items stored array. for reason it's not working , i'm not sure why. html: <div class="col-md-4 col-md-offset-4"> <select class="select1"> </select> , <select class="select2"> </select> </div> note i'm using bootstrap layout. here's jquery i'm using try , populate ".select1" jquery: select: function() { $.each(state.greens, function(index, value) { $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>"); }); } note function 'select' stored within object called 'display'. state.greens name of array i'm trying access. so @ end of html page call display.select(); call function. no error messages showing in console. also, saw question: appending
Read more

Android soft keyboard reverts to default keyboard on orientation change -

i'm building android soft keyboard , can't seem fix bug - have arabic , qwerty keyboard , when rotate device on qwerty keyboard (or arabic shift), it's if program has "restarted" , becomes arabic keyboard without shift. the onsaveinstancestate(bundle savedinstancestate) not work because application not extend activity inputmethodservice . i put following in android manifest android:configchanges="keyboard|keyboardhidden|orientation" android:windowsoftinputmode="stateunchanged|adjustresize"> i tried using @override public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); log.i(mydebug, "config changed " + currentkeyboard.equals(qwerty)); } however, currentkeyboard.equals(qwerty)) results false , made sure true before orientation change. any appreciated. i think applications fault. if application restarting on orientation change
Read more

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -

i rendering jbutton image on simulate jcheckbox behavior. why don't let jtable render jcheckbox? because need bigger checkboxes , there's no way can resize them (as far know). so, have own table cell renderer , editor. both renders jbutton , checkbox images on them. trying change image checked image unchecked image (or vice versa) , update cell value (boolean true or false). however, reason, getcelleditorvalue() not update table. so, release mouse, value goes original one. any appreciated! lot! public class tableexample extends jframe { jscrollpane pane; jpanel panel; jtable table; object[][] data; mytablemodel tm; renderer buttoncolumn; public tableexample(object[][] data) throws ioexception { string[] columns = {"column#1", "column#2", "column#3", "column#4", "column#5", "column#6"}; this.data = data; this.setpreferredsize(new dimension(700, 500));
Read more