Picture in the feature info side panel

[Marian Spacir]

Hi all,

do you have any advice on how can I visualize some pictures in the feature info side panel from a URL? 

In attributes, I have a URL of a picture. 

If I try to make a custom format with this string "<img src="${properties.photo}" width="140" height="100">" It doesn't work. It adds quotation marks before and after the string (below in red ). 

Also I tried to make it as a link (attached screenshot) with the same problem.

Mapstore makes something like this: 

<div>

    <p>

        <a href="https://cdn.fischer.sk/Images/000417/italie-lago-di-garda-0_706x424.jpg" rel="noopener noreferrer" target="_blank">

            "<img src="https://cdn.fischer.sk/Images/000417/italie-lago-di-garda-0_706x424.jpg" width="140" height="100">"

        </a>

    </p>

</div>

But if I put a whole HTML string ( <img src="https://cdn.fischer.sk/Images/000417/italie-lago-di-garda-0_706x424.jpg" width="140" height="100"> ) into attributes and then use only ${properties.photo} It looks good, but I don't want to have the whole HTML string in the attribute table.

Many thanks

Best

Marian

[Ramiro Mata]

Hi Marian.

I found a workaround for showing pictures and links in the GetFeatureInfo panel.

Simply added the full HTML code inside a layer attribute (in my case is PostgreSQL + PostGIS served through GeoServer).

Here is an example of the field (attribute) containing a link to an external image.

The field is called "imagen" and it contains the following

<img src='https://server.domain/folder/image.png' width='200' height='200'>

Then, in MapStore, edit the corresponding template for the layer, and add

${ properties.imagen}

Also, i've managed putting hyperlinks from database, adding a field called "vinculo"

This is an example content for vinculo field:

<a href='https://www.google.com' target='_blank'>More info</a>

Then, in MapStore, edit the corresponding template for the layer, and add

${ properties.vinculo}

Also, i noticed that template editor supports more formatting than the toolbars offer. If You copy and paste formatted text (from MS Word for example), the template manages it.

That did the trick

(Sorry for my english)

Cheers,

Ramiro