Légendes
Cette section à pour but de montrer quelques exemples d'utilisation des légendes de carte:
- La légende s'appuie toujours sur le rendu défini dans le style de carte
- La légende permet pour l'instant de tester les valeurs d'une seule propriété de la feature
- Cette démo montre l'exemple de:
- Légende fixe
- Toutes la valeurs de la légende sont affichées en utilisant les properties + additionalProperties
- "Automatique"
- La légende teste toutes les valeurs unitaires d'une propriété et génère la légende en l'utilisant en combinaison de additionalProperties
- Applique le style à chacune de ces valeurs et utilse la valeur comme libellé
- Découverte
- La légende utilise un dictionnaire pour retrouver la valeur d'une propriété et afficher un label
- Utilise la valeur et génère la légende en l'utilisant en combinaison de additionalProperties
- Les valeurs en dehors du dictionnaire son regroupée sous une valeur "fallback"
- Légende fixe
- Des options pour minZoom / maxZoom sur la légende
- Des options pour appliquer un zoom lors de la génération du style de légende
- Modifier les options de légende via API
- Masquable oui/non
- Hauteur max
- Titre
- Afficher ou masquer la légende par API
- Afficher ou masquer via la toolbar Mapviewer
Démo
{
"jsLib": [
"https://karteis.sct.saas-gfi.eu/dist/mapviewer/latest/karteis-mapviewer-var.js"
]
}
<!-- Ne pas utiliser dans votre code -->
<!-- La déclaration du css n'est utile que pour l'affichage sur le site d'exemples -->
<link rel="stylesheet" href="/mapviewer/mapviewer.css">
<!-- Ne pas utiliser dans votre code -->
<!-- Dans nos exemple on utilise font-awesome pour afficher les icones de boutons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Le div qui sera utilisé pour injecter la carte -->
<div id="kmap" style="height:350px;" />
<button onclick="changeLegendOptions()" >Modifier les options de légende</button>
<button onclick="hideLegend()" >Masquer la légende</button>
<button onclick="showLegend()" >Afficher la légende</button>
// Initialisation de la carte avec ses plugins
const kmapvInstance = (new kmapv.Mapviewer({
mapdiv: document.getElementById('kmap'), // Il est aussi possible d'utiliser directement l'id du div contenant la carte
projection: 'EPSG:3857',
defaultCenter: [673336.2187669694, 6303500.5366335241],
defaultZoom: 18,
minZoom: 5,
maxZoom: 22,
}))
.use(kmapv.CommonLayer({})) // charge le plugin générique des calques
.use(kmapv.BackgroundLayer({})) // charge le plugin de prise en charge des fond de plans
.use(kmapv.DataLayer({})) // chage le plugin de prise en charge des couche de données
// Ajout du fond de plan OSM
kmapvInstance.backgroundLayer.addOSM('background', { title: 'open street map', zIndex: 0 })
// styles des données
const stylesOuvs = {
BRT: kmapv.Services.createStyle(
{
// style des points
circle: {
radius: 5,
fill: {
color: 'rgba(200, 50, 50, 0.6)',
},
stroke: {
color: 'rgba(200, 50, 50, 0.9)',
width: 1,
}
}
}),
default: kmapv.Services.createStyle(
{
// style des points
circle: {
radius: 5,
fill: {
color: 'rgba(170, 170, 170, 0.6)',
},
stroke: {
color: 'rgba(136, 136, 136, 0.9)',
width: 1,
}
}
})
}
const stylesCans= {
EU: kmapv.Services.createStyle({
// style les lignes
stroke: {
color: 'rgba(255, 0, 0, 1)',
width: 2,
},
}),
UN: kmapv.Services.createStyle({
// style les lignes
stroke: {
color: 'rgba(0, 255, 0, 1)',
width: 2,
},
}),
EP: kmapv.Services.createStyle({
// style les lignes
stroke: {
color: 'rgba(70, 130, 180, 1)',
width: 2,
},
}),
default: kmapv.Services.createStyle({
// style les lignes
stroke: {
color: '#333',
width: 2,
},
})
}
const stylesSelected = kmapv.Services.createStyle(
{
// remplissage des polygones
fill: {
color: 'rgba(0,0,255,0.1)',
},
// style les lignes
stroke: {
color: '#00F',
width: 2,
},
// style des points
circle: {
radius: 10,
fill: {
color: 'rgba(0,0,255,0.3)',
},
stroke: {
color: '#00F',
width: 2,
}
}
})
const getStyleCans = ({ feature, selected }) => {
const typRes = feature.get("TYPRES")
return selected ? stylesSelected : stylesCans[typRes] || stylesCans.default
}
const getStyleOuvs = ({ feature, selected }) => {
const typologie = feature.get("TYPOLOGIE")
return selected ? stylesSelected : stylesOuvs[typologie] || stylesOuvs.default
}
// Ajout d'un calque de données
kmapvInstance.dataLayer.addDataLayer({
title: "Canalisations",
idGroup: 'data',
zIndex: 1,
layerId: 'cans',
selectable: true,
style: getStyleCans,
legends: [
{
// la légende va découvrir les valeurs unitaire de la propriété TYPRES
// et appliquer le style du calque "getStyleCans"
// le libellé sera la valeur de la propriété
order:0,
label:'Type de réseau',
property:'TYPRES',
},
{
// la légende va ajouter un élement par "values"
// et appliquer le style du calque "getStyleCans"
// on teste le style avec la proprieté 'TYPRES' = value
// le libellé le texte 'label'
// ne pas oublier de renseigner geometryType car on ne sait pas quelle type de données
// la fonction de style utilise
order:2,
label:'Réseau EP/EU',
sublabel:'Legende fixe',
// propriétés qui peuvent être ajoutée à chaque génération d'imagette (par exemple si la fonction de style a besoin de ces propriétés)
/*additionalProperties: {
PROP1: 'test value 1',
PROP2: 'test value 2',
},*/
// force la génération de légende avec ce niveau de zoom (par exemple si la fonction de style est fonction du zoom)
// zoom : 18,
// cette légende va s'afficher sur une visibilité restreinte :
minZoom: 17,
maxZoom: 22,
values:[{
label: 'Eau usée',
geometryType: 'LineString',
properties: {
TYPRES: 'EU'
}
},
{
label: 'Eau pluviale',
geometryType: 'LineString',
properties: {
TYPRES: 'EP'
}
}]
}
]
})
// Ajout d'un calque de données
kmapvInstance.dataLayer.addDataLayer({
title: "Ouvrages",
idGroup: 'data',
zIndex: 1,
layerId: 'ouvs',
selectable: true,
minZoom: 17,
maxZoom: 22,
style: getStyleOuvs,
legends: [
{
// la légende va découvrir les valeurs unitaire de la propriété TYPOLOGIE
// et appliquer le style du calque "getStyleOuvs"
// les valeurs autres que celles indiquées dans "discoverValues" seront regroupée ensemble
// le libellé sera la valeur en face de discoverValues (Branchement pour les données 'BRT')
// et 'Autre' (discoverValuesFallback) pour toutes les autres valeurs
order:1,
label:'Typologie',
property:'TYPOLOGIE',
discoverValues: {
BRT:'Branchement',
},
//discoverValuesFallback : false on affiche pas les fallback
discoverValuesFallback: {
label: 'Autre',
},
},
]
})
// ajout des données au format geojson dans le calque
// !!!! Dans CODEPEN remplacer ../../../../datas/features-base.json par https://karteis.sct.saas-gfi.eu/documentation/datas/features-base.json
fetch('../../../../datas/feature-cans.json').then(function (response) {
return response.json();
}).then((data) => {
kmapvInstance.dataLayer.addGeojsonFeatures({
type: 'FeatureCollection',
features: data.features,
}, 'cans')
})
fetch('../../../../datas/feature-ouvs.json').then(function (response) {
return response.json();
}).then((data) => {
kmapvInstance.dataLayer.addGeojsonFeatures({
type: 'FeatureCollection',
features: data.features,
}, 'ouvs')
})
// ajout a la toolbar:
kmapvInstance.horizontalToolbar.addLayerLegendTool()
// ajout du layermanager :
kmapvInstance.horizontalToolbar.addLayerManagerTool({
reordering: false // on ne veut pas réorganiser les calques
})
function changeLegendOptions() {
kmapvInstance.legendManager.setOptions({
maxHeight:'200px',
title:'nouveau titre',
closeable:false,
})
}
function hideLegend() {
kmapvInstance.legendManager.hide()
}
function showLegend() {
kmapvInstance.legendManager.show()
}
table {
margin-top: 3px;
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
cursor: pointer;
border: 1px solid #dddddd;
text-align: left;
}
tr:nth-child(even) {
background-color: #dddddd;
}