B4J Question [BANanoVuetify/] How to add overlay image to map in Leaflet ?

NGUYEN TUAN ANH

Active Member
Licensed User
Dear All
I created Leaflet web map in B4j with BANanoVueMaterial
Could you please help me, i'm waiting from Mr. Mashiane
How to add overlay image to map in Leaflet ?
Thank you very much.!
Best regards
PS: I see on Internet: https://www.tutorialspoint.com/leafletjs/leafletjs_overlay.htm
Instead of map overlays, you can also use image, video overlays in a Leaflet application. In this chapter, we will see how to use such overlays.

Image Overlay​

Follow the steps given below to use an image overlay.

Step 1 − Create a Map object by passing a <div> element (String or object) and map options (optional).

Step 2 − Create a Layer object by passing the URL of the desired tile.

Step 3 − Add the layer object to the map using the addLayer() method of the Map class.

Step 4 − Create the image overlay using L.imageOverlay(). Pass the URL of the image and an object representing image bounds, as shown below.
// Creating Image overlay
var imageUrl = 'tpPoster.jpg';
var imageBounds = [[17.342761, 78.552432], [16.396553, 80.727725]];
var overlay = L.imageOverlay(imageUrl, imageBounds);

Step 5 − Add the overlay to the map using addTo() method of the imageOverlay class, as shown below.

// Adding overlay to the map
overlay.addTo(map);

Example​

The following code demonstrates the usage of image overlay.
<!DOCTYPE html>
<html>
<head>
<title>Image Overlay Example</title>
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>

<body>
<div id = "map" style = "width:900px; height:580px"></div>
<script>
// Creating map options
var mapOptions = {
center: [17.342761, 78.552432],
zoom: 8
}
var map = new L.map('map', mapOptions); // Creating a map object

// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer); // Adding layer to the map

// Creating Image overlay
var imageUrl = 'tpPoster.jpg';
var imageBounds = [[17.342761, 78.552432], [16.396553, 80.727725]];
var overlay = L.imageOverlay(imageUrl, imageBounds);
overlay.addTo(map);
</script>
</body>

</html>

Could you please help me convert to B4J BANanoVueMaterial
 
Top