index.html 7.09 KB
Newer Older
1
<!DOCTYPE html>
Jesper Baasch-Larsen's avatar
Jesper Baasch-Larsen committed
2 3
<html>
<head>
4 5
    <title>fcoo.dk</title>
    <meta charset="utf-8" />
Jesper Baasch-Larsen's avatar
Jesper Baasch-Larsen committed
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 8
    <meta name="application-name" content="fcoo.dk">
    <meta name="apple-mobile-web-app-title" content="fcoo.dk">
9 10 11 12
    <meta name="msapplication-TileImage" content="/apple-touch-icon.png">
    <meta name="msapplication-TileColor" content="#1C4B88">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <link rel="shortcut icon" href="/apple-touch-icon.png">
13

Niels Holt's avatar
Niels Holt committed
14
    <link rel="stylesheet" type="text/css" href="index.css" />
15
        <link rel="stylesheet" type="text/css" href="leaflet.css" />
Jesper Baasch-Larsen's avatar
Jesper Baasch-Larsen committed
16 17
</head>
<body>
18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142
    <div class="container">
        <a class="show-for-lang-da" href="//fcoo.dk/" border="0"><img class="logo" width="270" height="90" src="../images/FCOO_logo_270x90.png" alt="Forsvarets Center for Operativ Oceanografi"></a>
        <a class="show-for-lang-en" href="//fcoo.dk/?lang=eng" border="0"><img class="logo" width="270" height="90" src="../images/FCOO_logo_270x90.png" alt="Defence Centre for Operational Oceanography"></a>

        <h1 class="show-for-lang-da">Sejladsudsigt</h1>
        <h1 class="show-for-lang-en">Marine Forecast</h1>

        <select id="select-area" onchange="onChange(this)"></select>    

        <div id="map"></div>        
    </div>

    <script src="leaflet.js"></script>
    <script type="text/javascript">
        var search = window.location.search,
            isEn = search.toUpperCase().indexOf('LANG=EN') > -1,
            baseHRef = window.location.href;
        
        baseHRef = baseHRef.replace( window.location.hash, '');
        baseHRef = baseHRef.replace( window.location.search, '');
        baseHRef = baseHRef.replace( 'index.html', '');
        baseHRef = baseHRef.replace( '/select', '');
        baseHRef = baseHRef + 'index.html' + (isEn ? '?lang=en' : '') + '#domain=';


        function getHref( domain ){ 
            return baseHRef + domain;
        }
        
        //Set lang-class and title
        document.body.className = isEn ? 'lang-en' : 'lang-da';
        document.title = 'fcoo.dk - ' + (isEn ? 'Marine Forecast' : 'Sejladsudsigt');

        //List of areas
        var areas = [
            {    da: 'Global',      en:'Global',        href: getHref('global'),        bounds: [[90.0, -180.0]     , [-90.0, 180.0]]       },
            {    da: 'Europa',      en:'Europe',        href: getHref('europe'),        bounds: [[85.9585, -85.9219], [28.0437, 41.9063]]   },
            {    da: 'Danmark',     en:'Denmark',       href: getHref('denmark'),       bounds: [[61.0157,  -3.3618], [ 52.8558,  24.5214]] },
            {    da: 'Grønland',    en:'Greenland',     href: getHref('greenland'),     bounds: [[76.7605, -61.2158], [ 58.6198, -16.2158]] },
            {    da: 'Færøerne',    en:'Faroe Islands', href: getHref('faroe_islands'), bounds: [[63.8019, -13.9745], [ 59.7563,  -1.2744]] },
            {    da: 'Middelhavet', en:'Mediterranean', href: getHref('mediterranean'), bounds: [[46.3469, -11.8652], [ 28.0437,  39.0674]] },
//            {    da: 'Indiske Ocean',    en:'Indian Ocean',    href: getHref('indian_ocean'),    bounds: [[29.8406,    31.6406], [-19.8907,  69.9609]]    },
        ];

        //Set da- or en-name
        for (i=0; i<areas.length; i++ )
            areas[i].name = isEn ? areas[i].en : areas[i].da;
        
        //Add options to <select>
        var select = document.getElementById('select-area'),
            addOption = function(select, text, value, selected){ 
                var option = document.createElement('option');
                if (value !== null)
                    option.value = value;                  
                option.innerHTML = text;
                if (selected)
                    option.setAttribute("selected", "selected");
                select.appendChild(option);
            };

        function onChange( select ) {
            var option = select.options[select.selectedIndex];
            if (option.value)
                selectAreaByIndex( option.value );  
        };
        
        //Add default option
        addOption(select, isEn ? '** Select Area **' : '** Vælg Område **', null, true);

        for (i=0; i<areas.length; i++ )
            addOption(select, areas[i].name, i);
        
        
        //Create Leaflet map
        var minZoom = 1, 
            defaultZoom = 2,
            maxZoom     = 4,
            style       = {color: 'cornflowerblue', weight: 1,   opacity: 0.5, fillOpacity:0.4},
            hoverStyle  = {color: 'blue',           weight: 1.5, opacity: 0.9, fillOpacity:0.3},
            clickStyle  = {color: 'red',            weight: 1.5, opacity: 0.9, fillOpacity:0.4},

            map = L.map('map').setView([45.3367, -1.7578], defaultZoom);

//For debug        map.on('click', function(e){ console.log('mouse:',e.latlng, 'map-center', map.getCenter(), 'map-zoom', map.getZoom()); });

        L.tileLayer(
            'https://tiles{s}.fcoo.dk/tiles/tiles_bckgrnd_512_mercator_201508030000/{z}/{x}/{y}.png', 
            {minZoom: minZoom, maxZoom: maxZoom, subdomains:['01','02','03'], tileSize:512,  continuousWorld: false    
        }).addTo(map);

        for (i=0; i<areas.length; i++ ){
            var area = areas[i],
                rect = L.rectangle(area.bounds, style).addTo(map);        
            rect.options._area_index = i;
            
            area.rect = rect;

            rect.on('click',     function( event ){ selectAreaByIndex( event.target.options._area_index );    });
            rect.on('mousedown', function( event ){ event.target.setStyle( clickStyle    );                                    });

            rect.on('mouseover', function( event ){ 
                var rect = event.target;
                rect.setStyle( hoverStyle    );    
                select.selectedIndex = rect.options._area_index + 1;
            });

            rect.on('mouseout', function( event ){ 
                event.target.setStyle( style            );    
                select.selectedIndex = 0;
            });

            rect._container.setAttribute('title', area.name);
        }
        
        //Select the area    
        function selectAreaByIndex( index ) { 
            var area = areas[index];
            area.rect.setStyle( clickStyle ); 
            window.location.href = area.href;// + (isEn ? '?lang=en' : '');
        }

    </script>        
        
        
        <!-- Piwik -->
143 144
    <script type="text/javascript">
      var _paq = _paq || [];
Jesper Baasch-Larsen's avatar
Jesper Baasch-Larsen committed
145
      _paq.push(['disableCookies']);
146 147 148 149 150 151 152 153 154 155 156 157
      _paq.push(['trackPageView']);
      _paq.push(['enableLinkTracking']);
      (function() {
        var u="//analytics.fcoo.dk/piwik/";
        _paq.push(['setTrackerUrl', u+'piwik.php']);
        _paq.push(['setSiteId', 1]);
        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
        g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
      })();
    </script>
    <noscript><p><img src="//analytics.fcoo.dk/piwik/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
    <!-- End Piwik Code -->
Jesper Baasch-Larsen's avatar
Jesper Baasch-Larsen committed
158 159
</body>
</html>