externalLinksFromMapClick_3.7.js

// ID of the dock (do not change)
const DOCK_ID = 'external-links';
// Icon of the dock menu and used before each link
// See https://getbootstrap.com/2.3.2/base-css.html#icons
const DOCK_ICON = 'icon-map-marker';
// Dock position: can be dock, minidock, right-dock
const DOCK_POSITION = 'right-dock';
// Title of the dock
const DOCK_TITLE = 'External resources';
// Description displayed at the top of the dock content
const DOCK_DESCRIPTION = 'You can view the current map area in other tools.';
// Sentence used when no click has been made on the map yet
const DOCK_PLEASE_CLICK = 'Please click on the map to get the updated links.';
// Default Z value
const DEFAULT_Z_VALUE = 15;
// List of links to display, with a title and a URL
// You must replace
// the longitude by LONGITUDE and the latitude by LATITUDE (upper case)
// AND the z value by Z
const DOCK_LINKS = [
    {
        'title': 'OpenStreetMap',
        'url': `https://www.openstreetmap.org/?mlat=LATITUDE&mlon=LONGITUDE#map=Z/LATITUDE/LONGITUDE`
    },
    {
        'title': 'Waze',
        'url': `https://www.waze.com/livemap/?zoom=Z&lat=LATITUDE&lon=LONGITUDE`
    },
    {
        'title': 'Google',
        'url': `https://maps.google.com/maps?ll=LATITUDE,LONGITUDE&q=LATITUDE,LONGITUDE&hl=fr&t=m&z=Z`
    },
];

// ---------------------------
// DO NOT EDIT AFTER THIS LINE
// ---------------------------

/**
 * Add the Lizmap dock with the links
 * every time the user clicks on the map
 *
 * @param event Click event
 */
function buildHtml(longitude = null, latitude = null) {
    let dockHtml = '';
    dockHtml += `<p style="padding: 5px;">${DOCK_DESCRIPTION}</p>`;
    if (longitude && latitude) {
        dockHtml += `<p style="padding: 5px;"><b>Longitude</b> : ${longitude}<br><b>Latitude</b> : ${latitude}</p>`;
        dockHtml += '<table class="table table-condensed table-hover table-striped table-bordered table-">';
        dockHtml += '<tbody>';
        // Add a line for each link to display
        for (let i in DOCK_LINKS) {
            const link = DOCK_LINKS[i];
            let href = link.url;
            const latitudeRegex = /LATITUDE/g;
            const longitudeRegex = /LONGITUDE/g;
            const zRegex = /Z/g;
            href = href.replace(longitudeRegex, longitude);
            href = href.replace(latitudeRegex, latitude);
            href = href.replace(zRegex, DEFAULT_Z_VALUE);
            dockHtml += `
                <tr class="external-link-line" title="${link.title}" style="cursor: pointer;" onclick="this.querySelector('a').click();">
                    <td>
                        <i class="${DOCK_ICON}"></i>
                    </td>
                    <td title="${href}">
                        ${link.title}<a href="${href}" target="_blank" style="display: none;">link</a>
                    </td>
                </tr>
            `;
        }
        dockHtml += '</tbody>';
        dockHtml += '</table>';
    } else {
        dockHtml += `<p style="padding: 5px; font-style: italic; font-size: 0.8em; background: lightgray;">${DOCK_PLEASE_CLICK}</p>`;
    }

    return dockHtml;
}

/**
 * Create and add the new dock in Lizmap Web Client interface
 *
 */
function addLinkDock() {
    const content = buildHtml();
    const html = `
        <div id="lizmap-external-links" style="font-size: 11pt;">
        ${content}
        </div>
    `;
    lizMap.addDock(
        DOCK_ID, DOCK_TITLE, DOCK_POSITION, html, DOCK_ICON
    );
}

/**
 * Refresh the content of the external links dock
 * every time the user clicks on the map
 *
 * @param event Click event
 */
function onMapClick(event) {

    let coordinates = lizMap.map.getLonLatFromViewPortPx(event.xy);
    coordinates.transform(lizMap.map.projection, 'EPSG:4326');
    const longitude = coordinates.lon.toFixed(6);
    const latitude = coordinates.lat.toFixed(6)
    let content = buildHtml(longitude, latitude);
    divTarget = document.getElementById('lizmap-external-links');
    if (divTarget) {
        // Replace content
        divTarget.innerHTML = content;
    }


    return false;
}

// Listen to Lizmap Web Client interface creation
lizMap.events.on({
    uicreated: function () {

        // Create the dock
        addLinkDock();

        // Register a click on OpenLayers 2 map
        lizMap.map.events.register('click', map, onMapClick);
    }
});