Commit d0a28592 authored by Niels Holt's avatar Niels Holt

Merge branch 'release/3.5.1'

parents c6d1f18b 4131bf8a
<!DOCTYPE html>
<html>
<head>
<title>fcoo.dk</title>
<meta charset="utf-8" />
<title>fcoo.dk</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="application-name" content="fcoo.dk">
<meta name="apple-mobile-web-app-title" content="fcoo.dk">
......@@ -12,131 +12,134 @@
<link rel="shortcut icon" href="/apple-touch-icon.png">
<link rel="stylesheet" type="text/css" href="index.css" />
<link rel="stylesheet" type="text/css" href="leaflet.css" />
<link rel="stylesheet" type="text/css" href="leaflet.css" />
</head>
<body>
<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 hash = window.location.hash.slice(1),
search = window.location.search,
searchUC = search.toUpperCase(),
href = window.location.href,
hrefArray = href.split('/'),
isEn = search.toUpperCase().indexOf('LANG=EN') > -1;
hrefArray.pop();
hrefArray.pop();
hrefArray.push('index.html');
function getHref( domain ){ return hrefArray.join('/') + search + '#domain=' + domain + (hash ? '&' + hash : ''); }
//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);
// L.tileLayer('https://tiles{s}.fcoo.dk/tiles/tiles_top_512_mercator_201508030000/{z}/{x}/{y}.png', {maxZoom: 18, 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 -->
<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 -->
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['disableCookies']);
......
{
"name": "ifm-maps",
"version": "3.5.0",
"version": "3.5.1",
"homepage": "https://github.com/FCOO/ifm-maps",
"authors": [
"Jesper Baasch-Larsen jla@fcoo.dk",
......
{
"name": "ifm-maps",
"version": "3.5.0",
"version": "3.5.1",
"homepage": "https://github.com/FCOO/ifm-maps",
"authors": [
"Jesper Baasch-Larsen jla@fcoo.dk",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment