Skip to content

Instantly share code, notes, and snippets.

@jdennes

jdennes/buienalarm-scraper-details.md

Last active February 17, 2022 19:20
Show Gist options
  • Save jdennes/61322ea392df9120396eb6651f64e566 to your computer and use it in GitHub Desktop.
Save jdennes/61322ea392df9120396eb6651f64e566 to your computer and use it in GitHub Desktop.
Download ZIP
Documents how to scrape Buienalarm.nl (until their website changes)
Raw
buienalarm-scraper-details.md

Buienalarm.nl scraper details

A request to http://www.buienalarm.nl/location/rotterdam produces a chart that shows the projected rainfall for the next two hours in Rotterdam:

buienalarm

That page includes the following JavaScript that represents the data used to build the chart:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery(document).ready(function () {
    var locationdata = [];
    locationdata['coordinate'] = [];
    locationdata['coordinate']['x'] = 321;
    locationdata['coordinate']['y'] = 452;
    locationdata['forecast'] = {"start":1461492900,"temp":8,"precip":[80,90,76,0,0,0,0,88,79,93,107,92,48,0,0,0,0,0,0,0,0,0,0,0,41],"levels":{"light":0.25,"moderate":1,"heavy":2.5}};
    locationdata['original'] = [];
    locationdata['original']['x'] = 51.9244;
    locationdata['original']['y'] = 4.47773;
    locationdata['locality'] = 'Rotterdam';
    buildChart(locationdata);
  });
//--><!]]>
</script>

The full HTML document is included as html-rotterdam-next-two-hours.html in this gist.

One of the many unminified and unobfuscated scripts also loaded by that page is:

http://www.buienalarm.nl/sites/all/themes/buien/html/js/buienalarm-2h.js?o602tb

The full script is included as javascript-buienalarm-2h.js in this gist.

That includes the code to process the raw data above and build the chart:

if (app.data) {
    app.data.start = app.data.start * 1000;
    app.data.start = app.data.start - (new Date()).getTimezoneOffset() * 60 * 1000;

    app.data.precip = app.data.precip.map(function (value) {
        return Math.pow(10, (value - 109) / 32);
    });
    var max = Math.max(3.5, Math.max.apply(null, app.data.precip));
}

This detail can be used to scrape the data and build your own Buienalarm.

