I am trying to place an image (png or jpg) over an OSM map.
I have already created a module for this and it works. The OSM map is loaded, but I can't get the image to be placed over the corresponding location. (It covers an area of approx. 120x120m).
The only thing I managed to do is to tile the image, which is of course wrong.
I tried it with url, imageUrl, imageBounds and so on.
Here is the code I use in the module
<?php
/**
* Implements hook_leaflet_map_info().
*/
function gstan_overlay_leaflet_map_info() {
$default_settings = [
'center' => [00.0000, 00.0000],
'zoom' => 19,
'dragging' => TRUE,
'touchZoom' => TRUE,
'scrollWheelZoom' => TRUE,
'doubleClickZoom' => TRUE,
'zoomControl' => FALSE,
'attributionControl' => FALSE,
'trackResize' => TRUE,
'fadeAnimation' => TRUE,
'zoomAnimation' => TRUE,
'closePopupOnClick' => TRUE,
];
// Attribute for OSM tiles
$attr_osm = '© OpenStreetMap contributors';
$map_info = [];
// Add base layer with OpenStreetMap
$map_info['osm-with-image-overlay'] = [
'label' => 'OSM with Image Overlay',
'description' => t('A base OSM layer with an additional image overlay.'),
'settings' => $default_settings,
'layers' => [
// Base layer
'base' => [
'urlTemplate' => 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
'options' => [
'attribution' => $attr_osm,
'maxZoom' => 20,
],
'layer_type' => 'base',
],
// Image overlay layer
'image_overlay' => [
'urlTemplate' => '/sites/default/files/mapover.png',
'bounds' => [[00.0000, 00.0000], [00.0000, 00.0000]],
'options' => [
'opacity' => 0.5,
'maxZoom' => 20,
],
'layer_type' => 'overlay',
],
],
];
return $map_info;
}
(coordinates removed)
Is it somehow possible to place the picture over the map?
Alternatively, it would also be sufficient if only the image is displayed, but not the OSM (but I need the coordinates)
Active
10.2
Documentation
Well, imho
you should apply what Leaflet Js library explains here:
https://leafletjs.com/examples/overlays/
and do that with the Leaflet Map that is being generated by the Leaflet View / Formatter,
and that could be achieved following the hints/example and instructions explained here:
https://www.drupal.org/project/leaflet/issues/3047091 📌 Leaflet Map & Markers external interaction, on events - LIVE DEMO Needs review