Hi All, I'm having a strange issue. I have managed to create a new object for my map that pulls the time from moment.js and displays it. The reason I want to use this, is that I need to see several time zones and the only templates I have seen show server time and nothing else.

Here is the code (I then have other copies with a different time zone):

<!--Added Objects: GMT-->

<div class="map_object map_table" id="<@itemid>" objectid="<@objectid>" subid="<@subid>" style="overflow:hidden;font-size:80px;<#mapobject type="coordinates" subid="<@subid>" mode="<@editmode>">;

    ">
        <#mapobject type="objectgrip" mode="<@editmode>">
        <#mapobject type="htmlbefore" subid="<@subid>">
    
    <div id="MyClockDisplay4" class="clock"></div>
            
    <style>
         <div class="top10listcontainer" style="overflow:hidden">
        .clock {
            color: #000000;
            font-family: Orbitron;
            letter-spacing: 7px;
            width: 200px
            }
    </style>
    
    <div id="MyClockDisplay4"></div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/en-gb.js"></script>

    <script src="https://momentjs.com/downloads/moment-timezone-with-data-10-year-range.js"></script>
    
    
    <script>
        const MyClockDisplay4 = document.getElementById('MyClockDisplay4');

function updateTime(){
    const now = moment().tz('Europe/London');
     const humanReadable = now.format('HH:mm');

        MyClockDisplay4.textContent = humanReadable;
}

        setInterval(updateTime, 30000);
        updateTime();

        </script>

        <#mapobject type="htmlafter" subid="<@subid>">
    </div>

Now, I am completely new to JS so this may not be correct... This is from chopping up code I found online and using the docs.

Now the issue i'm having is that it shows on the "map designer" view as expected, but when I look at the map the url, it is blank:

Map Designer View:

Map Designer View

View Map View:

View Map View

Accessing via URL - Deliberately blank as this doesn't show:

URL

I just can't figure out why it would show in the design views, but not via the URL.

I would be eternally greatful if someone could help me out

P.S. The reason for "MyClockDisplay4" in the code is because I am using multiple versions of this with different time zones, so this is how I am seperating them (so they don't conflict when on the same page).

Thanks

Ashley


Article Comments

Got it working for anyone with the same issue:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/en-gb.js"></script>

Had to be replaced with:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

This will give you a digital clock without seconds, but it's easy to add if you want it.

-Ashley


Oct, 2019 - Permalink