var actieveLaag="Uitslag2016";
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: 'Uitslagen: ANP | '
}),
ol.source.OSM.ATTRIBUTION
]
})
});
var wmsSource = new ol.source.TileWMS({
url: 'https://maps.nrc.nl/cgi-bin/mapserv?map=/var/mapserver/maps/ref2016.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.Vector({
projection: displayProjection,
url: 'nederland2.kml',
format: new ol.format.KML({
extractStyles: false
})
}),
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.Vector({
projection: displayProjection,
url: 'grens.kml',
format: new ol.format.KML({
extractStyles: false
})
}),
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 = 2.388657133911758;
var view = new ol.View({
extent: maxExtent,
maxResolution: maxResolution,
minResolution: minResolution,
projection: displayProjection,
rotation: 0,
zoom: 8
});
var duration = 400;
var interactions = ol.interaction.defaults({
altShiftDragRotate: false,
pinchRotate: false,
dragZoom: false
})
.extend([
new ol.interaction.PinchZoom({
duration: duration
}),
new ol.interaction.MouseWheelZoom({
duration: duration
})
])
;
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.ZoomToExtent({
extent: maxExtent
})
]),
interactions: interactions
});
map.getView().fit(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'});
console.log(url);
jQuery(document).ready(function () {
if (url) {
jQuery.ajax({
type: 'GET',
url: url,
dataType: 'json',
success: [addMarker, 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();
}
function kopMaken() {
var opkomstTekst = "";
if ( clickResult.sOpkomst > 0 ) {
opkomstTekst = Math.round((clickResult.sOpkomst / clickResult.Kiesger) * 100, -1) +
" pct opkomst";
// +
// clickResult.Ongeldig +
// " ongeldige stemmen
" +
// clickResult.Blanco +
// " blanco stemmen
";
} else {
opkomstTekst = "" +
"Nog geen uitslag" +
"
";
jQuery('#toelichting').empty();
}
var grKopTekst = "Gemeente " +
clickResult.Gemnaam +
"
" +
clickResult.Kiesger +
" kiesgerechtigden, " +
opkomstTekst +
"
";
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 …
");
kaartVraag();
if(jQuery('#balk3').css('display') == 'none') {
toggle_balk3();
}
});
// de volgende 4 toggle-functies combineren door een toggle_iets('what') functie 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;
}
}
function uitslagGrafiek(data) {
jQuery( "#toelichting" ).empty();
var width = 230,
height = 230,
radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal()
.range(["#91BFDB", "#FC8D59"]);
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(radius - 70);
var pie = d3.layout.pie()
.sort(null)
.value(function (d) {
return d.p16;
});
var svg = d3.select("#toelichting").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function (d) {
return color(d.data.Keuze);
});
g.append("text")
.attr("transform", function (d) {
return "translate(" + arc.centroid(d) + ")";
})
//.attr("dy", ".85em")
.attr("dy", "-2.5em")
.style("text-anchor", "middle")
.text(function (d) {
return d.data.Keuze; })
.attr("x", 0)
.attr("y", 30)
.attr("class", "id")
.append("svg:tspan")
.attr("x", 0)
.attr("dy", 15)
.text(function(d) { return d.data.p16 + "%"; })
;
// hier de verschijning van de txt aanpassen
jQuery("text").css({"text-shadow": "-1px -1px 0 #E0E0E0, 1px -1px 0 #E0E0E0, -1px 1px 0 #E0E0E0, 1px 1px 0 #E0E0E0",
"font-size": "120%",
"font-weight": "bold"
});
jQuery("text").parent().append(jQuery("text"));
}
// Begin zoekfunctie
var zoekAdres;
function showLocation(zoekAdres) {
// Kleine patch voor Den Haag en Den Bosch (en Rotterdam, met zijn rare middelpunt... en een paar andere rare)
zoekAdres = zoekAdres.toLowerCase();
if ( zoekAdres == "den haag" ) {
zoekAdres = "\'s-gravenhage";
}
if ( zoekAdres == "den bosch" ) {
zoekAdres = "\'s-hertogenbosch";
}
if ( zoekAdres == "rotterdam" ) {
zoekAdres = "coolsingel rotterdam";
}
if ( zoekAdres == "bergen" ) {
zoekAdres = "dreef bergen";
}
if ( zoekAdres == "valkenburg" ) {
zoekAdres = "kerkstraat valkenburg";
}
if ( zoekAdres == "nieuw amsterdam" ) {
zoekAdres = "nieuw-amsterdam";
}
if ( zoekAdres == "rijswijk" ) {
zoekAdres = "rijswijk zh";
}
if (nmt.mapserver.search_visible) {
toggle_search();
}
jQuery('#address').val();
jQuery.ajax({
type: 'GET',
url: 'https://maps.nrc.nl/proxy_ov.php?zoekterm=' + zoekAdres,
dataType: 'xml',
success: function (xml) {
locationSuccess(xml, zoekAdres);
}
});
}
function locationSuccess(xml, zoekAdres) {
var bagAdres;
var bagType;
var vindPlaats;
var inZoom;
jQuery(xml).find('xls\\:GeocodedAddress,GeocodedAddress').each(function(index) {
bagType = jQuery(this).find('xls\\:place,place').attr('type');
vindPlaats = jQuery(this).find('xls\\:place,place').first().text();
if ( bagType == "MunicipalitySubdivision" && vindPlaats.toLowerCase() == zoekAdres ) {
bagAdres = jQuery(this).find('gml\\:pos,pos').text();
inZoom = 3;
return false;
}
else if ( bagType == "Municipality" && vindPlaats.toLowerCase() == zoekAdres ) {
bagAdres = jQuery(this).find('gml\\:pos,pos').text();
inZoom = 3;
return false;
}
else {
bagAdres = jQuery(this).find('gml\\:pos,pos').text();
inZoom = 3;
}
});
if ( typeof bagAdres == 'undefined' ) {
jQuery( '#grafiekKop' ).html("Geen plaats gevonden");
jQuery( '#toelichting' ).empty();
return false;
} else {
var pan = ol.animation.pan({
duration: 2000,
easing: ol.easing.bounce,
source: map.getView().getCenter()
});
map.beforeRender(pan);
var zoom = ol.animation.zoom({
resolution: map.getView().getResolution(),
duration: 2000,
easing: ol.easing.bounce,
source: map.getView().getZoom()
});
map.beforeRender(zoom);
var rdsXY = bagAdres.split(" ");
vraagPlek = ol.proj.transform([rdsXY[0], rdsXY[1]], rdsProjection, displayProjection);
map.getView().setCenter(vraagPlek);
map.getView().setZoom(inZoom);
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=x2a" + 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
});