1

I have implemented leaflet-control-window plugin into my map and it works. Modal opens on marker click and shows text.

I need image to go below the text in the window but can't get it to work. When I put image url inside of content, it either shows text or image (depending what I put first in the brackets).

How to write it so that both img and text are visible? Here is an example of what I'm trying to achieve, Leaflet postcards, modal with short text description and an img gallery (2-3 photos).

Defining a marker and initializing:

   const marker1 = L.marker([45.899491, 16.844165],{icon:leafletIcon}).addTo(map);

   marker1.on('click',function(){

    L.control.window(map,{
        title: 'Test drive'

    })
        .content('./images/open-mailbox-with-raised-flag.ico'+'Loorem ipsum dolor sit amet.')
        .show()
   });
  • In the code above it's only text. Please edit your question with the code of how you try to display text and image combined. – TomazicM Dec 11 '20 at 10:26
  • Edited. Tried also with adding 2 .contents, one with text, one with img but it shows only one. – abudimir Dec 11 '20 at 10:50
1

Window content, created by leaflet-control-window plugin, must obey HTML formatting rules as you would create normal HTML content.

For example, to display centered image and some text below, code could look something like this:

var content = '<img src="img/leaf-green.png" style="display:block; margin:auto;"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>';

var map = L.map('map').setView([38,-22], 3);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var marker = L.marker([55,-19],{title:"Click to show window." }).addTo(map);

marker.on('click',function(){
  var win =  L.control.window(map, {title:'Hello world!', maxWidth: 200, modal: true})
    .content(content)
    .prompt({callback:function(){alert('This is called after OK click!')}})
    .show()
});

This would produce the following popup:

enter image description here

  • Thanks, neighbor. :) So I have to go through the variable. Did as you suggested and it works. How would I format it so that there are 2-3 img, like a mini lightbox gallery? – abudimir Dec 11 '20 at 11:43
  • Question was "I need to set image below text". I had put image above the text, but I still think question was answered. If it helped solve your initial problem, it's customary on GIS SE site to mark answer as accepted to let others with similar problems know it was resolved. Your additional question is not GIS related and belongs more to the StackOverflow site. – TomazicM Dec 11 '20 at 12:44
  • The question was (if you read it carefully again): "...with short text description and an img gallery (2-3 photos)." But ok. Partially solved. – abudimir Dec 11 '20 at 12:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.