jQuery(document).ready(function () { /** * @author EROL */ $ = jQuery; // selector cache var elems = { body: $('body'), mapTitle: $('[data-map-title]'), searchConsole: $('[data-search-console]'), electionResults: $('[data-search-item="election-results"]'), switchboard: $('.verkiezingen-dashboard__left__search-console .opties'), currentElections: $('[data-search-item="current-elections"]'), currentElectionsAndResults: $('[data-search-item="election-results"], [data-search-item="current-elections"]'), electionResultsContent: $('[data-item-content="election-results"]'), currentElectionsContent: $('[data-item-content="current-elections"]'), currentElectionsAndResultsContent: $('[data-item-content="election-results"], [data-item-content="current-elections"]'), consoleItem: $('[data-search-item]'), consoleItemSecondAndThird: $('[data-search-item="election-results"], [data-search-item="current-elections"]'), itemContent: $('[data-item-content]'), searchField: $('[data-search-field]'), optionsButton: $('[data-options-button]'), searchResultsHolder: $('[data-item-content="search results"]'), sidebarCollapseButton: $('[data-sidebar-button="collapse-sidebar"]'), allControlButtonSections: $('[data-control-button-section="collapse-sidebar"], [data-control-button-section="map-controls"]'), mapLayers: $('.verkiezingen-dashboard__left__search-console__item-content__item'), switches: $('input[name=layerselect]'), legenda: $('.legendawrapper'), }; // global variables var electionResultsState = 0; var currentElectionsState = 0; var optionButtonState = 0; var $searchItemOpenedClass = 'verkiezingen-dashboard__left__search-console__item--opened'; var citySearchResults = []; var searchFieldState = 0; var searchArrowState = 0; var currentlySelectedCityId = 0; var currentSelectedCityName = ''; partij = 'Grootste'; address = ''; elems.switchboard.hide(); /** * Handle clicks on the search console items * - this is needles complex because one of these outer if's died */ elems.consoleItem.on('click', function(e) { var self = $(this); var itemType = self.data('search-item'); if (itemType === 'election-results') { if (electionResultsState === 0) { elems.electionResultsContent.show(); elems.currentElectionsContent.hide(); elems.legenda.hide(); self.addClass($searchItemOpenedClass); elems.currentElections.removeClass($searchItemOpenedClass); electionResultsState = 1; currentElectionsState = 0; } else { elems.electionResultsContent.hide(); self.removeClass($searchItemOpenedClass); electionResultsState = 0; } } else if (itemType === 'current-elections') { if (currentElectionsState === 0) { elems.currentElectionsContent.show(); elems.legenda.show(); elems.electionResultsContent.hide(); self.addClass($searchItemOpenedClass); elems.electionResults.removeClass($searchItemOpenedClass); currentElectionsState = 1; electionResultsState = 0; } else { elems.currentElectionsContent.hide(); self.removeClass($searchItemOpenedClass); currentElectionsState = 0; } } }); /** * Where's the plumbing? * Handle click for a layer */ elems.mapLayers.on('click', function(e) { var self = $(this); partij = self.data('current-elections-item'); actieveLaag = partij; // vraag de mapserver om de nieuwe laag wmsSource.updateParams({'LAYERS': actieveLaag, 'RAND': nmt.mapserver.TILE_VERSION}); $('.verkiezingen-dashboard__left__search-console__item--opened').trigger( 'click' ); // en nu de state veranderen, eerst de actieve deactiveren, en dan ... elems.mapLayers.removeClass('active'); self.addClass('active'); // vraag de mapserver om de legenda getlegend(); return true; }); /** * Handle search (autocomplete) */ elems.searchField.on('keyup', function(e) { citySearchResults = cities.filter( function(item) { return item[1].toLowerCase().startsWith( elems.searchField.val().toLowerCase() )} ); if ($(this).val() && citySearchResults) { elems.searchResultsHolder.empty(); elems.searchResultsHolder.show(); for (var i = 0; i < citySearchResults.length; i++) { elems.currentElectionsAndResultsContent.hide(); elems.currentElectionsAndResults.hide(); elems.legenda.hide(); elems.searchResultsHolder.append( '
Op deze kaart is te zien hoe er is gestemd bij de verkiezingen voor de Provinciale Staten van 20 maart 2019.
De kaart bevat gegevens van 9.329 stembureaus. De uitslagen en de locaties van de stembureaus zijn verzameld door Joost Smits en Frank van Dalen van de Stichting Politieke Academie.Klik op een stembureau om de bijbehorende uitslag te zien.
Bron: Stichting Politieke Academie | Joost Smits & Frank van Dalen
') $('.logo').append(' ’); $('.share--pop-me-up').click(function(event) { const popupWindow = window.open(this.href, '_blank', 'height=350,width=500'); if (popupWindow) { event.preventDefault(); popupWindow.focus(); } }); }); let sidebarCollapseState = 0; elems.sidebarCollapseButton.on('click', function(e) { if (sidebarCollapseState === 0) { socket.postMessage('collapse_sidebar'); elems.allControlButtonSections.css({ right: '0', WebkitTransition: 'right 175ms ease-in-out', MozTransition: 'right 175ms ease-in-out', MsTransition: 'right 175ms ease-in-out', OTransition: 'right 175ms ease-in-out', transition: 'right 175ms ease-in-out' }); sidebarCollapseState = 1; } else { socket.postMessage('open_sidebar'); elems.allControlButtonSections.css({ right: '465px', WebkitTransition: 'right 175ms ease-in-out', MozTransition: 'right 175ms ease-in-out', MsTransition: 'right 175ms ease-in-out', OTransition: 'right 175ms ease-in-out', transition: 'right 175ms ease-in-out' }); sidebarCollapseState = 0; } }); /** * @author APPIE */ function dashboard_show_gemeente(json) { // is er uberhaupt iets teruggekomen? // if not, we clicked not on the Netherlands if (json.Uitslagen.length ) { $('.verkiezingen-dashboard__right__seat-counts__election-results__chart').empty(); $('#gemeentegrafiek').empty(); $('#gemeentegrafiek').show(); $('.wrap').hide(); nmt.mapserver.map_response(json); } else { console.log ('not on the map'); } } actieveLaag = "Grootste"; vraagPlek = []; rdsProjection = ol.proj.get('EPSG:28992'); displayProjection = ol.proj.get('EPSG:900913'); wgsProjection = ol.proj.get('EPSG:4326'); maxExtent = [375976.3208015065,6577815.2877903255,804023.6791984935,7076184.7122096745]; OSM = new ol.layer.Tile({ source: new ol.source.XYZ({ attributions: [ new ol.Attribution({ html: 'Bron: Stichting Politieke Academie | Joost Smits & Frank van Dalen | © OpenStreetMap, © CARTO' }), //ol.source.OSM.ATTRIBUTION ], url: 'https://cartodb-basemaps-{1-4}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png' }) }); wmsSource = new ol.source.TileWMS({ url: nmt.mapserver.settings.wms_source, params: {'LAYERS': actieveLaag, 'tile_map_edge_buffer' : 4}, gutter: 20 }); wmsLayer = new ol.layer.Tile({ extent: maxExtent, source: wmsSource, opacity: '0.85' }); styleProv = new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#3d3d3d', width: 1.5 }) }); provincies = new ol.layer.Vector({ source: new ol.source.Vector({ projection: displayProjection, url: './provincies2019.kml', format: new ol.format.KML({ extractStyles: false, }) }), style: styleProv }); styleBuit = new ol.style.Style({ fill: new ol.style.Fill({ color: [255, 255, 255, 0.7] }), stroke: new ol.style.Stroke({ color: [150, 150, 150, 0.7], width: 2 }) }); var iconStyle = new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ anchor: [16, 32], anchorXUnits: 'pixels', anchorYUnits: 'pixels', opacity: 0.75, src: '/ps2019/red-markerOutline.png' })) }); var vectorSource = new ol.source.Vector({ // }); var vectorLayer = new ol.layer.Vector({ source: vectorSource }); var maxResolution = 611.49622628141; var minResolution = 2.21851414258813; var view = new ol.View({ extent: maxExtent, maxResolution: maxResolution, minResolution: minResolution, projection: displayProjection, rotation: 0, zoom: 8 }); var interactions = ol.interaction.defaults({altShiftDragRotate:false, pinchRotate:false}); var scaleLineControl = new ol.control.ScaleLine(); var visiblewidth = $(window).width() - ($('.verkiezingen-dashboard__vote-count').width() - 10); function mobileOrNot() { if ($(window).width() < 960) { visiblewidth = $(window).width(); var position = ($(window).height()); var positionButton = ($(window).height() - 36); $('.verkiezingen-dashboard__vote-count').addClass('verkiezingen-dashboard__vote-count--mobile'); $('.verkiezingen-dashboard__vote-count').css('top', position); $('.verkiezingen-dashboard__mobile-collapse-button').css('top', positionButton); } else { visiblewidth = $(window).width() - ($('.verkiezingen-dashboard__vote-count').width() - 10); $('.verkiezingen-dashboard__vote-count').css('top', 0); $('.verkiezingen-dashboard__vote-count').removeClass('verkiezingen-dashboard__vote-count--mobile'); } } $('.verkiezingen-dashboard__mobile-collapse-button').click(function() { var position = ($(window).height()); var offset = $('.verkiezingen-dashboard__left__search-console').height(); var offsetButton = ($('.verkiezingen-dashboard__left__search-console').height() + 36); var positionButton = ($(window).height() - 36); if(!$('.verkiezingen-dashboard__vote-count').hasClass('open') && $(window).width() < 960) { $('.verkiezingen-dashboard__vote-count').css('top', offsetButton).addClass('open'); $('.verkiezingen-dashboard__mobile-collapse-button').css('top', offset).addClass('open'); $('.verkiezingen-dashboard__mobile-collapse-button').addClass('verkiezingen-dashboard__mobile-collapse-button--rev'); console.log('no log'); $('.map').hide(); } else if ($('.verkiezingen-dashboard__vote-count').hasClass('open') && $(window).width() < 960) { $('.verkiezingen-dashboard__vote-count').css('top', position).removeClass('open'); $('.verkiezingen-dashboard__mobile-collapse-button').css('top', positionButton).removeClass('open'); $('.verkiezingen-dashboard__mobile-collapse-button').css({'transform':'rotate(180deg)'}); $('.verkiezingen-dashboard__mobile-collapse-button').removeClass('verkiezingen-dashboard__mobile-collapse-button--rev'); $('.map').show(); } }); $('.verkiezingen-dashboard__left__search-console__item--mobile').click(function(){ var position = ($(window).height()); var positionButton = ($(window).height() - 36); if ($('.verkiezingen-dashboard__vote-count').hasClass('open') && $(window).width() < 960) { $('.verkiezingen-dashboard__vote-count').css('top', position).removeClass('open'); $('.verkiezingen-dashboard__mobile-collapse-button').css('top', positionButton).removeClass('open'); $('.verkiezingen-dashboard__mobile-collapse-button').css({'transform':'rotate(180deg)'}); $('.verkiezingen-dashboard__mobile-collapse-button').removeClass('verkiezingen-dashboard__mobile-collapse-button--rev'); $('.map').show(); } }); mobileOrNot(); $(window).resize(function(){ mobileOrNot(); $('#map').css('width', visiblewidth); }); $('#map').css('width', visiblewidth); var map = new ol.Map({ target: 'map', layers: [OSM, wmsLayer, provincies, vectorLayer], view: view, controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ collapsible: true }), zoom: false, attribution: true, rotate: false, }).extend([ new ol.control.ZoomToExtent({ extent: maxExtent }), new ol.control.Zoom({ extent: maxExtent }) ]), interactions: interactions }); map.getView().fit(maxExtent, map.getSize()); // haal de timestamp van de laatste uitslag die we hebben ontvangen nmt.mapserver.check_tile_lastupdate(); setInterval(nmt.mapserver.check_tile_lastupdate, 300000); function addMarker() { vectorSource.clear(); var iconFeature = new ol.Feature({ geometry: new ol.geom.Point(vraagPlek) }); iconFeature.setStyle(iconStyle); vectorSource.addFeature(iconFeature); } function kaartVraag() { var viewResolution = (view.getResolution()); var url = wmsSource.getGetFeatureInfoUrl(vraagPlek, viewResolution, displayProjection, {'INFO_FORMAT': 'text/html'}); jQuery(document).ready(function () { if (url) { jQuery.ajax({ type: 'GET', url: url, dataType: 'json', success: [addMarker, dashboard_show_gemeente, streetV], error: [geenJson, addMarker], // This is the important part!!! beforeSend: function(jqXHR) { jqXHR.overrideMimeType('text/html;charset=iso-8859-1'); } }); } }); } function getJSON(cbs) { jQuery(document).ready(function () { url = nmt.mapserver.settings.click_url + cbs; if (url) { jQuery.ajax({ type: 'GET', url: url, dataType: 'json', success: [dashboard_show_gemeente], error: [geenJson] }); }; }); } function geenJson(xhr_obj, the_error, thrown) { console.log('cbs-json:\n' + cbs); console.log(the_error+' .. '+thrown); console.log(xhr_obj); jQuery('#grafiekKop').fadeOut(250, function() { jQuery(document).ready(function() { jQuery('#grafiekKop').html("Geen uitslag gevonden"); }); jQuery('#grafiekKop').fadeIn(250); }); jQuery('#toelichting').empty(); jQuery('#knopToelichting').hide(); jQuery('#knopTabelBladerMin').hide(); jQuery('#knopTabelBladerPlus').hide(); jQuery('#sV').hide(); } function kopMaken() { var opkomstTekst = ""; if ( clickResult.OPKOMST15 > 0 ) { opkomstTekst = Math.round((clickResult.OPKOMST15 / clickResult.KIESGER15) * 100, -1) + " pct opkomst"; } else { opkomstTekst = "Nog geen uitslag"; } var grKopTekst = "Gemeente " + clickResult.Gemnaam + "