GH says there've been 44 commits since v0.0.2; would you consider doing another release so I can peg the version # in bower? Thanks!

This bug is present in the demo: http://manleyjster.github.io/Leaflet.Illustrate/examples/0.0.2/simple/.

To reproduce this bug:

1. Draw a textbox
2. Click the edit button in the toolbar
3. Make a change
4. Click "Cancel" next to the edit button in the toolbar.
5. Notice that the changes are not reverted.

After pushing commit fcd6080, I encountered very weird behavior in MapKnitter that wasn't present in the demo in examples/simple.html .

When I loaded a map containing Leaflet.Illustrate.Textbox annotations, the toolbar and the map tiles had a strange right offset: When I selected the textbox drawing tool, the new textbox was not created under my cursor, but appeared offset by the same amount. Strangely, dragging the map around and zooming out sometimes got rid of the offset. Toggling position: relative on the top-level map <div> also fixed the issue.

After messing around with a bunch of different changes, I finally identified a possible cause of the issue. It looks like the map was being offset to show off-screen textboxes on the map, if possible. Strangely, adding another annotation to the far left off-map removed this issue and caused the map to load normally.

This is most likely an issue with the new CSS styles introduced in the commit referenced above.

It can't be used with with leaflet 1.0+

Leaflet.draw seems to adapt this.

Any plan or idea?

Sometimes, when drawing a textbox, the textbox get stuck at a fixed size while still very small and the map starts to drag. If the user then goes into editing mode, the textbox can be expanded to a usable size - but it's annoying and unintuitive behavior.

This bug can result in lots of textboxes that look like this:

It seems that the size of the textbox may be getting set to the textbox minSize. I'm not sure why that fires the draw:created event and enables map dragging again, though.

