Interactive maps questions

Firstly this is a brilliant application. It has enabled me to build a knowledge management system based on service providers that is going to make identifying medical facilities much easier, so thanks to @ginpachi and others for all the work on this.

I have a few questions that I thought someone might be able to help with. Sorry to ask such a disparate range of questions in a single post. Happy to split them out if necessary. I hope the questions (and hopefully answers) will help other people trying to maximise the use of this application.

  1. Is there a way of styling the pop up boxes on the map? I am finding that they become very small when viewed on high resolution monitors.

  2. At the moment, the behaviour of the pop ups is that only one is possible to have open at a time on a map. This works well for most use cases, but not when the user might want to compare data associated with two points. This is particularly relevant for our application where we need to compare the distances to two hospitals from the patient.

  3. Id like to be able to import country boundary data so that each country appears as a clickable, bounded entity. This could be associated with a ‘country risk’ and displayed to the user on a map. The application has a neat way of importing individual point data as a json but I cant see any easy way of importing multiple polygons that would be required for country borders. Does anyone know a way of doing this?

  4. Is it possible, using a permalink to directly go to a marker on a map rather than the external Wiki page that defines that marker?

  5. Is it possible to completely remove the users ability to navigate to the Wiki pages that define markers or areas so they cannot see them? I really only want them to see the map points and pop ups because the other pages are only administrative.

Any help on these would be most gratefully received.

Thanks again,

Geoff.

Hi! We are currently playing with XWiki Kanban macro as a metaphor for representing rooms’ use at our centre. Perhaps the JavaScript approach we are using to style boxes could be useful for you, styling pop-up boxes or any other element on the map. Here is our playground created by @abdullah.igfae.usc.e:

I’m adding a screenshot for further reference in case the page becomes unavailable in the future:

image

That page contents one object of type StyleSheetExtension with the code:

#xwikicontent {
   background-color: lightBlue;
}

And one object of type JavaScriptExtension with the code:

window.onload = function() {
    const titleElements = document.getElementsByClassName('kanban-item-title');
    const headerElements = document.getElementsByClassName('kanban-board-header');
    const titleContainers = document.getElementsByClassName('kanban-item');

     for (let i = 0; i < titleElements.length; i++) {
        const titleElement = titleElements[i];
        titleElement.style.padding = "2px 4px";
        titleElement.style.borderRadius = "4px";

        if (titleElement.textContent.includes('LHCB')) {
            titleElement.style.color = 'white';
            titleElement.style.backgroundColor = 'red';
            const parentElement = titleElement.closest('.kanban-item');
            if (parentElement) {
                parentElement.style.backgroundColor = 'yellow';
            }
        }
        if (titleElement.textContent.includes('STRI')) {
            titleElement.style.color = 'white';
            titleElement.style.backgroundColor = 'navy';
            const parentElement = titleElement.closest('.kanban-item');
            if (parentElement) {
                parentElement.style.backgroundColor = '#FFDB58';
            }
        }
       if (titleElement.textContent.includes('AUGE')) {
            titleElement.style.color = 'white';
            titleElement.style.backgroundColor = '#FF7F50';
            const parentElement = titleElement.closest('.kanban-item');
            if (parentElement) {
                parentElement.style.backgroundColor = '#008080';
            }
        }
       if (titleElement.textContent.includes('HQCD')) {
            titleElement.style.color = 'white';
            titleElement.style.backgroundColor = 'crimson';
            const parentElement = titleElement.closest('.kanban-item');
            if (parentElement) {
                parentElement.style.backgroundColor = '#808000';
            }
        }
       if (titleElement.textContent.includes('NUCL')) {
            titleElement.style.color = 'white';
            titleElement.style.backgroundColor = '#E2725B';
            const parentElement = titleElement.closest('.kanban-item');
            if (parentElement) {
                parentElement.style.backgroundColor = '#708090';
            }
        }
       if (titleElement.textContent.includes('GRWA')) {
            titleElement.style.color = 'white';
            titleElement.style.backgroundColor = '#FF00FF';
            const parentElement = titleElement.closest('.kanban-item');
            if (parentElement) {
                parentElement.style.backgroundColor = '#F4C430';
            }
        }
       if (titleElement.textContent.includes('NEXT')) {
            titleElement.style.color = 'white';
            titleElement.style.backgroundColor = '#4B0082';
            const parentElement = titleElement.closest('.kanban-item');
            if (parentElement) {
                parentElement.style.backgroundColor = '#E0115F';
            }
        }
        if (titleElement.textContent.includes('LACC')) {
            titleElement.style.color = 'white';
            titleElement.style.backgroundColor = '#87CEEB';
            const parentElement = titleElement.closest('.kanban-item');
            if (parentElement) {
                parentElement.style.backgroundColor = '#98FF98';
            }
        }
    }

    for (let i = 0; i < headerElements.length; i++) {
        const element = headerElements[i];
        if (element.innerHTML.includes('Floor#: 2')) {
            for (let j = 0; j < element.classList.length; j++) {
                if (/kanban-header-\w+/.test(element.classList[j])) {
                    element.classList.remove(element.classList[j]);
                    element.style.backgroundColor = '#98FF98';
                    break;
                }
            }
        }
    }

  for (let i = 0; i < headerElements.length; i++) {
        const element = headerElements[i];
        if (element.innerHTML.includes('Floor#: 1')) {
            for (let j = 0; j < element.classList.length; j++) {
                if (/kanban-header-\w+/.test(element.classList[j])) {
                    element.classList.remove(element.classList[j]);
                    element.style.backgroundColor = '#FF7F50';
                    break;
                }
            }
        }
    }
};

Hope this helps!

@gtothill, what is the difference between your objective and the available demo where there is a country boundary (Pakistan) and a building boundary available (it is Neuenheim district, in Heidelberg, Germany), please?

BTW, pop-up messages are not working for me here for areas! We are running a XWiki Debian 16.1.0 on Ubuntu 22.04.4 LTS. I tried several web browsers (Opera, Firefox, Chrome, Edge, several platforms). Are they working there? Thanks!

@gtothill, it shouldn’t be harder to create OSM URLs by reading coordinates from XWiki. For instance, Agnes Mountain. What is not so clear to me is to keep the user within XWiki.