viewof map = { var container = html`

`; //============== information window template ===================== var content = html`

${container}

`; yield content; //============== function for layers creation ==================== function layer(y) { const rv = { id: y.toString(), type: "circle", source: { type: "geojson", data: resElection }, layout: {}, paint: { "circle-color": { property: "L" + y.toString().slice(2, 4), type: "categorical", stops: color }, "circle-radius": [ "interpolate", ["linear"], ["zoom"], // when zoom is 4.7, set each feature's circle radius to the value of its "logPOP" property 4.7, ["*", 1, ["get", "logPOP"]], // when zoom is 12, set each feature's circle radius to 10 times the value of its "logPOP" property 12, ["*", 15, ["get", "logPOP"]] ], "circle-opacity": 0 } }; return rv; } //=============== Window bar chart label ================== var xlabel = d3 .scaleOrdinal() .domain([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]) .range([ "E99", "P02", "E04", "P07", "E09", "P12", "E14", "P17", "E19", "P22" ]); //============== Map loading ============================== let map = new mapboxgl.Map({ container, maxZoom: 12, minZoom: 4.7, center: [IHM.long, IHM.lat], zoom: IHM.zoomValue, style: blankStyle }); map.on("load", () => { container.value = map; container.dispatchEvent(new CustomEvent("input")); //========== information window update ================ map.on("mousemove", function (e) { const features = map.queryRenderedFeatures(e.point, { layers: years }); const d = features.length ? features[0].properties : undefined; const year = IHM.year.toString().slice(2, 4); d3.select("#titre").text(`${label(year)}`); d3.select("#tooltip-nom").text( "\u2022 Commune : " + (d ? `${d.NOM} - ${d.INSEE.slice(0, 2)}` : "") ); d3.select("#tooltip-liste").text( "\u2022 Candidat / Liste : " + (d ? d["L" + year] : "") ); d3.select("#tooltip-voix").text( "\u2022 Voix : " + (d ? d["VE" + year] + "%" : "") ); d3.select("#tooltip-pop").text( "\u2022 Population : " + (d ? dotFormat(d.POP) : "") ); d3.select("#tooltip-exprimes").text( "\u2022 Votes exprimés : " + (d ? dotFormat(d["E" + year]) : "") ); d3.selectAll("rect.bar").remove(); d3.selectAll("text.tbar").remove(); years .map((y) => y.slice(2, 4)) .forEach((y, i) => { d3.select("#tooltip-bar") .append("rect") .attr("class", "bar") .attr("y", d ? 80 - d["VE" + y] : 0) .attr("x", 6 + i * 20) .attr("height", d ? d["VE" + y] : 0) .attr("width", 16) .attr("stroke-width", 2) //.attr("stroke", y == year ? "white" :"none" ) .style("fill", colorListe(d ? d["L" + y] : "#000")); d3.select("#tooltip-bar") .append("text") .attr("class", "tbar") .attr("y", 90) .attr("x", 6 + i * 20) .style("font-size", "8px") .style("text-decoration", y == year ? "underline" : "none") .text(xlabel(i)); }); }); //========== Layer creation ======================== years.forEach((y) => map.addLayer(layer(y))); map.setPaintProperty("2022", "circle-opacity", 0.9); //========== Load cross symbol ====================== map.loadImage( "https://raw.githubusercontent.com/ToulouseDataViz/toulousedataviz.github.io/master/center_marker.png", function (error, image) { if (error) throw error; map.addImage("cross", image); } ); var active_layer = IHM.as; var action = 0; //========== User selection management=============== dispatch.on("input", (e) => { //=== Activate election date selected const y = IHM.year.toString(); d3.select("#titre").text(`${label(y.slice(2, 4))}`); years.forEach((y) => map.setPaintProperty(y, "circle-opacity", 0)); map.setPaintProperty(y, "circle-opacity", 0.9); //==== Remove cross layer if existing ============= if (active_layer != "") { map.removeLayer(active_layer); } //===== Generate unique id reference for cross layer ===== active_layer = IHM.as + 100 + Math.floor(Math.random() * Math.floor(899)); //===== define cases configuration according to user selection and excecution ====== if ( (IHM.fly == 1) & (parseInt(active_layer.slice(-5)) > 100) || active_layer.slice(-4, -3) == "A" || active_layer.slice(-4, -3) == "B" ) { action = 1; } if ( (IHM.fly == 0) & (IHM.lat != 47) & (parseInt(active_layer.slice(-5)) > 100) || active_layer.slice(-4, -3) == "A" || active_layer.slice(-4, -3) == "B" ) { action = 2; } if (IHM.reset == 1) { IHM.reset = 0; action = 3; } console.log("input", IHM); switch (action) { case 1: //== add cross layer === map.addLayer({ id: active_layer, type: "symbol", source: { type: "geojson", data: { type: "FeatureCollection", features: [ { type: "Feature", geometry: { type: "Point", coordinates: [IHM.long, IHM.lat] } } ] } }, layout: { "icon-image": "cross", "icon-size": 0.25 } }); map.flyTo({ center: [IHM.long, IHM.lat], speed: 0.5, zoom: IHM.zoomValue }); break; case 2: //== add cross layer === map.addLayer({ id: active_layer, type: "symbol", source: { type: "geojson", data: { type: "FeatureCollection", features: [ { type: "Feature", geometry: { type: "Point", coordinates: [IHM.long, IHM.lat] } } ] } }, layout: { "icon-image": "cross", "icon-size": 0.25 } }); break; case 3: map.flyTo({ center: [IHM.long, IHM.lat], speed: 0.5, zoom: IHM.zoomValue }); break; } }); }); }