This bug is present in the demo for version 0.0.2 (http://manleyjster.github.io/Leaflet.Illustrate/examples/0.0.2/simple/), but seems to have become much more pronounced with updates to L.Illustrate.Textbox#setSize in d34ffc706f.

Hi, is there any way I can integrate medium editor tool bar to leaflet illustrate textbox? I tried to link the medium editor object to the textbox but it does not work.

• Make L.Illustrate.Textbox inherit from L.RotatableMarker, rather than setting this._textbox = L.RotatableMarker. The current situation is screwing up event propagation (events aren't propagating from the marker icon to the L.Illustrate.Textbox instance).

I found that Leaflet.Illustrate is not working when I use leaflet.draw 0.3.0.
I attached my test files and err capture.

test.zip

Hi. when adding a text box via an additional leaflet.draw toolbar button and editing the text box no handles are shown for resizing, rotating or moving the text box. Looking through Leaflet.Illustrate.js it looks like these should be available and in the demo they are available. is there anything you have to do to make them available? Once the text box is drawn I am only able to edit the text.

there are no errors in the console and it happens in both browsers I checked: chrome and edge

to add the text box to the toolbar I followed your instructions in issue #15 Include textbox tool to leaflet.draw and modified it a bit to fit in with existing code and I'm guessing that I got something wrong.

Is it, because the edit toolbar of leaflet.draw doesn't know about L.Illustrate.Edit.Textbox?

While zooming, shape will always stay with same dimensions. You can try it on demo:

• draw line
• zoom out to the biggest value

Line won't became smaller and you can see in from largest zoom. Do you have an idea how to fix it?

I installed the leaflets illustrate plugin in my Angular 5 project using "npm i leaflet-illustrate".
Also, I included the JavaScript and CSS in the index.html file.
I want to know how to import this in the *.ts file to use the plugin. I have tried:
import {Illustrate} from 'leaflet-illustrate';
This did not work.
Can someone point me in the right direction.

When Textboxes were added to the map with: L.Illustrate.Textbox(...).addTo(map) after being loaded via AJAX request (i.e. they had already been created using Leaflet.draw and then saved to a database), they were missing rotate pointers.

I tracked the problem down to the _createPointer method of L.Illustrate.RotateHandle, which read:

_createPointer: function() {
    var options = {
        color: this._handled.options.borderColor,
        weight: Math.round(this._handled.options.borderWidth)
    };

    this._pointer = new L.Illustrate.Pointer(this._handled.getLatLng(), [], options);
    this._updatePointer();

    this._handled.on({ 'update': this._updatePointer }, this);
},

The problem was that L.Illustrate.Create.Textbox provided defaults for borderWidth and borderColor, but L.Illustrate.Textbox didn't accept those as options. Instead, I was setting styles on L.Illustrate.Textbox via css stylesheets. As a result, the strokeWidth and strokeColor were both undefined for the SVG path.

I fixed this by reading the color and weight for the pointer directly from the <textarea> of the L.Illustrate.Textbox:

var textarea = this._handled.getTextarea(),
    borderWidth = L.DomUtil.getStyle(textarea, 'border-width'),
    borderColor = L.DomUtil.getStyle(textarea, 'border-color');

The only caveat to this approach is that the border width and color must be set directly on the textbox (not on its container), and the border-width and border-color properties must be present (probably meaning that all borders must be same width and color), otherwise the weight and color of the SVG element will end up undefined.

I really like the way that Leaflet.Illustrate looks and functions but I really need to get the text boxes to print through Geoserver/Mapfish print server. Right now, I can get the text to print, but not the box behind the text. This is due to the fact that the entire annotation is seen as a marker and leaflet.print is treating it as an icon with a label. I know, none of this is Leaflet.Illustrate's concern.

What I am wondering is if there is some way to leave the rectangle behind the text as a L.Rectangle rather than using HTML to format the box? This would allow me to pass the rectangle to the print service as one object that it knows how to handle and then the text as it is now.

Thanks for any thoughts on this.

Scott

Does anyone know of an alternative solution to this plugin on the current version of leaflet? I am looking for a dynamic way for users to add text specifically to markers.

Not sure if this is a bug or unimplemented feature, but thought I'd start putting in issues now that the code is demoable.

I'm using Firefox 30 on Mac OS 10.9.4 and vectors don't seem to be locked to the map:

I'm not sure if you mean for people to clone the repo and run the example, but the link in the README is broken: http://manleyjster.github.io/Leaflet.Illustrate/examples/0.0.2/simple/

I tried to do the following:

npm install leaflet-illustrate
require('leaflet-illustrate/dist/Leaflet.Illustrate.js')
require('leaflet-illustrate/dist/Leaflet.Illustrate.css')

I'm using webpack as a bundler in this case, and the css loader is failing because the dist folder pulled down from npm doesn't contain a spritesheet-2x.png, which Leaflet.Illustrate.css references.

Kind of makes the npm package a bit unusable. I'd really appreciate an updated package so I can utilize NPM 🍻

Even with the corrections found in the pull requests, the add on is unfortunately still not work with the current leaflet version in my case. The text box appears but the size can't be fixed, it can't be attached or any text tipped in. Are there any updates on this? Thank you in advance!

TODO

• Allow users to specify in the options for L.Illustrate.Textbox custom classes to be placed on the <textarea>.
• Get weight and color for L.Rectangle created by L.Illustrate.Create.Textbox from the CSS styles on textarea elements. Will need to do this by creating an orphan <textarea> element with leaflet-illustrate AND user-provided custom styles, if any, and calling L.DomUtil.getStyle.
• Handle textbox zooming (link textboxes to the zoom level at which they are created and hide them when the user zooms out and they start to overlap with other textboxes).

I'm interested in whether, once annotations are created, we can display them as a read-only layer without textbox borders, etc; similar to the readOnly property in MapKnitter's use of Leaflet.DistortableImage.

Another related question is how, and if, when done annotating, we can switch to read-only mode. As in, once you've opened the Annotations interface, written one, then want to go back to simply viewing the map with the annotation on it, the way anyone else would see it (who isn't actively annotating).

I have tried to load text box objects saved as GeoJSON in local storage in following code.
Although I could redraw text boxes, their backgrounds are not transparent.

Any idea to improve this?

//load saved text box objects
var stored = JSON.parse(localStorage.getItem('field_work.memoItems'));// load objects saved in local storage

if(stored == null) return;
if(stored.features.length > 0)
drawnItems.clearLayers();

if (stored != null && stored.length != 0){
for(var i in stored.features){
var item = stored.features[i];

   //check properties including annotation text
  if(item.properties['textContent'] != null){
 var coords = item.geometry.coordinates; // get coordinates
 var center = L.latLng(coords[1], coords[0]); //get center point
 var width = item.properties.style.width; //get width
 var height = item.properties.style.height; //get height
 var rotation = item.properties.style.rotation; //get rotation angle
		
 var textOptions = {//set text options
	borderColor: '#4387fd',
	borderWidth: 2
 }
				
    var textbox = new L.Illustrate.Textbox(center, textOptions).setSize(new L.Point(width, height)); // create text box
drawnItems.addLayer(textbox); // add text box
textbox.getTextarea().value= item.properties['textContent']; // set text
//textbox.getTextarea().focus();//not effect
//textbox.setOpacity(0);// just vanished all
				
textbox.fire('textedit', { textContent: textbox.getContent() });//not effect
	textbox._text_edited = false;//not effect
}

}
}

The attribution for the tile layer in the example mentions Stamen, while the layer is actually MapQuestOpen.
Should be something like:

'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency'

The textbox html element added by this plugin includes event handlers on mouseover/out that enable/disable dragging on the map.

This is problematic because dragging my be disabled for some other reason. For example Leaflet Draw disables dragging when you start drawing shapes. If you then mouseover and mouseout of a textbox then you re-enable dragging.

I have monkey patched the _enableTyping method in our install to remove those dragging lines and everything works fine, so I'm not sure why they are necessary. If they are not required I can submit a PR to remove them.

https://github.com/justinmanley/Leaflet.Illustrate/blob/master/src/core/L.Illustrate.Textbox.js#L160

Today I found the leaflet.illustrate and I'm asking you how can I include the textbox tool in leaflet.draw toolbar. My leaflet map is here: http://users.sch.gr/ttnfy17/onlineapps/mapcreator/index.html
Take into account that I'm not a developer but an advanced user.

seems the project is missing spritesheet-2x.png which is used on retina displays