xdev-software / vaadin-maps-leaflet-flow

A Vaadin Flow Java API for Leaflet Maps 🗺️ Component (https://leafletjs.com/)
https://vaadin.com/directory/component/leafletmap-for-vaadin
Apache License 2.0
34 stars 16 forks source link

ImageOverlay ? #209

Closed thierrybodhuin closed 1 year ago

thierrybodhuin commented 1 year ago

Is there any functionality to display an Image Overlay ?

Thanks

JohannesRabauer commented 1 year ago

As i see it: You want to use the Image-Overlay from Leaflet (https://leafletjs.com/examples/overlays/), right? Right now our library does not support this functionality. Feel free to open an issue and request this functionality. Furthermore you can implement this with an own pull request.

If you want a kind of "quick & dirty" solution, you can use the functionality like the following:

LMap map = new LMap(49.675126, 12.160733, 17);
String javaScriptToExecute =
"var imageUrl = 'https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg';\n"
    + "var errorOverlayUrl = 'https://cdn-icons-png.flaticon.com/512/110/110686.png';\n"
    + "var altText = 'Image of Newark, N.J. in 1922. Source: The University of Texas at Austin, UT "
    + "Libraries "
    + "Map Collection.';\n"
    + "var latLngBounds = L.latLngBounds([[40.799311, -74.118464], [40.68202047785919, -74.33]]);\n"
    + "\n"
    + "var imageOverlay = L.imageOverlay(imageUrl, latLngBounds, {\n"
    + "    opacity: 0.8,\n"
    + "    errorOverlayUrl: errorOverlayUrl,\n"
    + "    alt: altText,\n"
    + "    interactive: true\n"
    + "}).addTo(this.map);";
map.getElement().executeJs(javaScriptToExecute);

This worked for me but i do not recommend using this.