var actieveLaag="PVV2015";
var vraagPlek = [];
var rdsProjection = ol.proj.get('EPSG:28992');
var displayProjection = ol.proj.get('EPSG:900913');
var maxExtent = [375976.3208015065,6577815.2877903255,804023.6791984935,7076184.7122096745];
var OSM = new ol.layer.Tile({
source: new ol.source.OSM({
attributions: [
new ol.Attribution({
html: 'Bron verkiezingsuitslagen: ANP | '
}),
ol.source.OSM.ATTRIBUTION
]
})
});
var wmsSource = new ol.source.TileWMS({
url: 'http://maps.nrc.nl/cgi-bin/mapserv?map=/var/www/fgs/chameleon/map/PS2015ap.map',
params: {'LAYERS': actieveLaag}
});
var wmsLayer = new ol.layer.Tile({
extent: maxExtent,
source: wmsSource,
opacity: '0.85'
});
var styleProv = new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#3d3d3d',
width: 3.5
})
});
var provincies = new ol.layer.Vector({
source: new ol.source.KML({
extractStyles: false,
projection: displayProjection,
url: 'nederland2.kml'
}),
style: styleProv
});
var 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: 6
})
});
var buitenland = new ol.layer.Vector({
source: new ol.source.KML({
extractStyles: false,
projection: displayProjection,
url: 'grens.kml'
}),
style: styleBuit
});
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: 'markerOutline.png'
}))
});
var vectorSource = new ol.source.Vector({
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var maxResolution = 611.49622628141;
var minResolution = 38.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 map = new ol.Map({
target: 'map',
layers: [OSM, wmsLayer, buitenland, provincies, vectorLayer],
view: view,
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: true
}),
zoom: false,
attribution: true,
rotate: false,
}).extend([
scaleLineControl,
//new ol.control.FullScreen(),
new ol.control.ZoomToExtent({
extent: maxExtent
})
]),
interactions: interactions
});
map.getView().fitExtent(maxExtent, map.getSize());
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 = /** @type {number} */ (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: 'text',
success: [addMarker, getJSON],
error: [geenJson, addMarker]
});
};
});
}
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: [nmt.mapserver.map_response],
error: [geenJson, addMarker]
});
};
});
}
function geenJson(xhr_obj, the_error, thrown) {
console.log(the_error+' .. '+thrown);
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 + "
" + opkomstTekst + ", " + clickResult.KIESGER15 + " kiesgerechtigden";
jQuery('#grafiekKop').fadeOut(250, function() {
jQuery(document).ready(function() {
jQuery('#grafiekKop').html(grKopTekst);
});
jQuery('#grafiekKop').fadeIn(250);
});
}
map.on('singleclick', function(evt) {
vraagPlek = evt.coordinate;
jQuery( '#grafiekKop' ).html("loading … ");
jQuery( '#toelichting' ).html("
loading …
");
jQuery( '#knopToelichting').hide();
kaartVraag();
if(jQuery('#balk3').css('display') == 'none') {
toggle_balk3();
}
});
// de volgende 4 toggle-functies combineren door een toggle_iets('what') funtie please!
// mobiel, getriggerd door de hamburger
function toggle_knoppen() {
if (nmt.mapserver.knoppen_visible) {
jQuery("#knoppenbord").hide(300);
nmt.mapserver.knoppen_visible = 0;
} else {
jQuery("#knoppenbord").show(300);
nmt.mapserver.knoppen_visible = 1;
}
}
// mobiel getriggerd door een map-click
function toggle_balk3() {
if (nmt.mapserver.balk3_visible) {
jQuery("#balk3").hide(300);
nmt.mapserver.balk3_visible = 0;
} else {
jQuery("#balk3").show(300);
nmt.mapserver.balk3_visible = 1;
}
}
// getriggered door legendakop klik
function toggle_legenda() {
if (nmt.mapserver.legenda_visible) {
jQuery("#legenda").hide(300);
nmt.mapserver.legenda_visible = 0;
} else {
jQuery("#legenda").show(300);
nmt.mapserver.legenda_visible = 1;
}
}
// getriggerd door search-button click
function toggle_search() {
if (nmt.mapserver.search_visible) {
jQuery("#zoek").hide(100);
nmt.mapserver.search_visible = 0;
} else {
jQuery("#zoek").show(100);
jQuery('#address').focus();
nmt.mapserver.search_visible = 1;
}
}
var splitTal = 10;
function uitslagTabel(clickResult) {
var kolOpmBreed = "";
var kolOpm = "";
jQuery.each(clickResult.Uitslagen_full, function(index) {
jQuery.each(this, function (ind, val) {
if ( ind == "PARTIJ" ) {
if ( index%2 == 0 ) {
tabel = tabel + "" + kolOpmBreed + val + "";
} else {
tabel = tabel + "
" + kolOpmBreed + val + "";
}
}
if ( ind == "s15" || ind == "s11" ) {
tabel = tabel + kolOpm + val + "";
}
});
tabel = tabel + "
";
if ( (index+1)%splitTal == 0 || (index+1) == clickResult.Uitslagen_full.length ) {
tabel = "
"
+ tabel
;
tabellen.push(tabel);
tabel = "";
}
});
jQuery("#toelichting").html(tabellen[schakelaar]);
if ( clickResult.Uitslagen_full.length > splitTal ) {
jQuery('#knopTabelBladerMin').show();
jQuery('#knopTabelBladerPlus').show();
blader();
}
}
function schakel() {
if ( richting == 1 && (schakelaar+1) < tabellen.length ) {
schakelaar++;
} else if ( richting == -1 && schakelaar > 0) {
schakelaar--;
}
jQuery("#toelichting").html(tabellen[schakelaar]);
grijzeRegels();
blader();
}
function blader() {
if ( (schakelaar+1) == tabellen.length ) {
jQuery('#knopTabelBladerPlus').hide();
jQuery('#knopTabelBladerMin').show();
} else if ( schakelaar == 0 ) {
jQuery('#knopTabelBladerMin').hide();
jQuery('#knopTabelBladerPlus').show();
} else if ((schakelaar+1) < tabellen.length || schakelaar != 0 ) {
jQuery('#knopTabelBladerPlus').show();
jQuery('#knopTabelBladerMin').show();
}
var terug = document.createElement('div');
jQuery('#knopTabelBladerMin').empty();
jQuery('#knopTabelBladerPlus').empty();
jQuery(terug).html("terug")
.appendTo(jQuery("#knopTabelBladerMin")) //main div
.click(function() {
richting = -1;
schakel();
});
var vooruit = document.createElement('div');
jQuery(vooruit).html("verder")
.appendTo(jQuery("#knopTabelBladerPlus")) //main div
.click(function() {
richting = 1;
schakel();
});
}
function grijzeRegels() {
jQuery("div").filter(function( index ) {
return jQuery( this ).attr( "id" ) == 'oneven';
})
.css( "background-color", "#f4f4f4" )
.css( "border", "4px solid #f4f4f4" );
jQuery("div").filter(function( index ) {
return jQuery( this ).attr( "id" ) == 'even';
})
.css( "background-color", "#fff" )
.css( "border", "4px solid #fff" );
jQuery("div").filter(function( index ) {
return jQuery( this ).attr( "id" ) == 'tabKop';
})
.css( "background-color", "#d8d8d8" )
.css( "border", "4px solid #d8d8d8" )
.css( "font-weight", "bold" );
}
function uitslagGrafiek(clickResult) {
jQuery( "#toelichting" ).empty();
var margin = {top: 1, right: 55, bottom: 20, left: 95},
width = 270 - margin.left - margin.right,
height = 327 - margin.top - margin.bottom;
var y0 = d3.scale.ordinal()
.rangeRoundBands([0, height], .2);
var y1 = d3.scale.ordinal();
var x = d3.scale.linear()
.range([0, width]);
var color = d3.scale.ordinal()
.range(["#ff0000", "#d3d3d3"]);
var yAxis = d3.svg.axis()
.scale(y0)
.orient("left");
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.format("r"))
.ticks(5);
var svg = d3.select("#toelichting").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var jaarKlassen = d3.keys(datasetGrafiek[0]).filter(function(key) {
return key == "p15" || key == "p11";
});
datasetGrafiek.forEach(function(d) {
d.klassen = jaarKlassen.map(function(name) {
return {name: name, value: +d[name]};
});
});
y0.domain(datasetGrafiek.map(function(d) {
return d.PARTIJ;
}));
y1.domain(jaarKlassen).rangeRoundBands([0, y0.rangeBand()]);
x.domain([0, d3.max(datasetGrafiek, function(d) {
return d3.max(d.klassen, function(d) {
return d.value;
});
})]);
var partij = svg.selectAll("partij")
.data(datasetGrafiek)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) {
return "translate(0," + y0(d.PARTIJ) + ")";
});
partij.selectAll("rect")
.data(function(d) {
return d.klassen;
})
.enter().append("rect")
.attr("height", y1.rangeBand())
.attr("y", function(d) {
return y1(d.name);
})
.attr("x", 0)
.attr("width", 0)
.style("fill", function(d) {
return color(d.name);
})
.transition()
.duration(600)
.attr("width", function(d) {
return x(d.value);
});
partij.selectAll("text")
.data(function(d) {
return d.klassen;
})
.enter().append("text")
.text(function(d) {
if (d.value != 0) {
return d.value.toFixed(1);
}
})
.attr("fill", "white")
.transition()
.duration(1500)
.attr("text-anchor", "middle")
.attr("x", function(d) {
return x(d.value) + 12;
})
.attr("y", function(d) {
return y1(d.name) + ((y1.rangeBand() * 0.5) + 3);
})
.attr("fill", "grey");
var legendGroup = svg.append("g")
.attr("class", "legend")
.attr("transform", "translate(" + margin.right + "," + (height - margin.top * 50) + ")");
var legendEntry = legendGroup.selectAll('g')
.data(jaarKlassen.slice());
legendEntry.enter().append("g")
.attr("class", "legend-entry")
.attr("transform", function(d, i) {
return "translate(0," + i * 20 + ")";
});
legendEntry.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legendEntry.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) {
d = d.replace("p", "20");
return d;
})
.attr("fill", "grey");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("y", height-12)
.attr("dy", "2.7em")
.attr("x", -15)
.style("text-anchor", "end")
.text("Procent:")
.attr("fill", "grey");
var insertLinebreaks = function (d) {
var el = d3.select(this);
var halveNaam = d.length/2;
var aantalSpaties = (d.match(/\s/g) || []).length;
if ( halveNaam > 8 && aantalSpaties != 0 ) {
var regexp = /\s/g;
var match, kleinste = [], matches = [];
while ((match = regexp.exec(d)) != null) {
kleinste.push(Math.abs(halveNaam - match.index));
matches.push(match.index);
}
var breakVanaf = kleinste.indexOf( Math.min.apply( null, kleinste ) );
var words = [d.slice(0,matches[breakVanaf]), d.slice(matches[breakVanaf])];
el.text('');
for (var i = 0; i < 2; i++) {
var tspan = el.append('tspan').text(words[i]);
tspan.attr('y', 0).attr('dy', '-3');
if (i > 0) {
tspan.attr('y', 0).attr('dy', '8');
tspan.attr('x', -9);
}
}
}
};
svg.selectAll('g.y.axis g text').each(insertLinebreaks);
}
// Begin zoekfunctie
function showLocation(address) {
// Kleine patch voor Den Haag en Den Bosch
address = address.toLowerCase();
if ( address == "den haag" ) {
address = "\'s-gravenhage";
}
if ( address == "den bosch" ) {
address = "\'s-hertogenbosch";
}
if (nmt.mapserver.search_visible) {
toggle_search();
}
jQuery('#address').val('');
jQuery.ajax({
type: 'GET',
url: 'http://maps.nrc.nl/proxy_ov.php?zoekterm=' + address,
dataType: 'xml',
success: locationSuccess
});
}
function locationSuccess(xml) {
var bagAdres;
var bagType;
jQuery(xml).find('xls\\:GeocodedAddress,GeocodedAddress').each(function() {
var bagType = jQuery(this).find('xls\\:place,place').attr('type');
var vindPlaats = jQuery(this).find('xls\\:place,place').first().text();
if ( bagType == "MunicipalitySubdivision" && vindPlaats.toLowerCase() == address ) {
bagAdres = jQuery(this).find('gml\\:pos,pos').text();
return false;
}
else if ( bagType == "Municipality" && vindPlaats.toLowerCase() == address ) {
bagAdres = jQuery(this).find('gml\\:pos,pos').text();
return false;
}
else {
bagAdres = jQuery(this).find('gml\\:pos,pos').text();
}
});
if ( typeof bagAdres == 'undefined' ) {
// hier gaat nog iets mis. Hij zegt: geen plaats, maar doet daarna wel een klik
jQuery( '#grafiekKop' ).html("Geen plaats gevonden");
jQuery( '#toelichting' ).empty();
jQuery( '#knopToelichting' ).hide();
jQuery( '#knopTabelBladerMin' ).hide();
jQuery( '#knopTabelBladerPlus' ).hide();
return false;
} else {
var rdsXY = bagAdres.split(" ");
vraagPlek = ol.proj.transform([rdsXY[0], rdsXY[1]], rdsProjection, displayProjection);
map.getView().setCenter(vraagPlek);
map.getView().setZoom(2);
kaartVraag();
if(jQuery('#balk3').css('display') == 'none') {
toggle_balk3();
}
}
}
// laag gekozen, laag verversen!
function s(button) {
wmsSource.updateParams({'LAYERS': actieveLaag, 'RAND': nmt.mapserver.TILE_VERSION});
getlegend();
jQuery("#titel").html(legendhead);
// op kleine schermen de knoppen verbergen, die liggen over de kaart.
if (nmt.mapserver.knoppen_visible) {
toggle_knoppen();
}
}
function getlegend() {
jQuery('#legenda').attr("src",nmt.mapserver.settings.legenda_url + actieveLaag + "&format=png&v=" + nmt.mapserver.TILE_VERSION);
}
function legkop() {
var leg_width = jQuery("#legenda").width();
jQuery("#legendakop").width(leg_width);
}
jQuery(document).ready( function() {
nmt.mapserver.legenda_visible = 1;
getlegend();
jQuery("#legendakop").click( function() {
toggle_legenda();
});
// zoom extent verplaatsen, alle browsers
jQuery('.ol-zoom-extent > button').html('');
jQuery('.ol-zoom-extent').css('left', 'auto');
// kleine schermpjes
// media-query voor tablets, de .info aside vervangen met zijn inhoud,
// oftewel, raak de aside zelf kwijt
var mq = window.matchMedia('screen and (max-width: 768px)');
if(mq.matches) {
jQuery('body').append(jQuery('#knoppenbord'));
// attach the hamburger to the map itself
jQuery('#map .ol-overlaycontainer-stopevent').append(
''
);
jQuery('.ol-hamburger').click( function() {
toggle_knoppen();
});
jQuery('body').append(jQuery('#balk3'));
jQuery('#balk3').append('X');
jQuery('#close_balk3').click( function() {
toggle_balk3();
});
// gooi die a-side weg, de supercontainer zit hier alleen maar in de weg
jQuery('.info').detach();
// hide the address-bar?
setTimeout(function() {window.scrollTo(0, 1)}, 100);
// search-button, attatched to the map
jQuery('#map .ol-overlaycontainer-stopevent').append('');
jQuery('.ol-search').click( function() {
toggle_search();
});
} // mobiel dus
});