miguelcobain / ember-leaflet

:fire: :leaves: Easy and declarative mapping for ember
https://miguelcobain.github.io/ember-leaflet/
MIT License
210 stars 87 forks source link

Locate Me option in addon #24

Closed adhithyaraja closed 8 years ago

adhithyaraja commented 8 years ago

Hi, Can I able to achieve the same via this addon? Please help.

this.L.locate({
         setView: true,
         drawCircle: true,
         markerClass: L.circleMarker
       }).addTo(lmap);
Thanks in advance.
miguelcobain commented 8 years ago

Which locate are you talking about? There's this addon: https://github.com/domoritz/leaflet-locatecontrol Or there is the leaflet's locate method: http://leafletjs.com/reference.html#map-locate

Anyway, yes. You can do that if you subclass the map component. Example:

//app/components/leaflet-map.js
import LeafletMapComponent from 'ember-leaflet/components/leaflet-map';

export default LeafletMapComponent.extend({
  didCreateLayer() {
    this._super(...arguments);

    // this._layer is the map instance. call locate or any other stuff that uses layer
    this.L.control.locate({
       setView: true,
       drawCircle: true,
       markerClass: L.circleMarker
     }).addTo(this._layer);
  }
});

If you do this, consider creating an ember leaflet addon so other people can use it as well: http://www.ember-leaflet.com/addons

adhithyaraja commented 8 years ago

I achieved using the second option : http://leafletjs.com/reference.html#map-locate

      lmap = this._layer;
      lmap.locate({setView: true, maxZoom: 16})
      .on('locationfound', function(e){
            var marker = globalmap[0].L.marker([e.latitude, e.longitude]).bindPopup('Your are here!!!');
            var circle = globalmap[0].L.circle([e.latitude, e.longitude], e.accuracy/2, {
                weight: 1,
                color: 'blue',
                fillColor: '#cacaca',
                fillOpacity: 0.2
            });
            lmap.addLayer(marker);
            lmap.addLayer(circle);
        })
       .on('locationerror', function(e){
            console.log(e);
            alert("Location access denied.");
        });

First option : https://github.com/domoritz/leaflet-locatecontrol I tried using your code, I'm getting error like this.L.control.locate is not a function.

Thanks.

miguelcobain commented 8 years ago

Have you included that plugin's javascript in your app?

adhithyaraja commented 8 years ago

I did bower install. Isn't that enough?

miguelcobain commented 8 years ago

@adhithyaraja No.

The build process must be aware that you want to import that javascript code.

Please read http://ember-cli.com/user-guide/#asset-compilation for more information.