Current User Location

[sherjil]

how can i find current user location I try http://leafletjs.com/examples/mobile/
replace 'map' with this.map but liks

       //web location
    this.map.locate({ setView: true});

    //when we have a location draw a marker and accuracy circle
    function onLocationFound(e) {
      var radius = e.accuracy / 2;

      L.marker(e.latlng).addTo(this.map)
          .bindPopup("You are within " + radius + " meters from this point").openPopup();

          if(radius < 12){
            L.circle(e.latlng, radius).addTo(this.map);
          }

      

      this.map.setZoom(17);

    }
    this.map.on('locationfound', onLocationFound);
    //alert on location error
    function onLocationError(e) {
      alert(e.message);
    }

    this.map.on('locationerror', onLocationError);

but got error

Runtime Error
Cannot read property 'addLayer' of undefined
Stack
TypeError: Cannot read property 'addLayer' of undefined
    at NewClass.addTo (http://localhost:8100/build/main.js:126911:6)
    at NewClass.onLocationFound (http://localhost:8100/build/main.js:82577:78)
    at NewClass.fire (http://localhost:8100/build/main.js:123561:11)
    at NewClass._handleGeolocationResponse (http://localhost:8100/build/main.js:125905:8)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:9655)
    at Object.onInvoke (http://localhost:8100/build/main.js:36749:37)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:9606)
    at e.runGuarded (http://localhost:8100/build/polyfills.js:3:7215)
    at http://localhost:8100/build/polyfills.js:3:6843

[SBejga]

Hi, I will have a look on Sunyday/Monday. I will also update the dependencies and versions. Currently I am on vacation. best regards sherjil <notifications@github.com> schrieb am Sa. 17. Juni 2017 um 18:10:

…

how can i find current user location I try http://leafletjs.com/examples/mobile/ replace 'map' with this.map but liks //web location this.map.locate({ setView: true}); //when we have a location draw a marker and accuracy circle function onLocationFound(e) { var radius = e.accuracy / 2; L.marker(e.latlng).addTo(this.map) .bindPopup("You are within " + radius + " meters from this point").openPopup(); if(radius < 12){ L.circle(e.latlng, radius).addTo(this.map); } this.map.setZoom(17); } this.map.on('locationfound', onLocationFound); //alert on location error function onLocationError(e) { alert(e.message); } this.map.on('locationerror', onLocationError); *but got error* Runtime Error Cannot read property 'addLayer' of undefined Stack TypeError: Cannot read property 'addLayer' of undefined at NewClass.addTo (http://localhost:8100/build/main.js:126911:6) at NewClass.onLocationFound (http://localhost:8100/build/main.js:82577:78) at NewClass.fire (http://localhost:8100/build/main.js:123561:11) at NewClass._handleGeolocationResponse (http://localhost:8100/build/main.js:125905:8) at t.invoke (http://localhost:8100/build/polyfills.js:3:9655) at Object.onInvoke (http://localhost:8100/build/main.js:36749:37) at t.invoke (http://localhost:8100/build/polyfills.js:3:9606) at e.runGuarded (http://localhost:8100/build/polyfills.js:3:7215) at http://localhost:8100/build/polyfills.js:3:6843 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAEH86Q8Z8h83bgptms0UfxtER1kvDdsks5sE_qKgaJpZM4N9Q5e> .

[sherjil]

ok .. thanks .. I downloaded latest version of before making app ..

[SBejga]

Hey,

sorry for this late response.
I added an example for Geolocation as a branch: https://github.com/SBejga/ionic2-map-leaflet/tree/geolocation

to use do the following:

git clone -b geolocation https://github.com/SBejga/ionic2-map-leaflet 
cd ionic2-map-leaflet
npm install 
ionic serve

I hope this helps.

[SBejga]

And I tried also to use this.map.locate({setView: true, maxZoom: 16}); which will also center the map to the location.

You can just add it to function initMap() in map.ts

  initMap() {
    this.map = L.map('map', {
      center: this.center,
      zoom: 13
    });

    //Add OSM Layer
    L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
      .addTo(this.map);

      this.map.locate({setView: true, maxZoom: 16});
  }

[sherjil]

Thanks A lot..