map_multiple_departement = topohelper.fromGeojson(
data_multiple_departement_combined,
{deep: true}
)
.project({ proj: l93 })
.view({
tooltip: true,
zoom: true,
size: [
availableWidth > smallScreen ? availableWidth*0.4 : availableWidth*0.95, availableHeight * 0.6
]})
button_france = html`
${download_button(
create_url_france(selectedlevel, format, year, drom_rapproches, simplification_percent)
)}
`
button_departements = html`
${download_button(
create_url_departement(selected_departements, selectedlevel, format, year, simplification_percent)
)}
`
departement_shape = get_departement(
departement,
arrondissement ? "COMMUNE_ARRONDISSEMENT" : "COMMUNE",
"topojson",
year
)
data_multiple_departement_combined = {
if (selected_departements.length == 1){
return data_multiple_departement
}
return mergeGeoJSONs(data_multiple_departement)
}
data_multiple_departement = {
let topos ;
if (selected_departements.length == 1){
topos = get_departement(
selected_departements,
arrondissement ? "COMMUNE_ARRONDISSEMENT" : "COMMUNE",
"geojson",
year,
simplification_percent
)
return topos
}
topos = get_multiple_departement(
selected_departements,
arrondissement ? "COMMUNE_ARRONDISSEMENT" : "COMMUNE",
"geojson",
year,
simplification_percent
)
return topos
}
// Function to merge multiple GeoJSON FeatureCollections
function mergeGeoJSONs(geojsonList) {
// Initialize an empty FeatureCollection
const mergedGeoJSON = {
type: "FeatureCollection",
features: []
};
// Loop through all GeoJSON objects in the list
geojsonList.forEach(geojson => {
if (geojson.type === "Feature") {
// If it's a Feature, add directly to the features array
mergedGeoJSON.features.push(geojson);
} else if (geojson.type === "FeatureCollection") {
// If it's a FeatureCollection, add all its features to the features array
mergedGeoJSON.features = mergedGeoJSON.features.concat(geojson.features);
}
});
return mergedGeoJSON;
}
availableHeight = window.innerHeight
screenHeight = 0.9*(availableHeight - document.getElementById("quarto-header").offsetHeight)
availableWidth = window.innerWidth
mapWidth = (width > 400) ? 0.4*width : 0.95*width
mapHeight = (width > 400) ? 0.85*screenHeight : 0.5*screenHeight
smallScreen = 500
// Projection Lambert 93 (EPSG: 2154)
l93 = "+proj=lcc +lat_0=46.5 +lon_0=3 +lat_1=49 +lat_2=44 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs"
import {
button, url_file_available,
get_france, get_departement, liste_departements,
get_multiple_departement, create_url_departement, create_url_france,
to_single_geojson} from "@linogaliana/cartiflette-js"
import {create_projection2154, map_multiple_2154, map_multiple_4326, make_map, print_program_departement_single} from "@linogaliana/cartiflette-doc-utils"
function download_button(url) {
return `
<form method="get" action="${url}" target="_blank" rel="noopener noreferrer">
<button class="btn btn-download" type="submit">
<i class="fa-solid fa-download"></i> Download !
</button>
</form>
`;
}
viewof selectedlevel = Inputs.select(['DEPARTEMENT', 'REGION', 'BASSIN_VIE', 'AIRE_ATTRACTION_VILLES'], {label: "Zonage désiré:"})
viewof simplification_percent = Inputs.range([0, 50], {step: 50, value: 50, label: "Degré de simplification (%)"})
viewof arrondissement = Inputs.toggle({label: "Arrondissement dans les grandes villes ?", value: true})
level_arrondissement = arrondissement ? "COMMUNE_ARRONDISSEMENT" : "COMMUNE"
viewof simplification_percent_departement = Inputs.bind(
Inputs.range([0, 50], {step: 50, value: 50, label: "Degré de simplification (%)"}),
viewof simplification_percent
)
viewof langage_requete = Inputs.radio(
["Python", "Javascript" ,"R"], {label: "Langage de programmation pour les exemples de code"},
{value: null, format: x => x ?? "Python"}
)
viewof langage_requete_departements = Inputs.radio(
["Python", "Javascript" ,"R"], {label: "Langage de programmation pour les exemples de code"},
{value: null, format: x => x ?? "Python"}
)
viewof selected_departements = multiAutoSelect({
options: liste_departements,
placeholder: "Liste des départements",
value: ["75", "92", "93", "94"]
})
language_emprise = Inputs.bind(
Inputs.radio(
["Python", "Javascript" ,"R"], {label: "Langage de programmation pour les exemples de code"},
{value: null, format: x => x ?? "Python"}
),
viewof langage_requete
)
language_emprise_departements = Inputs.bind(
Inputs.radio(
["Python", "Javascript" ,"R"], {label: "Langage de programmation pour les exemples de code"},
{value: null, format: x => x ?? "Python"}
),
viewof langage_requete_departements
)
year_emprise = Inputs.bind(
Inputs.select(
["2022",], {label: "Année de la géographie de référence"}
),
viewof year
)
format_emprise = Inputs.bind(
Inputs.select(
["topojson", "geojson"],{label: "Format désiré:"}
),
viewof format
)
simplification_percent_emprise = Inputs.bind(
Inputs.range(
[0, 50], {step: 50, value: 50, label: "Degré de simplification (%)"}
),
viewof simplification_percent
)
langage_departements = langage_requete_departements == null ? "Python" : langage_requete_departements
// Function to display the code bloc to use Cartiflette for whole France
function print_program_france(langage, selectedlevel, format, year, rapproche_drom, simplification){
const filter_by = rapproche_drom ? "FRANCE_ENTIERE_DROM_RAPPROCHES" : "FRANCE_ENTIERE"
if (langage == "Python"){
return md`
from cartiflette import carti_download
shp_communes = carti_download(
values = ["France"],
crs = 4326,
borders = "${selectedlevel}",
vectorfile_format="${format}",
simplification=${simplification},
filter_by="${filter_by}",
source="EXPRESS-COG-CARTO-TERRITOIRE",
year=${year})
`
} else{
return md`
import {carti_download} from "@linogaliana/cartiflette-js"
carti_download({
value: "France",
crs: 4326,
borders: "${selectedlevel}",
vectorfile_format: "${format}",
simplification=${simplification},
filter_by: ${filter_by}",
source: "EXPRESS-COG-CARTO-TERRITOIRE",
year:${year}
})
`
}
}
Récupérer un fond de carte France entière
Récupérer un fond de carte sur une emprise limitée
grid_departements = {
let grid ;
if (availableWidth>smallScreen){
grid = html`
<div style="
background: #fff;
margin: 0;
border: none;
display: grid;
width: ${availableWidth};
grid-template-areas:
'selectors_departements map_departements choice-code_departements'
'. map_departements code_departements'
'. map_departements .'
'. map_departements .'
'download_departements map_departements .';
grid-template-columns: 23% 45% 32%;
">
<div name="selectors_departements" style="grid-area: selectors_departements; position: relative;">
${viewof selected_departements}
${year_emprise}
${format_emprise}
${simplification_percent_emprise}
${viewof arrondissement}
</div>
<div name="map_departements" style="grid-area: map_departements; position: relative;">
${map_multiple_departement}
</div>
<div name="code-bloc-departement" class="code-bloc">
<div name="choice-code_departements" style="grid-area: choice-code_departements; position: relative;">
${language_emprise_departements}
</div>
<div name="code_departements" style="grid-area: code_departements; position: relative;" class="code">
<span class="code-bloc-title">
Comment faire en <code>${langage_departements}</code> ${logo[langage_departements.toLowerCase()]}
</span>
${print_program_departement_single(langage_departements, selected_departements, selectedlevel, format, year)}
</div>
</div>
<div name="download-button_departements" style="grid-area: download_departements; position: relative;">
${button_departements}
</div>
</div>
`
return grid
}
grid = html`
<div style="
background: #fff;
margin: 0;
border: none;
display: grid;
width: ${availableWidth};
grid-template-areas:
'selectors_departements'
'map_departements'
'download_departements'
'choice-code_departements'
'code_departements';
grid-template-rows: auto auto auto auto auto;
grid-gap: 10px;
">
<div name="selectors_departements" style="grid-area: selectors_departements; position: relative;">
${viewof selected_departements}
${year_emprise}
${format_emprise}
${simplification_percent_emprise}
${viewof arrondissement}
</div>
<div name="map_departements" style="grid-area: map_departements; position: relative;">
${map_multiple_departement}
</div>
<div name="download-button_departements" style="grid-area: download_departements; position: relative;">
${button_departements}
</div>
<div name="code-bloc-departement" class="code-bloc">
<div name="choice-code_departements" style="grid-area: choice-code_departements; position: relative;">
${language_emprise_departements}
</div>
<div name="code_departements" style="grid-area: code_departements; position: relative;" class="code">
<span class="code-bloc-title">
Comment faire en <code>${langage_departements}</code> ${logo[langage_departements.toLowerCase()]}
</span>
${print_program_departement_single(langage_departements, selected_departements, selectedlevel, format, year)}
</div>
</div>
</div>
`
return grid
}
// Source: https://observablehq.com/@mbostock/dashboard
grid = {
let grid ;
if (availableWidth>smallScreen){
grid = html`
<div class="cartiflette-example" style="
background: #fff;
margin: 0;
border: none;
display: grid;
width: ${availableWidth};
grid-template-areas:
'selectors map choice-code'
'. map code'
'. map .'
'. map .'
'download map .';
grid-template-columns: 23% 45% 32%;
">
<div name="selectors" style="grid-area: selectors; position: relative;">
${viewof year}
${viewof selectedlevel}
${viewof format}
${viewof simplification_percent}
${viewof drom_rapproches}
</div>
<div name="map" style="grid-area: map; position: relative;">
${map_france}
</div>
<div name="code-bloc" class="code-bloc">
<div name="choice-code" style="grid-area: choice-code; position: relative;">
${viewof langage_requete}
</div>
<div name="code" style="grid-area: code; position: relative;" class="code">
<span class="code-bloc-title">
Comment faire en <code>${langage}</code> ${logo[langage.toLowerCase()]}
</span>
${print_program_france(langage, selectedlevel, format, year, drom_rapproches, simplification_percent)}
</div>
</div>
<div name="download-button" style="grid-area: download; position: relative;">
${button_france}
</div>
</div>
`
return grid
}
grid = html`
<div class="cartiflette-example" style="
background: #fff;
margin: 0;
border: none;
display: grid;
width: ${availableWidth};
grid-template-areas:
'selectors'
'map'
'download'
'choice-code'
'code';
grid-template-rows: auto auto auto auto auto;
grid-gap: 10px;
">
<div name="selectors" style="grid-area: selectors; position: relative;">
${viewof year}
${viewof selectedlevel}
${viewof format}
${viewof simplification_percent}
${viewof drom_rapproches}
</div>
<div name="map" style="grid-area: map; position: relative;">
${map_france}
</div>
<div name="download-button" style="grid-area: download; position: relative;">
${button_france}
</div>
<div name="code-bloc" class="code-bloc">
<div name="choice-code" style="grid-area: choice-code; position: relative;">
${viewof langage_requete}
</div>
<div name="code" style="grid-area: code; position: relative;" class="code">
<span class="code-bloc-title">
Comment faire en <code>${langage}</code> ${logo[langage.toLowerCase()]}
</span>
${print_program_france(langage, selectedlevel, format, year, drom_rapproches, simplification_percent)}
</div>
</div>
</div>
`
return grid
}