Raw
html-rotterdam-next-two-hours.html
<!DOCTYPE html>
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<title>Rotterdam neerslag komende 2 uur | buienalarm</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="True" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="http://www.buienalarm.nl/sites/all/themes/buien/favicon.ico" type="image/vnd.microsoft.icon" />
<meta name="og:url" content="http://www.buienalarm.nl/location/rotterdam" />
<meta http-equiv="refresh" content="300" />
<meta name="og:title" content="Rotterdam neerslag komende 2 uur" />
<meta name="og:site_name" content="buienalarm" />
<meta name="og:description" content="Rotterdam neerslag komende 2 uur" />
<meta name="description" content="Rotterdam neerslag komende 2 uur" />
<meta name="generator" content="Drupal 7 (http://drupal.org)" />
<link rel="canonical" href="http://www.buienalarm.nl/location/rotterdam" />
<link rel="shortlink" href="http://www.buienalarm.nl/location/rotterdam" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:url" content="http://www.buienalarm.nl/location/rotterdam" />
<meta name="twitter:title" content="Rotterdam neerslag komende 2 uur" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Montserrat:400,700" />
<style type="text/css" media="all">
@import url("http://www.buienalarm.nl/sites/all/modules/contrib/date/date_api/date.css?o602tb");
@import url("http://www.buienalarm.nl/sites/all/modules/contrib/date/date_popup/themes/datepicker.1.7.css?o602tb");
@import url("http://www.buienalarm.nl/modules/field/theme/field.css?o602tb");
@import url("http://www.buienalarm.nl/modules/node/node.css?o602tb");
@import url("http://www.buienalarm.nl/modules/user/user.css?o602tb");
@import url("http://www.buienalarm.nl/sites/all/modules/contrib/ckeditor/css/ckeditor.css?o602tb");
</style>
<style type="text/css" media="all">
@import url("http://www.buienalarm.nl/sites/all/modules/contrib/ctools/css/ctools.css?o602tb");
@import url("http://www.buienalarm.nl/sites/all/modules/custom/addthis/addthis.css?o602tb");
</style>
<style type="text/css" media="all">
@import url("http://www.buienalarm.nl/sites/all/themes/buien/html/css/bootstrap.min.css?o602tb");
@import url("http://www.buienalarm.nl/sites/all/themes/buien/html/css/buienalarm.css?o602tb");
@import url("http://www.buienalarm.nl/sites/all/themes/buien/html/weather-icons.custom.css?o602tb");
@import url("http://www.buienalarm.nl/sites/all/themes/buien/html/fonts/font-awesome/css/font-awesome.min.css?o602tb");
@import url("http://www.buienalarm.nl/sites/all/themes/buien/html/css/font-awesome-animation.min.css?o602tb");
</style>
<script src="/sites/all/themes/buien/html/js/lib/modernizr.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://www.buienalarm.nl/misc/jquery.once.js?v=1.2"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
googletag.slots = googletag.slots || {};
//--><!]]>
</script>
<script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"></script>
<script type="text/javascript" src="http://www.buienalarm.nl/misc/drupal.js?o602tb"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
googletag.slots["1440162858885_1"] = googletag.defineSlot("/1014430/ba_frontpage_728_90", [728, 90], "div-gpt-ad-1440162858885_1")
.addService(googletag.pubads())
.setTargeting("pagina-url", "http://www.buienalarm.nl/location/rotterdam")
.setTargeting("pagina-titel", "Rotterdam neerslag komende 2 uur");
//--><!]]>
</script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
googletag.slots["1443602328633_6"] = googletag.defineSlot("/1014430/ba_advertentieblok_728_90_header_location", [728, 90], "div-gpt-ad-1443602328633_6")
.addService(googletag.pubads());
//--><!]]>
</script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
googletag.slots["1440162858885_0"] = googletag.defineSlot("/1014430/ba_250_250", [250, 250], "div-gpt-ad-1440162858885_0")
.addService(googletag.pubads())
.setTargeting("pagina-url", "http://www.buienalarm.nl/location/rotterdam")
.setTargeting("pagina-titel", "Rotterdam neerslag komende 2 uur");
//--><!]]>
</script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
googletag.slots["1440162858885_1"] = googletag.defineSlot("/1014430//1014430/ba_frontpage_728_90", [[[728], [90]]], "div-gpt-ad-1440162858885_1")
.addService(googletag.pubads())
.setTargeting("pagina-url", "http://www.buienalarm.nl/location/rotterdam")
.setTargeting("pagina-titel", "Rotterdam neerslag komende 2 uur");
//--><!]]>
</script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
googletag.slots["1440162858885_1"] = googletag.defineSlot("/1014430//1014430//1014430/ba_frontpage_728_90", [[[[[728]], [[90]]]]], "div-gpt-ad-1440162858885_1")
.addService(googletag.pubads())
.setTargeting("pagina-url", "http://www.buienalarm.nl/location/rotterdam")
.setTargeting("pagina-titel", "Rotterdam neerslag komende 2 uur");
//--><!]]>
</script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
googletag.slots["1440162858885_1"] = googletag.defineSlot("/1014430//1014430//1014430//1014430/ba_frontpage_728_90", [[[[[[[728]]], [[[90]]]]]]], "div-gpt-ad-1440162858885_1")
.addService(googletag.pubads())
.setTargeting("pagina-url", "http://www.buienalarm.nl/location/rotterdam")
.setTargeting("pagina-titel", "Rotterdam neerslag komende 2 uur");
//--><!]]>
</script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
googletag.cmd.push(function() {
googletag.pubads().enableAsyncRendering();
googletag.pubads().enableSingleRequest();
googletag.pubads().collapseEmptyDivs();
googletag.pubads().setTargeting("pagina", "http://www.buienalarm.nl/location/rotterdam");
});
googletag.enableServices();
//--><!]]>
</script>
<script type="text/javascript" src="http://www.buienalarm.nl/sites/default/files/languages/nl_QS54HoY1pu5dKWbI4qA-GHplwQJr7uwEfzPlmm-6fIg.js?o602tb"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCZOAF002rZ-qXeqGUQczW2irxoQ5Pbpb8&amp;v=3.exp&amp;sensor=true&amp;libraries=places&amp;language=nl"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
addthis_pub = 'my-username';
addthis_logo = 'http://www.addthis.com/images/yourlogo.png';
addthis_logo_background = 'EFEFFF';
addthis_logo_color = '666699';
addthis_brand = 'Your Site';
addthis_options = 'favorites, email, digg, delicious, myspace, facebook, google, live, more';
addthis_disable_flash = 'false';
//--><!]]>
</script>
<script type="text/javascript" src="http://www.buienalarm.nl/sites/all/themes/buien/html/js/buienalarm-2h.js?o602tb"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery(document).ready(function () {
var locationdata = [];
locationdata['coordinate'] = [];
locationdata['coordinate']['x'] = 321;
locationdata['coordinate']['y'] = 452;
locationdata['forecast'] = {"start":1461492900,"temp":8,"precip":[80,90,76,0,0,0,0,88,79,93,107,92,48,0,0,0,0,0,0,0,0,0,0,0,41],"levels":{"light":0.25,"moderate":1,"heavy":2.5}};
locationdata['original'] = [];
locationdata['original']['x'] = 51.9244;
locationdata['original']['y'] = 4.47773;
locationdata['locality'] = 'Rotterdam';
buildChart(locationdata);
});
//--><!]]>
</script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
var precip_daily = {"start":1461488400,"delta":3600,"raw":[0,0.01,0,0,0.03,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.3,1.02,3.49,0.32]};
//--><!]]>
</script>
<script type="text/javascript" src="http://www.buienalarm.nl/sites/all/themes/buien/html/js/lib/highcharts.js?o602tb"></script>
<script type="text/javascript" src="http://www.buienalarm.nl/sites/all/themes/buien/html/js/default.js?o602tb"></script>
<script type="text/javascript" src="http://www.buienalarm.nl/sites/all/themes/buien/html/js/lib/skycons.js?o602tb"></script>
<script type="text/javascript" src="http://www.buienalarm.nl/sites/all/themes/buien/html/js/lib/modal.js?o602tb"></script>
<script type="text/javascript" src="http://www.buienalarm.nl/sites/all/themes/buien/html/js/lib/highlight/highlight.pack.js?o602tb"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"buien","theme_token":"PpKXiHg7IIybbXugixM7cV9yGMj9HhytZF2DKFDnAwA","js":{"http:\/\/code.jquery.com\/jquery-2.1.4.min.js":1,"misc\/jquery.once.js":1,"0":1,"http:\/\/www.googletagservices.com\/tag\/js\/gpt.js":1,"misc\/drupal.js":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"public:\/\/languages\/nl_QS54HoY1pu5dKWbI4qA-GHplwQJr7uwEfzPlmm-6fIg.js":1,"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/moment.js\/2.10.2\/moment.min.js":1,"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyCZOAF002rZ-qXeqGUQczW2irxoQ5Pbpb8\u0026v=3.exp\u0026sensor=true\u0026libraries=places\u0026language=nl":1,"8":1,"sites\/all\/themes\/buien\/html\/js\/buienalarm-2h.js":1,"9":1,"10":1,"sites\/all\/themes\/buien\/html\/js\/lib\/highcharts.js":1,"sites\/all\/themes\/buien\/html\/js\/default.js":1,"sites\/all\/themes\/buien\/html\/js\/lib\/skycons.js":1,"sites\/all\/themes\/buien\/html\/js\/lib\/modal.js":1,"sites\/all\/themes\/buien\/html\/js\/lib\/highlight\/highlight.pack.js":1},"css":{"sites\/all\/modules\/contrib\/date\/date_api\/date.css":1,"sites\/all\/modules\/contrib\/date\/date_popup\/themes\/datepicker.1.7.css":1,"modules\/field\/theme\/field.css":1,"modules\/node\/node.css":1,"modules\/user\/user.css":1,"sites\/all\/modules\/contrib\/ckeditor\/css\/ckeditor.css":1,"sites\/all\/modules\/contrib\/ctools\/css\/ctools.css":1,"sites\/all\/modules\/custom\/addthis\/addthis.css":1,"sites\/all\/themes\/buien\/html\/css\/bootstrap.min.css":1,"sites\/all\/themes\/buien\/html\/css\/buienalarm.css":1,"sites\/all\/themes\/buien\/html\/weather-icons.custom.css":1,"sites\/all\/themes\/buien\/html\/fonts\/font-awesome\/css\/font-awesome.min.css":1,"sites\/all\/themes\/buien\/html\/css\/font-awesome-animation.min.css":1,"sites\/all\/themes\/buien\/html\/js\/lib\/highlight\/styles\/default.css":1}},"buienalarm":{"country":"nl","coords":[52.2129919,5.2793703],"be_version_link":"http:\/\/www.buienalarm.be","nl_version_link":"http:\/\/www.buienalarm.nl","google_dfp_long_banner":"1440162858885_1","google_dfp_long_banner_top":"1443602328633_6","url":"http:\/\/api.buienalarm.nl\/app\/forecast.php","google_dfp_square_banner":"1440162858885_0"},"better_exposed_filters":{"views":{"weather_facts":{"displays":{"block":{"filters":[]},"block_1":{"filters":[]}}}}}});
//--><!]]>
</script>
</head>
<body class="html not-front not-logged-in one-sidebar sidebar-first page-location page-location-rotterdam noJS" >
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-WC7TMH"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WC7TMH');</script>
<!-- End Google Tag Manager -->
<!--[if lt IE 8]><div class="chromeframe"><div class="wrapper">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</div></div><![endif]-->
<!-- Begin .header -->
<header class="header" role="banner" class="clearfix">
<div class="container">
<div class="row">
<div class="logo col-sm-3 col-md-4">
<a rel="home" href="/">
<img class="logo-img" src="http://www.buienalarm.nl/sites/default/files/styles/default/public/media/submissions/buienalarm_logo_2015.png?itok=3U7nFPqb" alt="" /> </a>
</div>
<nav class="nav nav--primary col-sm-8 col-md-7 hidden-xs"><ul class="nav-list list-inline pull-right"><li class="first leaf"><a href="/content/buienalarm-app-downloaden">Download app</a></li>
<li class="leaf"><a href="/content/over-buienalarm-0">Over Buienalarm</a></li>
<li class="leaf"><a href="/weerweetjes" title="WeerWeetjes">WeerWeetjes</a></li>
<li class="last leaf"><a href="/content/faq-buienalarm">FAQ</a></li>
</ul></nav> <div class="col-sm-1 version-switcher-wrapper">
<ul class="version-switcher">
<li class="active">
<a href="#" data-redirect-to="http://www.buienalarm.nl"><img src="/sites/all/themes/buien/html/images/nl.png"><span>NL</span></a>
</li>
<li class="">
<a href="#" data-redirect-to="http://www.buienalarm.be"><img src="/sites/all/themes/buien/html/images/be.png"><span>BE</span></a>
</li>
</ul>
</div>
</div>
</div>
</header>
<!-- End .header -->
<!-- Begin .header -->
<section class="visual" style="background-image: url( http://www.buienalarm.nl/sites/default/files/styles/1440x548/public/media/submissions/approved/vj3.PNG?itok=UioT_cWP)"></section>
<section class="container forecast forecast--2hr">
<div class="forecast-header row">
<div class="forecast-header-title col-lg-5 col-sm-8">
<h1>Rotterdam</h1>
<div class="forecast-header-link faa-parent animated-hover">
<a href="#">Wijzig locatie</a> <i class="fa fa-map-marker faa-bounce"></i>
<div class="change-location-block">
<ul class="recent-location">
</ul>
<p>of selecteer een nieuwe locatie</p>
<form class="input-group input-group--search search-location-header" action="#" method="post">
<input id="search-field" type="text" name="location" class="form-control" autocomplete="false" placeholder="Zoek op weersverwachting locatie" />
<input type="hidden" name="lat" value="" />
<input type="hidden" name="lon" value="" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Zoek</button>
</span>
</form>
</div>
</div>
</div>
<div class="forecast-header-share col-lg-1 col-sm-4 pull-right">
<a href="http://www.addthis.com/bookmark.php"
onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')"
onmouseout="addthis_close()"
onclick="return addthis_sendto()">Deel</a>
<script type="text/javascript" src="http://s9.addthis.com/button1-share.gif/js/152/addthis_widget.js"></script>
<i class="fa fa-share-alt"></i></div>
<div class="forecast-chart-cta col-lg-6 col-sm-12">
<a href="/location/rotterdam" class="btn btn-default btn-transparent active">2 uur <br> voorspelling</a> <a href="/location/rotterdam/today" class="btn btn-default btn-transparent">24 uur <br> voorspelling</a> <a href="/location/rotterdam/week" class="btn btn-default btn-transparent">7 dagen <br> voorspelling</a> <a href="/location/rotterdam/radar" class="btn btn-default btn-transparent forecast-chart-cta-link">
<span class="btn-inner">
<span class="fa-stack">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-rss fa-stack-1x"></i>
</span>
Radar
</span>
</a>
</div>
</div>
<div class="forecast-body">
<div class="row">
<div class="forecast-chart col-xs-12" id="chart">
<div class="forecast-chart-forecast">
Komende 2 uur: Neerslag van nu tot 14:15 </div>
<div class="forecast-chart-weather">
<span class="graph-mm"></span>
<a class="forecast-chart-cta-link btn btn-action" href=#>
<span class="fa-stack">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-rss fa-stack-1x"></i>
</span>
Radar
</a>
</div>
<div id="chart-container"></div>
</div>
<div class="forecast-radar col-xs-4" id="radar">
<div id="map-canvas"></div>
<a href="/location/rotterdam/radar" class="map-enlargener"><i class="fa fa-arrows-alt"></i></a>
<!--<div class="forecast-radar-resizer">
<a href="/#/radar" class="forecast-radar-resizer-link">Show big map</a>
</div>-->
</div>
</div>
</div>
</section>
<div class="banners-advrt">
<div class="row">
<div class="col-lg-8 col-lg-push-2 text-center">
<div class="advrt">
<div id="div-gpt-ad-1443602328633_6-wrapper" class="dfp-tag-wrapper">
<div id="div-gpt-ad-1443602328633_6"></div>
<script type="text/javascript">
googletag.cmd.push(function() {
googletag.display("div-gpt-ad-1443602328633_6");
});
</script>
</div> </div>
</div>
</div>
</div>
<section class="container location location--today location--2h ">
<div class="changing-content-wrapper active ">
<div class="hgroup">
<h2 class="hgroup-title">Weersverwachting <span>Rotterdam</span></h2>
<h4 class="hgroup-subtitle">
zondag, 24 april </h4>
</div>
<div class="row">
<div class="block location-weather col-sm-4">
<div class="location-weather-map col-xs-12 col-sm-12 xcol-md-8 col-lg-8 pull-right hidden-xs">
<div class="map">
<img class="map-image" width="170px" src="/sites/all/themes/buien/html/images/netherlands.svg" />
</div>
</div>
<div class="weather col-xs-6 xcol-md-4 col-lg-4">
<canvas class="skycons hidden-print" data-weather="RAIN" width="80" height="80"></canvas>
<!-- This is a replacement for print layout (animation is shown on screens only) -->
<i class="wi rain fa-3x visible-print-inline-block"></i>
<!-- A list of matches is to be created for animated icons and replacemnts from WeatherIcons:
CLEAR_DAY .wi-day-sunny -> .wi.clear-day
CLEAR_NIGHT .wi-night-clear -> .wi.clear-night
PARTLY_CLOUDY_DAY .wi-day-cloudy -> .wi.partly-cloudy-day
PARTLY_CLOUDY_NIGHT .wi-night-partly-cloudy -> .wi.partly-cloudy-night
CLOUDY .wi-cloudy -> .wi.cloudy
RAIN .wi-rain -> .wi.rain
SLEET .wi-rain-mix -> .wi.sleet
SNOW .wi-snow -> .wi.snow
WIND .wi-windy -> .wi.wind
FOG .wi-fog -> .wi.fog
See documentation:
http://darkskyapp.github.io/skycons/
http://erikflowers.github.io/weather-icons/
-->
<div class="status">Regen</div>
</div>
<div class="temperature col-xs-6 xcol-md-4 col-lg-4 faa-parent animated-hover">
<i class="wi wi-thermometer faa-ring fa-4x"></i>
<div class="status">min&nbsp;3&deg; / max&nbsp;8&deg;</div>
</div>
</div>
<div class="block location-info col-sm-8">
<h3 class="block-title">Weersverwachting</h3>
<div class="block-content rtf font-2">
In het begin is het halfbewolkt met een temperatuur rond de 8 graden en een matige wind uit het noordwesten. In de middag koelt het af tot 6 graden met kans op neerslag. In de avond blijft het bewolkt. In de loop van de nacht daalt het kwik tot 2 graden. </div>
</div>
</div>
</div>
<div class="block location-map-overlap-wrapper">
<div class="location-weather-map">
<div id="location-map-overlap"></div>
<a href="/location/Rotterdam/radar" class="map-enlargener"><i class="fa fa-arrows-alt"></i></a>
</div>
</div>
</section>
<section class="container weatherfacts">
<div class="hgroup">
<h2 class="hgroup-title">WeerWeetjes <span></span></h2>
<h4 class="hgroup-subtitle">Wist je dat?</h4>
</div>
<div class="row">
<div>
<div class="block col-sm-4">
<div class="block-thumbnail">
<a href="/weerweetjes/hooikoorts"><img src="http://www.buienalarm.nl/sites/default/files/styles/370x220/public/media/hooikoorts1.PNG?itok=QsSV7CZX" width="370" height="220" /><h4 class="block-title">Hooikoorts</h4></a> </div>
</div>
</div>
<div>
<div class="block col-sm-4">
<div class="block-thumbnail">
<a href="/weerweetjes/waarom-de-zomertijd"><img src="http://www.buienalarm.nl/sites/default/files/styles/370x220/public/media/zomert.PNG?itok=bBVYp7RZ" width="370" height="220" /><h4 class="block-title">Waarom de zomertijd?</h4></a> </div>
</div>
</div>
<div>
<div class="block col-sm-4">
<div class="block-thumbnail">
<a href="/weerweetjes/lente"><img src="http://www.buienalarm.nl/sites/default/files/styles/370x220/public/media/lente1.PNG?itok=49qEucI9" width="370" height="220" /><h4 class="block-title">Lente</h4></a> </div>
</div>
</div>
</div>
<div class="powered-block">
<a href="/weerweetjes" class="btn btn-default pull-right">Lees meer</a> </div>
</section>
<section class="container thingstodo">
<div class="hgroup">
<h2 class="hgroup-title">Leuke uitjes <span>in de buurt van Rotterdam</span></h2>
</div>
<div class="row">
<div class="block col-sm-4">
<a href="http://thingstodo.nl/activiteit/indoor-skydive-roosendaal/" target="_blank" class="block-wrapper">
<div class="block-thumbnail">
<img src="http://www.buienalarm.nl/sites/default/files/styles/370x220/public/externals/7114d76505fe72c298b089aa57d7fef0.jpg?itok=Fk5qlf_f" width="370" height="220" alt="Speciale actie: €10,- korting voor Indoor Skydive Roosendaal" /> </div>
<div class="block-content row">
<div class="block-title col-xs-12 col-sm-12 col-md-8 col-lg-10">
<h4>Indoor Skydive Roosendaal tot wel 17% korting</h4>
<h5>Roosendaal</h5>
<div class="block-distance"><i
class="fa fa-map-marker"></i>44 km
</div>
</div>
<div class="block-cta hidden-xs hidden-sm col-md-4 col-lg-2 text-right">
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-angle-right fa-stack-1x fa-inverse faa-horizontal animated-hover"></i>
</span>
</div>
</div>
</a>
</div>
<div class="block col-sm-4">
<a href="http://thingstodo.nl/activiteit/pret-inn/" target="_blank" class="block-wrapper">
<div class="block-thumbnail">
<img src="http://www.buienalarm.nl/sites/default/files/styles/370x220/public/externals/457faed0a5b17893963f0db3c2848358.jpg?itok=DEvPhbqX" width="370" height="220" alt="Kom de fantastische attracties in Pret inn eens bekijken!" /> </div>
<div class="block-content row">
<div class="block-title col-xs-12 col-sm-12 col-md-8 col-lg-10">
<h4>Pret inn</h4>
<h5>Heumen</h5>
<div class="block-distance"><i
class="fa fa-map-marker"></i>97 km
</div>
</div>
<div class="block-cta hidden-xs hidden-sm col-md-4 col-lg-2 text-right">
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-angle-right fa-stack-1x fa-inverse faa-horizontal animated-hover"></i>
</span>
</div>
</div>
</a>
</div>
<div class="block col-sm-4">
<a href="http://thingstodo.nl/activiteit/aqua-zoo-friesland/" target="_blank" class="block-wrapper">
<div class="block-thumbnail">
<img src="http://www.buienalarm.nl/sites/default/files/styles/370x220/public/externals/6671a44552ed24552d4e66e992c33bee.jpg?itok=IBZQXrTT" width="370" height="220" alt="Speciale actie: Aqua Zoo Friesland vanaf €6,-" /> </div>
<div class="block-content row">
<div class="block-title col-xs-12 col-sm-12 col-md-8 col-lg-10">
<h4>Aqua Zoo Friesland bieden vanaf €6,-</h4>
<h5>Makkum</h5>
<div class="block-distance"><i
class="fa fa-map-marker"></i>140 km
</div>
</div>
<div class="block-cta hidden-xs hidden-sm col-md-4 col-lg-2 text-right">
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-angle-right fa-stack-1x fa-inverse faa-horizontal animated-hover"></i>
</span>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="block col-sm-4">
<a href="http://thingstodo.nl/activiteit/spa-zuiver-amsterdam/" target="_blank" class="block-wrapper">
<div class="block-thumbnail">
<img src="http://www.buienalarm.nl/sites/default/files/styles/370x220/public/externals/26b5c61ff81261810a3eee0985bf6f75.jpg?itok=cJ7STTBb" width="370" height="220" alt="Speciale actie: €18,95 voor Spa Zuiver " /> </div>
<div class="block-content row">
<div class="block-title col-xs-12 col-sm-12 col-md-8 col-lg-10">
<h4>Spa Zuiver met 39% korting</h4>
<h5>Amsterdam</h5>
<div class="block-distance"><i
class="fa fa-map-marker"></i>53 km
</div>
</div>
<div class="block-cta hidden-xs hidden-sm col-md-4 col-lg-2 text-right">
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-angle-right fa-stack-1x fa-inverse faa-horizontal animated-hover"></i>
</span>
</div>
</div>
</a>
</div>
<div class="block col-sm-4">
<a href="http://thingstodo.nl/activiteit/zoo-parc-overloon/" target="_blank" class="block-wrapper">
<div class="block-thumbnail">
<img src="http://www.buienalarm.nl/sites/default/files/styles/370x220/public/externals/4ba2d575dbb096a50f8d6be90eab7bed.jpg?itok=bcM3XlIs" width="370" height="220" alt="Speciale actie: Zoo Parc Overloon vanaf €6,-" /> </div>
<div class="block-content row">
<div class="block-title col-xs-12 col-sm-12 col-md-8 col-lg-10">
<h4>Zoo Parc Overloon vanaf €6,-</h4>
<h5>Overloon</h5>
<div class="block-distance"><i
class="fa fa-map-marker"></i>108 km
</div>
</div>
<div class="block-cta hidden-xs hidden-sm col-md-4 col-lg-2 text-right">
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-angle-right fa-stack-1x fa-inverse faa-horizontal animated-hover"></i>
</span>
</div>
</div>
</a>
</div>
<div class="block col-sm-4">
<a href="http://thingstodo.nl/activiteit/paintball-kortingsactie-/" target="_blank" class="block-wrapper">
<div class="block-thumbnail">
<img src="http://www.buienalarm.nl/sites/default/files/styles/370x220/public/externals/ff09c19332ad0a5102369386aa1238ca.png?itok=4BqgUq56" width="370" height="220" alt="Speciale actie: Paintballen voor € 4,95" /> </div>
<div class="block-content row">
<div class="block-title col-xs-12 col-sm-12 col-md-8 col-lg-10">
<h4>Paintballen voor € 4,95</h4>
<h5>Rotterdam</h5>
<div class="block-distance"><i
class="fa fa-map-marker"></i>3 km
</div>
</div>
<div class="block-cta hidden-xs hidden-sm col-md-4 col-lg-2 text-right">
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-angle-right fa-stack-1x fa-inverse faa-horizontal animated-hover"></i>
</span>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="block col-sm-4">
<a href="http://thingstodo.nl/activiteit/tikibad/" target="_blank" class="block-wrapper">
<div class="block-thumbnail">
<img src="http://www.buienalarm.nl/sites/default/files/styles/370x220/public/externals/6c54f95df373ebb09eb6449525f0f74c.jpg?itok=9mf7VW69" width="370" height="220" alt="Speciale actie: €10,00 voor het Tikibad" /> </div>
<div class="block-content row">
<div class="block-title col-xs-12 col-sm-12 col-md-8 col-lg-10">
<h4>Tikibad met 38% korting</h4>
<h5>Wassenaar</h5>
<div class="block-distance"><i
class="fa fa-map-marker"></i>26 km
</div>
</div>
<div class="block-cta hidden-xs hidden-sm col-md-4 col-lg-2 text-right">
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-angle-right fa-stack-1x fa-inverse faa-horizontal animated-hover"></i>
</span>
</div>
</div>
</a>
</div>
<div class="block col-sm-4">
<a href="http://thingstodo.nl/activiteit/skidome-terneuzen/" target="_blank" class="block-wrapper">
<div class="block-thumbnail">
<img src="http://www.buienalarm.nl/sites/default/files/styles/370x220/public/externals/214da62969f5e398722a75254e85ccc7.jpg?itok=4xsSvRuK" width="370" height="220" alt="Speciale actie: €22.50 voor Skidome Terneuzen!" /> </div>
<div class="block-content row">
<div class="block-title col-xs-12 col-sm-12 col-md-8 col-lg-10">
<h4>Skidome Terneuzen tot 20% korting</h4>
<h5>Terneuzen</h5>
<div class="block-distance"><i
class="fa fa-map-marker"></i>83 km
</div>
</div>
<div class="block-cta hidden-xs hidden-sm col-md-4 col-lg-2 text-right">
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-angle-right fa-stack-1x fa-inverse faa-horizontal animated-hover"></i>
</span>
</div>
</div>
</a>
</div>
<div class="block col-sm-4">
<a href="http://thingstodo.nl/activiteit/omniversum/" target="_blank" class="block-wrapper">
<div class="block-thumbnail">
<img src="http://www.buienalarm.nl/sites/default/files/styles/370x220/public/externals/cfc571b6ed501ceb922003279816432f.jpg?itok=PBUy2Qmw" width="370" height="220" alt="Speciale actie: €8,95 voor het Omniversum " /> </div>
<div class="block-content row">
<div class="block-title col-xs-12 col-sm-12 col-md-8 col-lg-10">
<h4>Omniversum met 33% korting</h4>
<h5>Den Haag</h5>
<div class="block-distance"><i
class="fa fa-map-marker"></i>23 km
</div>
</div>
<div class="block-cta hidden-xs hidden-sm col-md-4 col-lg-2 text-right">
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-angle-right fa-stack-1x fa-inverse faa-horizontal animated-hover"></i>
</span>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="powered-block">
<span class="hgroup-powered">mede mogelijk gemaakt door <a href="http://thingstodo.nl/activiteiten/?longitude=4.47773&latitude=51.9244" target="_blank"><img src="/sites/all/themes/buien/html/images/powered-by-thingstodo.png"/></a></span>
<a class="btn btn-default" target="_blank" href="http://thingstodo.nl/activiteiten/?longitude=4.47773&latitude=51.9244"/>Meer leuke uitjes in Rotterdam</a>
</div>
</section>
<div class="banners-advrt">
<div class="row">
<div class="col-lg-8 col-lg-push-2 text-center">
<div class="advrt">
<div id="div-gpt-ad-1440162858885_1-wrapper" class="dfp-tag-wrapper">
<div id="div-gpt-ad-1440162858885_1"></div>
<script type="text/javascript">
googletag.cmd.push(function() {
googletag.display("div-gpt-ad-1440162858885_1");
});
</script>
</div> </div>
</div>
</div>
</div>
<!-- Modal for messages -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
</div>
</div>
</div>
<!-- Begin Footer -->
<footer class="footer" role="contentinfo">
<div class="footer-service">
<div class="container">
<div class="row">
<div class="col-md-4 hidden-sm"><h4>Ontvang onze nieuwsbrief</h4></div>
<div class="col-md-4 col-sm-6">
<form class="mailchimp-signup-subscribe-form input-group input-group--subscription" action="/location/rotterdam" method="post" id="mailchimp-signup-subscribe-block-email-subscription-form" accept-charset="UTF-8">
<input class="form-control form-text required" placeholder="Vul hier je mailadres in" type="text" id="edit-mergevars-email" name="mergevars[EMAIL]" value="" size="25" maxlength="128" />
<input type="hidden" name="form_build_id" value="form-adMSxD6q25duqxnkU1jduY-tjjj4AZfcaOgo7rF8aSU" />
<input type="hidden" name="form_id" value="mailchimp_signup_subscribe_block_email_subscription_form" />
<span class="input-group-btn"><input class="btn btn-default form-submit" type="submit" id="edit-submit--2" name="op" value="Meld je aan" /></span></form> </div>
<div class="col-md-4 col-sm-6 social-share text-right">
<h4 class="social-share-title">Volg ons op</h4>
<ul class="social-share-list list-inline">
<li>
<a href="https://www.facebook.com/Buienalarm?fref=ts" target="_blank">
<i class="fa fa-2x faa-tada animated-hover fa-facebook-square"></i>
</a>
</li>
<li>
<a href="https://instagram.com/buienalarm/" target="_blank">
<i class="fa fa-2x faa-tada animated-hover fa-instagram"></i>
</a>
</li>
<li>
<a href="https://twitter.com/Buienalarm" target="_blank">
<i class="fa fa-2x faa-tada animated-hover fa-twitter-square"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-blocks">
<div class="container">
<div class="row">
<div class="block block--links col-sm-4 col-md-3 col-md-offset-1">
<div class="block-title"><h4>Wat doet Buienalarm?</h4></div>
<div class="block-content">
<p><span style="text-align: justify; line-height: 18.14px; font-family: Arial, Helvetica, sans-serif; font-size: 12.96px;">Buienalarm is een handige app voor je smartphone die je op tijd kan waarschuwen voor buien op jouw locatie. Dat doet de app door op de achtergrond je actuele locatie bij te houden en met regelmaat de neerslagverwachting voor die locatie te controleren.</span></p>
</div>
</div>
<div class="block block--links col-sm-4 col-md-3 col-md-offset-1">
<div class="block-title"><h4>Wat kun je met Buienalarm?</h4></div>
<div class="block-content">
<p><span style="text-align: justify; line-height: 18.14px; font-family: Arial, Helvetica, sans-serif; font-size: 12.96px;">De app toont een grafiek waarin je de neerslagverwachting kunt zien voor de komende twee uur. Hoe hoger de grafiek komt, hoe meer neerslag er verwacht wordt. Daarnaast kun je ook de huidige temperatuur zien.</span></p>
</div>
</div>
<div class="block block--links col-sm-4 col-md-3 col-md-offset-1">
<div class="block-title"><h4>Waarom Buienalarm?</h4></div>
<div class="block-content">
<p><span style="text-align: justify; line-height: 18.14px; font-family: Arial, Helvetica, sans-serif; font-size: 12.96px;">Het hele jaar door kan het in ons land regenen. Het komt vaak voor dat we kijken hoe lang een bui duurt als we er al middenin zitten, maar dan is het meestal al te laat! Met Buienalarm word je daarom vanzelf gewaarschuwd als een bui in aantocht is.</span></p>
</div>
</div>
</div>
</div>
</div>
<div class="copyright">
<div class="container">
<div class="row">
<!-- Terms Info-->
<div class="copyright-text col-sm-9">
<strong>
© Buienalarm.nl 2016 </strong><span class="font-2"> &mdash; Buienalarm is een geregistreerde merknaam. Alle rechten voorbehouden.</span>
</div>
<!-- End Terms Info-->
<!-- Bottom Logo -->
<div class="logo col-sm-3">
<a rel="home" href="/">
<img class="logo-img" src="http://www.buienalarm.nl/sites/default/files/styles/default/public/media/submissions/buienalarm-logo-2016-nl-black.png?itok=Kb6SlgCu" alt="" /> </a>
</div>
<!-- End Bottom Logo -->
</div>
</div>
</div>
</footer>
<!-- End Footer --> </body>
</html>
Raw
javascript-buienalarm-2h.js
/*global Highcharts */
/*global Skycons */
/*jshint strict: false */
/*
* this file loads only for 2h location
*/
var isMobile = false, chart;
var $ = jQuery.noConflict();
function drawChart(data) {
//Fix the date
data.start = data.start * 1000;
data.start = data.start + 3600000;
if ($(data.precip).is(function (i) {
return data.precip[i] !== 0;
})) {
$('#chart .message').hide();
} else {
$('#chart .message').show();
}
data.precip = $.map(data.precip, function (value, index) {
return Math.pow(10, (value - 109) / 32);
});
var max = Math.max(3.5, Math.max.apply(null, data.precip));
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart-container',
type: 'areaspline',
backgroundColor: 'rgba(0,0,0,0)',
spacingTop: 0,
spacingRight: 0,
spacingLeft: 0,
spacingBottom: 0,
style: {
fontFamily: 'Montserrat, Arial, Helvetica, sans-serif'
},
events: {
load: function (event) {
this.tooltip.refresh([this.series[0].points[3]]);
}
}
},
title: {
text: ''
},
legend: {
enabled: false
},
xAxis: {
type: 'datetime',
tickInterval: 1800000,
gridLineWidth: 1,
lineWidth: 1,
lineColor: '#333',
gridLineColor: '#333',
labels: {
y: 25,
style: {
color: '#898989',
fontSize: '12px',
fontWeight: '300'
}
},
plotLines: [{
color: '#cc0000',
value: (data.start), // TODO: add current time odffset here
width: 1,
zIndex: 0,
dashStyle: 'Dash',
opacity: 0.5,
label: {
text: 'NU',
y: 40,
rotation: 0,
style: {
color: '#c00', fontSize: '11px'
}
}
}]
},
yAxis: {
plotLines: [
{
color: '#900',
value: 2.5,
width: 1,
zIndex: 5,
label: {
text: 'ZWAAR',
align: 'right',
textAlign: 'right',
x: 0, y: -4,
style: {
color: '#900', fontSize: '8px'
}
}
},
{
color: '#A35105',
value: 1,
width: 1,
zIndex: 5,
label: {
text: 'MIDDEL',
align: 'right',
textAlign: 'right',
x: 0, y: -4,
style: {
color: '#A35105', fontSize: '8px'
}
}
},
{
color: '#FDFF00',
value: 0.25,
width: 1,
zIndex: 5,
label: {
text: 'LICHT',
align: 'right',
textAlign: 'right',
x: 0, y: -4,
style: {
color: '#FDFF00', fontSize: '8px'
}
}
}
],
gridLineWidth: 0,
labels: {enabled: false},
min: 0,
max: max,
maxPadding: 0.5,
title: {
text: null
}
},
tooltip: {
crosshairs: {
width: 2,
color: '#fff',
dashStyle: 'solid',
zIndex: 4
},
shared: true,
shadow: false,
useHTML: true,
animation: false,
backgroundColor: 'transparent',
borderWidth: 0,
borderRadius: 0,
positioner: function () {
return {x: 0, y: 0};
},
formatter: function () {
return '<div class="time">' + Highcharts.dateFormat('%H:%M', this.x) +
'</div><div class="precipitation"><span class="value">' + Highcharts.numberFormat(this.y, 1, ',', '.') + '</span> mm/u</div>';
}
},
plotOptions: {
areaspline: {
animation: true,
lineColor: 'transparent',
lineWidth: 0,
fillOpacity: 1,
fillColor: '#2093c9',
shadow: false,
states: {
hover: {
lineWidth: 2
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
pointInterval: 1000 * 60 * 5, // 5 min
pointStart: data.start
}
},
series: [{
name: data.locality,
data: data.precip
}],
credits: {
enabled: false
}
});
}
function buildChart(locationdata) {
// This will only work on the server itself because of cross-domain restrictions
// When an error occurs, mock data is sent to the chart
var url = Drupal.settings.buienalarm.url;
//apply data to chart
app.data = locationdata.forecast;
app.data.locality = locationdata.locality;
app.center = new google.maps.LatLng(locationdata.original.x, locationdata.original.y);
app.marker = new google.maps.Marker({
position: app.center,
title: locationdata.locality,
icon: {
url: "/sites/all/themes/buien/html/images/map-marker.png",
size: new google.maps.Size(80, 80),
anchor: new google.maps.Point(41, 55),
}
});
app.marker_description = new google.maps.Marker({
position: app.center,
title: locationdata.locality,
icon: {
url: "/sites/all/themes/buien/html/images/map-marker.png",
size: new google.maps.Size(80, 80),
anchor: new google.maps.Point(41, 55),
}
});
initForecast();
}
function animateIcons() {
var skycons = new Skycons({'color': 'white'});
$('.skycons').each(function () {
skycons.add($(this)[0], Skycons[ $(this).data('weather').toUpperCase() ]);
});
skycons.play();
}
// ================================================= From BETA.BUIENALARM.NL ===
var app = {
time: null,
startTime: 0,
map: null,
data: null,
overlays: []
};
app.redirectToLocation = function (location) {
window.location.href = '/' + location.slug;
}
app.sprite = 'http://buienalarm.nl/loops/loop_joined.png';
app.looper = {
counter: 0,
intervalIds: [],
start: function () {
this.stop();
this.intervalIds.push(window.setInterval(this.renew, 500));
},
stop: function () {
this.intervalIds.map(function (n) {
window.clearInterval(n)
});
},
renew: function () {
if (app.looper.counter < 24) {
app.looper.counter++;
app.time = moment.unix(app.startTime).add(5 * app.looper.counter, 'minutes');
} else {
app.looper.counter = 0;
app.time = moment.unix(app.startTime);
}
app.goToFrame(app.looper.counter);
if (typeof app.chart != 'undefined') {
$('.forecast-chart .forecast-chart-weather .graph-mm').html((app.data.precip[app.looper.counter].toFixed(1) + "") + ' mm/u');
var time = (app.data.start + (300000 * app.looper.counter));
$('.forecast-chart .forecast-chart-weather .weather-time').html(Highcharts.dateFormat('%H:%M', time) + 'u');
app.chart.xAxis[0].removePlotLine('plot-line-1');
app.chart.xAxis[0].addPlotLine({
value: app.data.start + (300000 * app.looper.counter),
color: '#e9e8e6',
width: 4,
zIndex: 10,
id: 'plot-line-1',
label: {
text: '<span class="plot-value">' + Highcharts.dateFormat('%H:%M', time) + '</span>',
y: -10,
x: -25,
useHTML: true,
rotation: 0,
style: {
color: '#fff',
fontSize: '18px',
fontWeight: '600'
}
}
});
}
}
}
app.goToFrame = function (n) {
if (app.spriteOverlay !== undefined)
app.spriteOverlay.showFrame(n);
if (app.spriteOverlayRadar !== undefined)
app.spriteOverlayRadar.showFrame(n);
};
app.initMap = function () {
if($('#map-canvas').length){
var location = new google.maps.LatLng(52, 5);
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(52.2129919, 5.2793703),
mapTypeId: google.maps.MapTypeId.TERRAIN,
zoomControl: true,
panControl: false,
streetViewControl: false,
}
for (var i in app.mapOptions) {
mapOptions[i] = app.mapOptions[i];
}
var mapOptions_description = {
zoom: 6,
center: new google.maps.LatLng(Drupal.settings.buienalarm.coords[0], Drupal.settings.buienalarm.coords[1]),
mapTypeId: google.maps.MapTypeId.TERRAIN,
zoomControl: false,
panControl: false,
streetViewControl: false,
mapTypeControl: false,
draggable: true,
scrollwheel: false,
disableDoubleClickZoom: true
}
app.map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
if (document.getElementById('location-map-overlap')) {
app.map_description = new google.maps.Map(document.getElementById('location-map-overlap'), mapOptions_description);
}
if (app.marker) {
app.marker.setMap(app.map);
app.marker_description.setMap(app.map_description);
}
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(48.89530, 0),
new google.maps.LatLng(55.97360, 10.85643));
var image = $('<img />');
image.on('load', function () {
app.spriteOverlay = new SpriteOverlay(imageBounds, image[0], app.map);
app.looper.counter = 0;
if (!$("#chart-container:hover").length) {
app.looper.start();
}
});
image.attr('src', app.sprite);
}
};
app.initAutocomplete = function () {
var matcher = function (q, cb) {
$.getJSON('/autocomplete', {q: q}, function (matches) {
cb(matches);
})
}
$('.location-input').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'locations',
displayKey: 'name',
source: matcher,
templates: {
suggestion: function (location) {
return '<p>' + location.name + '<br/><small>' + location.municipality + '</small></p>';
}
}
}).on('typeahead:selected', function (e, location) {
app.redirectToLocation(location);
});
};
app.data = {"start": 1430311800, "temp": 13, "precip": [0, 0, 4, 8, 100, 105, 90, 120, 80, 90, 0, 100, 130, 90, 80, 0, 0, 100, 0, 0, 0, 0, 0, 0, 0]};
app.center = new google.maps.LatLng(52.4432312619808, 6.5771390843003);
app.mapOptions = {
mapTypeControl: false,
zoomControl: true,
draggable: true,
scrollwheel: false,
disableDoubleClickZoom: true
};
app.redirectToLocation = function (location) {
window.location.href = '/' + location.slug;
}
$(function () {
if ($('#map-canvas').length != '') {
//app.initMap();
app.startTime = app.data.start;
app.time = moment.unix(app.startTime);
}
// $('[data-toggle="tooltip"]').tooltip();
// app.initAutocomplete();
//initForecast();
$('.forecast-body .forecast-chart-cta-link').on('click', function () {
$(this).parents('.forecast-body').toggleClass('map-is-visible');
if ($(this).parents('.forecast-body').hasClass('map-is-visible')) {
$('.forecast-chart').toggleClass('col-xs-12 col-xs-8');
$(this).find('.fa-rss').toggleClass('fa-close fa-rss fa-stack-1x');
$('.forecast-radar')
.css({'position': 'relative'})
.animate({'right': '0%'}, 600);
}
else {
$(this).find('.fa-close').toggleClass('fa-close fa-rss fa-stack-1x');
$('.forecast-chart').toggleClass('col-xs-12 col-xs-8');
$('.forecast-radar')
.animate({'right': '-100%'}, 600)
.css({'position': 'absolute'});
}
app.chart.reflow();
return false;
});
});
function initRadar(locationdata) {
var lat, lng, locality;
lat = locationdata['original']['x'];
lng = locationdata['original']['y'];
locality = locationdata['locality'];
var location = new google.maps.LatLng(lat, lng);
var radarOptions = {
zoom: 8,
center: location,
mapTypeId: google.maps.MapTypeId.TERRAIN,
zoomControl: true,
panControl: false,
streetViewControl: false,
mapTypeControl: false,
draggable: false,
scrollwheel: false,
disableDoubleClickZoom: true
};
var radar = new google.maps.Map(document.getElementById('radar-map-container'), radarOptions);
createLocationControl(radar);
var radarMarker = new google.maps.Marker({
position: location,
title: locality,
icon: {
url: "/sites/all/themes/buien/html/images/map-marker.png",
size: new google.maps.Size(80, 80),
anchor: new google.maps.Point(41, 55),
}
});
radarMarker.setMap(radar);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(48.89530, 0),
new google.maps.LatLng(55.97360, 10.85643));
var image = $('<img />');
image.on('load', function () {
app.spriteOverlayRadar = new SpriteOverlay(imageBounds, image[0], radar);
app.looper.counter = 0;
app.looper.start();
});
image.attr('src', app.sprite);
}
function initForecast() {
//var array;
$('#chart-container').on('mouseenter touchstart', function () {
app.looper.stop();
});
$('#chart-container').on('mouseleave touchend', function () {
app.looper.start();
});
$('.current-location-button a').on('click', function (e) {
e.preventDefault();
navigator.geolocation.getCurrentPosition(function (position) {
$.getJSON('/closest/' + position.coords.latitude + '/' + position.coords.longitude, function (location) {
app.redirectToLocation(location);
});
});
return false;
});
if (app.data) {
app.data.start = app.data.start * 1000;
app.data.start = app.data.start - (new Date()).getTimezoneOffset() * 60 * 1000;
app.data.precip = app.data.precip.map(function (value) {
return Math.pow(10, (value - 109) / 32);
});
var max = Math.max(3.5, Math.max.apply(null, app.data.precip));
}
/* if (arg == 1) {
array = app.data.precip;
console.log(array);
}
if (arg == 0) {
array = app.data.precip1;
} */
if ($('#chart-container').length != '') {
var tickIntervalValue = 0;
if (document.location.href.indexOf('today') != '-1')
tickIntervalValue = 7200000;
else
tickIntervalValue = 3600000;
app.chart = new Highcharts.Chart({
chart: {
renderTo: 'chart-container',
type: 'areaspline',
backgroundColor: 'transparent',
spacingTop: 0,
spacingRight: 0,
spacingLeft: 0,
spacingBottom: 0,
height: 250,
style: {
fontFamily: "'Open Sans', sans-serif"
},
events: {
load: function (event) {
this.tooltip.refresh([this.series[0].points[3]]);
}
}
},
title: {
align: "left",
x: 0,
y: -70,
style: {
color: "#fff",
fontSize: '30px',
fontFamily: 'Arial, Helvetica, sans-serif',
fontWeight: 'bold'
},
text: app.data.locality
},
legend: {
enabled: false
},
xAxis: {
type: 'datetime',
tickInterval: tickIntervalValue,
color: '#7f7f7f',
gridLineWidth: 1,
lineWidth: 1,
opposite: true,
labels: {
y: -10,
zIndex: 1,
style: {
color: '#7f7f7f', fontSize: '14px', fontWeight: 400, fontFamily: "Roboto, Arial"
}
},
plotLines: [{
color: '#cc0000',
value: (moment().unix() - (new Date()).getTimezoneOffset() * 60) * 1000,
width: 1,
zIndex: 0,
dashStyle: 'Dash',
opacity: 0.5,
label: {
text: 'NU',
y: 40,
rotation: 0,
style: {
color: 'cc0000', fontWeight: 700, fontSize: '11px'
}
}
}]
},
yAxis: {
plotLines:
[
{
color: '#7f7f7f',
value: 2.5,
width: 1,
zIndex: 0,
label: {
text: 'zwaar',
align: 'right',
textAlign: 'right',
x: -20, y: -8,
style: {
color: '#7f7f7f', fontWeight: 400, fontFamily: "Roboto, Arial", fontSize: '14px'
}
}
},
{
color: '#7f7f7f',
value: 1,
width: 1,
zIndex: 0,
label: {
text: 'matig',
align: 'right',
textAlign: 'right',
x: -20, y: -8,
style: {
color: '#7f7f7f', fontWeight: 400, fontFamily: "Roboto, Arial", fontSize: '14px'
}
}
},
{
color: '#7f7f7f',
value: .25,
width: 1,
zIndex: 0,
label: {
text: 'licht',
align: 'right',
textAlign: 'right',
x: -20, y: -8,
style: {
color: '#7f7f7f', fontWeight: 400, fontFamily: "Roboto, Arial", fontSize: '14px'
}
}
}
],
gridLineWidth: 0,
labels: {enabled: false},
min: 0,
max: max,
maxPadding: 0.5,
title: {
text: null
}
},
tooltip: {
shared: true,
shadow: false,
followTouchMove: true,
useHTML: true,
animation: false,
backgroundColor: 'transparent',
borderWidth: 0,
borderRadius: 0,
style: {
},
positioner: function () {
return {x: 0, y: 0};
},
formatter: function () {
if (app.chart) {
app.chart.xAxis[0].removePlotLine('plot-line-1');
app.chart.xAxis[0].addPlotLine({
value: this.x,
color: '#e9e8e6',
width: 4,
zIndex: 10,
id: 'plot-line-1',
label: {
text: '<span class="plot-value">' + Highcharts.dateFormat('%H:%M', this.x) + '</span>',
y: -10,
x: -25,
useHTML: true,
rotation: 0,
style: {
color: '#fff',
fontSize: '18px',
fontWeight: '600'
}
}
});
}
var frame_number = (this.x - app.data.start) / 300000;
app.goToFrame(frame_number);
app.looper.counter = frame_number;
$('.forecast-chart .forecast-chart-weather .graph-mm').html(Highcharts.numberFormat(this.y, 1, '.', ',') + ' mm/u');
}
},
plotOptions: {
areaspline: {
animation: true,
lineColor: "#fff",
lineWidth: 0,
fillOpacity: 1,
fillColor: "#2093c9",
shadow: false,
states: {
hover: {
enabled: false
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
pointInterval: 1000 * 60 * 5,
pointStart: app.data.start
}
},
series: [{
name: app.data.locality,
data: app.data.precip
//data: array
}]
,
credits: {
enabled: false
},
exporting: {
enabled: false
}
});
}
app.initMap();
}
function SpriteOverlay(bounds, image, map) {
// Initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
this.frameCount_ = image.height / 820;
// Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay.
this.setMap(map);
}
SpriteOverlay.prototype = new google.maps.OverlayView();
SpriteOverlay.prototype.onAdd = function () {
var who = (function () {
var ua = navigator.userAgent, tem,
M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if (/trident/i.test(M[1])) {
tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
return 'IE ' + (tem[1] || '');
}
if (M[1] === 'Chrome') {
tem = ua.match(/\bOPR\/(\d+)/)
if (tem != null)
return 'Opera ' + tem[1];
}
M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
if ((tem = ua.match(/version\/(\d+)/i)) != null)
M.splice(1, 1, tem[1]);
return M.join(' ');
})().toLowerCase();
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.opacity = '0.7';
div.style.overflow = 'hidden';
div.style.position = 'absolute';
if (who.indexOf('firefox') != -1)
this.image_.style.imageRendering = '-moz-crisp-edges';
else if (who.indexOf('opera') != -1)
this.image_.style.imageRendering = '-o-crisp-edges';
else if (who.indexOf('ie') != -1)
this.image_.style.msInterpolationMode = 'nearest-neighbor';
else
this.image_.style.imageRendering = '-webkit-optimize-contrast';
this.image_.style.width = '100%';
this.image_.style.height = '100%';
this.image_.style.position = 'absolute';
div.appendChild(this.image_);
this.div_ = div;
this.overlay_height = 0;
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
// [END region_attachment]
SpriteOverlay.prototype.showFrame = function (n) {
n = Math.min(n, this.frameCount_ - 1);
if (this.image_)
this.image_.style.top = (n * this.overlay_height * -1) + 'px';
};
// [START region_drawing]
SpriteOverlay.prototype.draw = function () {
// We use the south-west and north-east
// coordinates of the overlay to peg it to the correct position and size.
// To do this, we need to retrieve the projection from the overlay.
var overlayProjection = this.getProjection();
// Retrieve the south-west and north-east coordinates of this overlay
// in LatLngs and convert them to pixel coordinates.
// We'll use these coordinates to resize the div.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's div to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
this.overlay_height = (sw.y - ne.y);
div.style.height = this.overlay_height + 'px';
this.image_.style.height = (this.overlay_height * this.frameCount_) + 'px';
};
// [END region_drawing]
// [START region_removal]
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
SpriteOverlay.prototype.onRemove = function () {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
function createLocationControl(map) {
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map.
var controlDiv = document.createElement('div');
controlDiv.style.padding = '5px';
// Set CSS for the control border.
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.border = '1px solid #f7f7f7';
controlUI.style.borderRadius = '2px';
controlUI.style.margin = '2px';
controlUI.style.position = 'relative';
controlUI.style.left = '2px';
controlUI.style.boxShadow = '0 2px 2px rgba(0, 0, 0, 0.4)';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Klik hier om naar je huidige locatie te gaan';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.style.height = '14px';
controlText.style.width = '14px';
controlText.style.background = 'url(/sites/all/themes/buien/html/images/maps-current-location.png)';
controlUI.appendChild(controlText);
// Setup the click event listeners: simply set the map to Chicago.
google.maps.event.addDomListener(controlUI, 'click', function () {
navigator.geolocation.getCurrentPosition(function (position) {
$.getJSON('/closest/' + position.coords.latitude + '/' + position.coords.longitude, function (location) {
app.redirectToLocation(location);
});
});
});
controlDiv.index = 1;
map.controls[google.maps.ControlPosition.LEFT_TOP].push(controlDiv);
}
// ================================================= /From BETA.BUIENALARM.NL ===
$(function () {
// $(window).resize(onResize).load(onResize);//.scroll(onScroll);
animateIcons();
// buildChart();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment