Cloud-CMS/modules/googletraffic.xml

<!--
  ~ Copyright (C) 2023 Xibo Signage Ltd
  ~
  ~ Xibo - Digital Signage - https://xibosignage.com
  ~
  ~ This file is part of Xibo.
  ~
  ~ Xibo is free software: you can redistribute it and/or modify
  ~ it under the terms of the GNU Affero General Public License as published by
  ~ the Free Software Foundation, either version 3 of the License, or
  ~ any later version.
  ~
  ~ Xibo is distributed in the hope that it will be useful,
  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  ~ GNU Affero General Public License for more details.
  ~
  ~ You should have received a copy of the GNU Affero General Public License
  ~ along with Xibo.  If not, see <http://www.gnu.org/licenses/>.
  -->
<module>
    <id>core-googletraffic</id>
    <name>Google Traffic</name>
    <author>Core</author>
    <description>A module for displaying traffic information using Google Maps</description>
    <icon>fa fa-car</icon>
    <class></class>
    <type>googletraffic</type>
    <dataType></dataType>
    <schemaVersion>1</schemaVersion>
    <assignable>1</assignable>
    <regionSpecific>1</regionSpecific>
    <renderAs>html</renderAs>
    <defaultDuration>600</defaultDuration>
    <startWidth>600</startWidth>
    <startHeight>400</startHeight>
    <settings>
        <property id="apiKey" type="text">
            <title>API Key</title>
            <helpText>Enter your API Key from Google Maps.</helpText>
            <default></default>
        </property>
        <property id="minDuration" type="number">
            <title>Minimum recommended duration</title>
            <helpText>Please enter a minimum recommended duration in seconds for this Module.</helpText>
            <default>600</default>
        </property>
        <property type="message" variant="danger">
            <title>This module uses the Google Traffic JavaScript API which is a paid-for API from Google. Charges will apply each time the map is loaded in the CMS preview and on each Player, therefore we recommend setting a high widget duration.</title>
            <default></default>
        </property>
    </settings>
    <properties>
        <property id="useDisplayLocation" type="checkbox">
            <title>Use the Display Location</title>
            <helpText>Use the location configured on the display</helpText>
            <default></default>
        </property>
        <property id="latitude" type="number">
            <title>Latitude</title>
            <helpText>The Latitude for this widget</helpText>
            <default>#DEFAULT_LAT#</default>
            <visibility>
                <test>
                    <condition field="useDisplayLocation" type="eq">0</condition>
                </test>
            </visibility>
        </property>
        <property id="longitude" type="number">
            <title>Longitude</title>
            <helpText>The Longitude for this widget</helpText>
            <default>#DEFAULT_LONG#</default>
            <visibility>
                <test>
                    <condition field="useDisplayLocation" type="eq">0</condition>
                </test>
            </visibility>
        </property>
        <property id="zoom" type="number">
            <title>Zoom</title>
            <helpText>How far should the map be zoomed in? The higher the number the closer, 1 represents the entire globe.</helpText>
            <default>15</default>
        </property>
        <property type="message">
            <title>This module is rendered on the Player which means the Player must have an internet connection.</title>
        </property>
        <property type="message">
            <title>The Traffic Widget has not been configured yet, please ask your CMS Administrator to look at it for you.</title>
            <visibility>
                <test>
                    <condition type="ne">%apiKey%</condition>
                </test>
            </visibility>
        </property>
        <property type="message" variant="danger">
            <title>You have entered a duration lower than the recommended minimum, this could cause significant API charges.</title>
            <visibility>
                <test>
                    <condition field="duration" type="lt">%minDuration%</condition>
                </test>
            </visibility>
        </property>
    </properties>
    <preview></preview>
    <stencil>
        <hbs><![CDATA[

        ]]></hbs>
        <twig><![CDATA[
<script async defer src="https://maps.googleapis.com/maps/api/js?key={{ settings.apiKey }}&callback=init"></script>

<script type="text/javascript">
    function init() {
        var lat = {{ latitude }};
        var lng = {{ longitude }};
        // Not preview and useDisplayLocation
        if ({{useDisplayLocation}} === 1 && !xiboIC.checkIsPreview()) {
            // Get the lat/lng from player info.
            xiboIC.info({
                done: function(xhr) {
                    info = JSON.parse(xhr.responseText);
                    if (info && info.latitude) {
                        lat = info.latitude;
                    }
                    if (info && info.longitude) {
                        lng = info.longitude;
                    }
                    initMap(lat, lng);
                },
                error: function() {
                    initMap(lat, lng);
                }
            });
        } else {
            initMap(lat, lng);
        }
    }

    function initMap(lat, lng) {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: {{ zoom }},
            center: {lat: lat, lng: lng},
            disableDefaultUI: true
        });

        var trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(map);
    }
</script>

 <div id="map"></div>
        ]]></twig>
        <style><![CDATA[
body {
    margin: 0;
    overflow: hidden;
}
h1, h2, h3, h4, p {
    margin-top: 0;
}
#iframe {
    border: 0;
}
#map {
    height: 100%;
}
        ]]></style>
    </stencil>
    <onRender><![CDATA[
$(target).find('#map').height($(window).height());
    ]]></onRender>
</module>