added image overlay functionality to javafx

Signed-off-by: makbn <mehdi74akbarian@gmail.com>

Author: makbn

jlmap-fx/src/main/java/io/github/makbn/jlmap/fx/demo/LeafletTestJFX.java

@@ -91,6 +91,17 @@ public void mapLoadedSuccessfully(@NonNull JLMapController mapView) {
                                 .lng(51.45)
                                 .build(), 30000, JLOptions.DEFAULT);
 
+                // JLImageOverlay demo: Eiffel Tower image over Paris
+                JLBounds eiffelBounds = JLBounds.builder()
+                        .southWest(JLLatLng.builder().lat(47.857).lng(3.293).build())
+                        .northEast(JLLatLng.builder().lat(49.860).lng(1.298).build())
+                        .build();
+                map.getUiLayer().addImage(
+                        eiffelBounds,
+                        "https://img.favpng.com/1/24/8/eiffel-tower-eiffel-tower-illustrated-landmark-L5szYqrZ_t.jpg",
+                        JLOptions.DEFAULT
+                );
+
                 // map zoom functionalities
                 map.getControlLayer().setZoom(5);
                 map.getControlLayer().zoomIn(2);

jlmap-fx/src/main/java/io/github/makbn/jlmap/fx/layer/JLUiLayer.java

@@ -15,7 +15,7 @@
  */
 @FieldDefaults(level = AccessLevel.PRIVATE, makeFinal = true)
 public class JLUiLayer extends JLLayer implements LeafletUILayerInt {
-    JLTransporter transporter;
+    JLTransporter<Object> transporter;
 
     public JLUiLayer(JLWebEngine<Object> engine, JLMapCallbackHandler callbackHandler) {
         super(engine, callbackHandler);
@@ -95,8 +95,29 @@ public boolean removePopup(String id) {
         return Boolean.parseBoolean(result);
     }
 
+    /**
+     * Adds an image overlay to the map at the specified bounds with the given image URL and options.
+     *
+     * @param bounds   the geographical bounds the image is tied to
+     * @param imageUrl URL of the image to be used as an overlay
+     * @param options  theming options for JLImageOverlay
+     * @return the instance of added {@link JLImageOverlay} on the map
+     */
     @Override
     public JLImageOverlay addImage(JLBounds bounds, String imageUrl, JLOptions options) {
-        throw new UnsupportedOperationException();
+        // Convert options to JS object (simple: only opacity and zIndex for demo)
+        String optionsJs = String.format("{opacity: %f, zIndex: %d}",
+                options.getOpacity(), 1);
+        // Call JS function to add image overlay
+        String result = engine.executeScript(String.format(
+                "addImageOverlay(%s, '%s', %s)", bounds, imageUrl, optionsJs)).toString();
+        JLImageOverlay overlay = JLImageOverlay.builder()
+                .transport(transporter)
+                .options(options)
+                .bounds(bounds)
+                .imageUrl(imageUrl)
+                .build();
+        callbackHandler.addJLObject(result, overlay);
+        return overlay;
     }
 }

jlmap-fx/src/main/resources/index.html

@@ -120,6 +120,7 @@
     var circleMarkers = [];
     var popups = [];
     var polyLines = []
+    var images = []
     var polygons = []
     var circles = []
 
@@ -212,6 +213,14 @@
 
     }
 
+    function addImageOverlay(bounds, imageUrl, options) {
+        let image = L.imageOverlay(imageUrl, bounds, options);
+        image.jlid = 'image';
+        image.addTo(jlFeatureGroup);
+        let len = images.push(image);
+    }
+
+
     function removeCircle(index) {
         let circle = circles[index];
         if (circle === undefined) {