As the example under
http://matti.app.fi/vleafletexample/ shows, on the right top of the map there is a leaflet control layer (image 1), when mouse over the layer, it toggles and shows the name “OSM” (image2).
the screenshots are here:
image 1:
image 2:
I would like to customize the both image,
for the image 1, i would like to add a close icon on the right top of it. If close icon is clicked, this image disappeares.
for the image 2, i would like to replace the radio check box with other html element like tree table etc. I already know how to implement such kind of tree table, but i would like to know how to replace the radio check box with it.
The layer selector there is a LeafletJS feature, so creating additional features to it would require JS hacking it as well.
Instead of putting your hands dirty with JS, I’d suggest to build what you want with plain Vaadin code. I have often just placed the LMap into an AbsoluteLayout. AbsoluteLayout is a powerful layout where you can for example place components on top of each other. Hook you custom layer editor component (built with e.g. Table, Buttons, some layouts and maybe addons like PopupButton) to top right corner on top of the LMap component. You’ll get full control in plain Java.
