Include textbox tool to leaflet.draw
Closed this issue · 9 comments
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.
Hey @kiolalis - Take a look at examples/simple.html, especially line 29.
You should include Leaflet.Illustrate js and css files in the <head> of your HTML file. Once you've done this, you should be able to replace the call to new L.Control.Draw in your own code with a call to new L.Illustrate.Control.
L.Illustrate.Control is a toolbar which is the same as L.Control.Draw except that it allows you to add a handler for drawing textboxes.
Thanks a lot. I followed your instructions. Now I have the text tool without icon on toolbar, while the other tools of leaflet.draw dissapeared. The results is shown here: http://users.sch.gr/ttnfy17/onlineapps/mapcreator/index.html.
As a teacher in primary education, the main target of my effort is to provide students with an easy tool to create their maps, for geography and history, so it's vital to solve this problem.
Thanks in advance
Yannis
Hmmm. The reason that the icons are missing is because Leaflet.Illustrate can't find the icon spritesheet. It thinks it's at http://users.sch.gr/ttnfy17/onlineapps/mapcreator/src/img/spritesheet.png, but that URL returns 404 (resource not found). This may be a permissions issue? The spritesheets are in place - they're located at dist/images in the Leaflet.Illustrate repo.
Can you see where the Leaflet.draw spritesheet is located when you use Leaflet.draw, not Leaflet.Illustrate?
Re: the other tools of Leaflet.draw disappearing - sorry - I gave bad instructions! The toolbar at Leaflet.Illustrate.Toolbar only contains tools for drawing textboxes and pointers. If you want to customize the Leaflet.draw toolbar with your own actions (such as Leaflet.Illustrate actions), you'll need create your own toolbar extending L.Toolbar (see Leaflet.Illustrate.Toolbar, line 1), and then add mode handlers for each of the tools that you want to provide (see Leaflet.Illustrate.Toolbar, line 25).
Alternatively, you could use Leaflet.toolbar - but that would require writing a bit more code.
Thanks Justin
I follow your instructions about the icons and now they appear: http://users.sch.gr/ttnfy17/onlineapps/mapcreator/index.html.
But for the next step, on how to include the text tool in leaflet.draw toolbar, or how to create my own toolbar, the situation for me is difficult, cause I don't know how to customize the leaflet.draw toolbar.
Either way, thanks for the time you spent to help me.
Yannis
Hi Yannis,
I put together an example with the Leaflet.Illustrate and Leaflet.draw toolbars combined.
See examples/mapcreator-toolbar.js in the issue-15 branch for the code. A working copy of the example is online at http://manleyjster.github.io/Leaflet.Illustrate/examples/0.0.3/issue-15/.
Hi Justin
What can I say? You did everything I need. I watch your work in github so I
will be informed about your updates.
Thanks a lot, efxaristo poli.
Yannis
2015-07-15 17:44 GMT+03:00 Justin Manley notifications@github.com:
Hi Yannis,
I put together an example with the Leaflet.Illustrate and Leaflet.draw
toolbars combined.See examples/mapcreator-toolbar.js in the issue-15 branch
https://github.com/manleyjster/Leaflet.Illustrate/blob/issue-15/examples/mapcreator-toolbar.js
for the code. A working copy of the example is online at
http://manleyjster.github.io/Leaflet.Illustrate/examples/0.0.3/issue-15/.—
Reply to this email directly or view it on GitHub
#15 (comment)
.
Γιάννης Κασκαμανίδης
Σχολικός Σύμβουλος
3ης Εκπαιδευτικής Περιφέρειας
Διοικητήριο
53100 Φλώρινα
Ιστότοπος: http://kaskas.mysch.gr
Σημαντικά & Εφήμερα: http://www.scoop.it/t/hritrant
Κινητό: 6944185840
Τηλ. εργασίας: 23850 54587
Fax: 23850 54582
Hi Justin
I have made many changes and now the map creator with the textbox tool is available: http://users.sch.gr/ttnfy17/onlineapps/mapcreator/index.html
Only three features don't work:
- The polygon tool doesn't measure areas with hectares.
- The marker icon doesn't appear
- I cannot add the easyPrint button: https://github.com/rowanwins/leaflet-easyPrint
Thanks again
Yannis
I'm sorry Yannis, but I can't spend any more time on this issue at the moment.
I believe that your issue 1 above may be a configuration issue - take another look at the configs your passing in when you initialize the toolbar. I'm not sure about 2 since I can see the marker icon when I navigate to your demo page.
Best of luck!
In any case I'd like to thank you very much.
Yannis