Carte des régions
Cliquez sur la carte pour obtenir la liste de toutes les actions innovantes par région.
<!--
function getXDomainRequest() {
var xdr = null;
if (window.XDomainRequest) {
xdr = new XDomainRequest();
} else if (window.XMLHttpRequest) {
xdr = new XMLHttpRequest();
} else {
alert("Votre navigateur ne gère pas l'AJAX cross-domain !");
}
return xdr;
}
function sendData(reg) {
var xdr = getXDomainRequest();
xdr.onload = function() {
return document.getElementById('web').innerHTML = xdr.responseText;
}
xdr.open("GET", "https://pollen.chlorofil.fr/wp-content/uploads/2016/02/scriptCarte/ajaxRequeteCarte.php?reg="+reg);
xdr.send();
$('html, body').animate({
scrollTop:$('#web').offset().top
}, 'slow');
}
-->
(function () { var timerResize; var resizeWindow = function () { window.location.reload(); } var temporiseResize = function () { window.clearTimeout(timerResize); timerResize = setTimeout(resizeWindow, 500); } d3.select(window).on('resize', temporiseResize); var imgx = document.getElementById('map'); var width = imgx.clientWidth; var height = imgx.clientWidth / 1.3; var path = d3.geo.path(); var guadeloupe = d3.geo.path(); var martinique = d3.geo.path(); var guyane = d3.geo.path(); var mayotte = d3.geo.path(); var reunion = d3.geo.path(); var myDiv = document.getElementById('map'); var projection = d3.geo.conicConformal().center([2.454071, 46.579229]).scale(width / 0.2).translate([width / 1.7, height / 2]); path.projection(projection); var projection2 = d3.geo.conicConformal().center([-61.48667, 16.13994]).scale(width / 0.14) .translate([width / 8, height / 4.5]); guadeloupe.projection(projection2); // la martinique est avec var projection4 = d3.geo.conicConformal().center([-52.94988, 5.15748]).scale(width / 0.85) .translate([width / 5.5, height / 22]); guyane.projection(projection4); var projection5 = d3.geo.conicConformal().center([45.12680, -12.82083]).scale(width / 0.14) .translate([width / 8.3, height / 1.63]); mayotte.projection(projection5); var projection6 = d3.geo.conicConformal().center([55.54619, -21.12067]).scale(width / 0.3) .translate([width / 6.2, height / 1.31]); reunion.projection(projection6); var svg = d3.select('#map').append("svg") .attr("width", width) .attr("height", height); var reg = svg .append("g") .attr("class", "geometry"); var deps = svg .append("g") .attr("class", "geometry"); var epl = svg .append("g") .attr("class", "geometry"); var fr = d3.select('#map').append("button"); fr //.attr("transform", "translate(180,290)") // .html(" Retour France entière") .style('display', 'none'); var url="/wp-content/uploads/2016/02/scriptCarte/data/carteFormco.json"; d3.json(url, function (req, geojson) { var features = epl .selectAll("path") .data(geojson.features); var colorScale = d3.scale.category10(); theme = function (path) { return features.enter() .append("path") .attr('class', 'epldata') .attr('fill', 'none') .attr('stroke', 'none') .attr("d", path) .call(d3.helper.tooltip( function (d, i) { // return utf8_decodeJS(d.properties.name); return d.properties.name; })) .on('click', function (d) { // var abbreviation = "Formations disponibles pour le dernier département sélectionné : " + "" + d.properties.name + "" + "" + "" + d.properties.recherche_formation + ""; // return document.getElementById('web').innerHTML = abbreviation; sendData(d.properties.code_dept); }) .attr("text", function (d) { return svg.selectAll(".labels") .data(geojson.features) .enter().append("text") .attr("class", "labels") .attr("fill", "none") .style("font-size", function (d) { if (d.properties.code_dept == "75" || d.properties.code_dept == "92" || d.properties.code_dept == "93" || d.properties.code_dept == "94") { return "5px"; } else { return "10px"; } ; }) .attr("x", function (d) { return path.centroid(d)[0]; }) .attr("y", function (d) { return path.centroid(d)[1]; }) .attr("text-anchor", "middle") .text(function (d) { return d.properties.code_dept; }) .call(d3.helper.tooltip( function (d, i) { // return utf8_decodeJS(d.properties.name); return d.properties.name; })) .on('click', function (d) { // var abbreviation = "Formations disponibles pour le dernier département sélectionné : " + "" + d.properties.name + "" + "" + "" + d.properties.recherche_formation + ""; // return document.getElementById('web').innerHTML = abbreviation; // sendData(d.properties.code_dept); //ajouté nath document.location.href='http://www.pollen.chlorofil.fr'; }) .style('z-index', -1) ; }) ; } theme(path); theme(guadeloupe); theme(guyane); theme(mayotte); theme(reunion); }); var url2="https://pollen.chlorofil.fr/wp-content/uploads/2016/02/scriptCarte/data/carteFormco2.json"; d3.json(url2, function (req, geojson3) { var features = reg .selectAll("path") .data(geojson3.features); var colorScale2 = d3.scale.category20().range(["#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#ffe8d2", "#d62728", "#a2becf", "#f7886d", "#c5b0d5", "#ffd168", "#d3cfd0", "#cacae0", "#f7b6d2", "#c7b7a6", "#bcdcf3", "#cce4c0", "#17becf", "#393b79", "#637939", "#7b4173", "#5254a3", "#6b6ecf", "#9c9ede"]); regions = function (path) { return features.enter() .append("path") .attr('class', 'reg') .attr('fill', function (d) { return colorScale2(+d.properties.reg_num); }) .attr('stroke', 'black') .attr("d", path) // .on('mouseover', function(d) { // var abbreviation = "Région : " + d.properties.name; // return document.getElementById('name').innerHTML=abbreviation;}) // .on('mouseout', function(d) { // var abbreviation = ''; // return document.getElementById('name').innerHTML=abbreviation;}) // .call(d3.helper.tooltip( function(d, i){ return d.properties.name;})) // .call(d3.helper2.tooltip2( function(d, i){ return d.properties.name;})) .call(d3.helper2.tooltip2(function (d, i) { d3.select('#map').selectAll('button.tooltip2').style('display', 'none'); // return utf8_decodeJS(d.properties.name); return d.properties.code_reg; })) //.call(function(d,i) {d3.helper2.tooltip2( function(d, i){ return d.properties.name;});}) // .on("mouseover", lol) .on('click', function (d) { // countyClickHandler(d); // myFunction(); // sendData(d.properties.name); var myUrl="http://pollen.chlorofil.fr/frm_display/51/?fregion="; switch (d.properties.name) { case "Auvergne-Rhône-Alpes": myUrl=myUrl+"Auvergne-Rhône-Alpes"; break; case "Bourgogne-Franche-Comté": myUrl=myUrl+"Bourgogne-Franche-Comté"; break; case "ÃŽle-de-France": myUrl=myUrl+"Ile-de-France"; break; case "Provence-Alpes-Côte d'Azur": myUrl=myUrl+"Provence-Alpes-Côte d'Azur"; break; case "Guyane française": myUrl=myUrl+"Guyane"; break; case "La Réunion": myUrl=myUrl+"La Réunion"; break; case "Languedoc-Roussillon-Midi-Pyrénées": myUrl=myUrl+"Occitanie"; break; case "Aquitaine-Limousin-Poitou-Charentes": myUrl=myUrl+"Nouvelle-Aquitaine"; break; case "Alsace-Champagne-Ardenne-Lorraine": myUrl=myUrl+"Grand Est"; break; case "Nord-Pas-de-Calais-Picardie": myUrl=myUrl+"Hauts-de-France"; break; default: myUrl=myUrl+d.properties.name; } document.location.href=myUrl; }) //.attr("text", function(d) {return svg.selectAll(".labels_reg").data(geojson3.features).enter().append("text").attr("class", "labels_reg").attr("fill", "").style("font-size","5px").text(function(d) {return d.properties.name;});}) ; } //region = function() {d3.select(this).append("region_but").attr("transform", "translate(400,290)").attr("text", function(d) {return svg.selectAll(".labels_reg").data(geojson3.features).enter().append("text").attr("class", "labels_reg").attr("fill", "").style("font-size","5px").text(function(d) {return d.properties.name;});}).style('display',''); } regions(path); regions(guadeloupe); regions(guyane); regions(mayotte); regions(reunion); //svg.append("path").attr("class", "region_but").attr("d", region).attr("transform", "translate(180,290)").attr('fill','purple'); }); var abbreviation = "Cliquer sur une région pour zoomer"; return document.getElementById('web').innerHTML = abbreviation; function myFunction() { d3.select('#map').selectAll('button.tooltip2').style("display", ''); } ; var centered; function countyClickHandler(d) { var x, y; var k; if (d && centered !== d) { var centroid = path.centroid(d); x = centroid[0]; y = centroid[1]; if (d.properties.reg_num == "11") {// rajouter ici les autres iles k = 8; } else if (d.properties.reg_num == "75") { // rajouter ici la guyane k = 2.3; } else { k = 3.5; } ; centered = d; } else { x = width / 2; y = height / 2; k = 1; centered = null; } var colorScale2 = d3.scale.category20().range(["#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#ffe8d2", "#d62728", "#a2becf", "#f7886d", "#c5b0d5", "#ffd168", "#d3cfd0", "#cacae0", "#f7b6d2", "#c7b7a6", "#bcdcf3", "#cce4c0", "#17becf", "#393b79", "#637939", "#7b4173", "#5254a3", "#6b6ecf", "#9c9ede"]); var trStr = "translate(" + width / 2 + "," + height / 2 + ")" + "scale(" + k + ")translate(" + -x + "," + -y + ")"; reg.selectAll("path") .classed("active", centered && function (d) { return d === centered; }) .attr('fill', 'none') .attr('stroke', 'none') //.call(d3.helper2.tooltip2(function(d, i){ return d.properties.name; tooltipDiv2.style("display", '');})) //.call(d3.helper2.tooltip2(function(d, i){ d3.select('body').selectAll('button.tooltip2').style('display',''); return d.properties.name; d3.select('body').selectAll('button.tooltip2').style("display", '');})) //.selectAll('button.tooltip2').style('display','') ; reg.transition().duration(1000).attr("transform", trStr); epl.selectAll("path") // .classed("active", centered && function(d) { return d === centered; }) .attr('fill', function (d) { return colorScale2(+d.properties.code_reg); }) .attr('stroke', 'white') ; epl.transition() .duration(1000) .attr("transform", trStr) ; svg.selectAll(".labels") .attr("fill", "black") ; svg.selectAll(".labels").transition().duration(1000).attr("transform", trStr); fr .on("click", countyClickHandler2b) // .html("Retour à la France entière") .style('display', ''); var abbreviation = "Cliquer sur un département pour afficher les formations"; return document.getElementById('web').innerHTML = abbreviation; svg.select(".labels_reg") .attr("fill", "black") ; //region.style('display',''); } ; var centered; function countyClickHandler2b(d) { var x, y, k; if (d && centered !== d) { var centroid = path.centroid(d); x = centroid[0]; y = centroid[1]; k = 2.5; centered = d; } else { x = width / 2; y = height / 2; k = 1; centered = null; } var colorScale2 = d3.scale.category20().range(["#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#ffe8d2", "#d62728", "#a2becf", "#f7886d", "#c5b0d5", "#ffd168", "#d3cfd0", "#cacae0", "#f7b6d2", "#c7b7a6", "#bcdcf3", "#cce4c0", "#17becf", "#393b79", "#637939", "#7b4173", "#5254a3", "#6b6ecf", "#9c9ede"]); d3.select('body').selectAll('button.tooltip2').remove(); reg.selectAll("path") .attr('fill', function (d) { return colorScale2(+d.properties.reg_num); }) .attr('stroke', 'black') // .call(d3.helper2.tooltip2( function(d, i){ return d.properties.name;})) //.call(d3.helper2.tooltip2(function(d, i){ d3.select('body').selectAll('button.tooltip2').style('display','none'); return d.properties.name; d3.select('body').selectAll('button.tooltip2').style("display", 'none');})) ; var trStr2 = "translate(" + width / 2 + "," + height / 2 + ")" + "scale(" + k + ")translate(" + -x + "," + -y + ")"; reg.transition() .duration(1000) .attr("transform", trStr2) ; epl.selectAll("path") .attr('fill', 'none') .attr('stroke', 'none') ; epl.transition() .duration(1000) .attr("transform", trStr2) ; svg.selectAll(".labels") .attr("fill", "none") ; svg.selectAll(".labels").transition().duration(1000).attr("transform", trStr2); fr.style('display', 'none'); var abbreviation = "Cliquez sur une région pour zoomer"; return document.getElementById('web').innerHTML = abbreviation; } ; }());