Support for drawing on maps about ember-leaflet HOT 7 CLOSED

The best way would be to add that leaflet plugin to ember-leaflet.
Maybe @ForSpareParts has some helpful info on that.

from ember-leaflet.

First off: Ember-leaflet is such a great extension! Thank you so much for your hard work!

@bimabima - I need to work with leaflet.draw too. Eventually I want to try and develop actual modules for it and package it as an extension, but for now I have just extended leaflet-map and added the options drawand editable to leafletOptions

like this:

import Ember from 'ember';
import LeafletMap from 'ember-leaflet/components/leaflet-map';
/* global L */

export default LeafletMap.extend({
    L,
    leafletOptions: ['draw','editable']
...

and then when you instantiate a map in your hbs. document you can add these options

{{leaflet-map
drawControl=true
editable=true
}}

if you want to listen for draw events you can do something like this (for now) manually

listenForDrawEvents: function(){
  const self = this;
  this._layer.on('draw:drawstop', function (e) {
      self.sendAction('drawingFinishedAction')
  });
}.on('didRender) 

and

{{leaflet-map
drawControl=true
editable=true
drawingFinishedAction='handleDrawingFinishedAction'
}}

hopefully this isn't too hacky :)

from ember-leaflet.

@localyost Any chance you have a small example project?

from ember-leaflet.

when you say you extend leaflet-map, which file do you edit to do so? app/components/leaflet-map.js ?

what version of ember are you using?

Thanks!

from ember-leaflet.

Sorry for the spam...I think I've got it, but now the drawng buttons don't have symbols/icons in them. Ideas?

from ember-leaflet.

Hey, no problem :)

I'm using Ember 2.4

I don't have the project in front of me, but if I remember correctly I installed it with bower and in ember-cli-build.js compiled the source + css

app.import('bower_components/leaflet.draw/dist/leaflet.draw.js');
app.import('bower_components/leaflet.draw/dist/leaflet.draw.css');

and then added the image sprites like this:

app.import('bower_components/leaflet.draw/dist/images/spritesheet.png', {destDir: 'assets/images'});

I'll check tomorrow.

If it's not loading the images, then check in the console where it's trying to pull them from. You should get a 404, and, as always kill your cache :)

from ember-leaflet.

Thanks. That's exactly where I just ended up.

from ember-leaflet.