Badge

Retour

Cette section à pour but de montrer quelques exemples d'utilisation de stylisation des features avec des badges:

• les formes possibles sont none|circle|poi|bubble|marker|coma|shield|blazon|bookmark|hexagon|diamond|triangle|sign|ban|lozenge|square
• chaques propriété spécifique au badge peut être une fonction renvoyant la valeur ou la valeur

style de badge

{
  "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:300px;" />
<select onchange="updatePosition(this.value)">
  <option value="auto">automatique</option>
  <option value="center">center</option>
  <option value="top-right">top-right</option>
  <option value="top-left">top-left</option>
  <option value="bottom-right">bottom-right</option>
  <option value="bottom-left">bottom-left</option>
</select>
<select onchange="updateStyle(this.value)">
  <option value="auto">from feature property</option>
  <option value="circle" selected>circle</option>
  <option value="sign">sign</option>
  <option value="lozenge">lozenge</option>
  <option value="square">square</option>
  <option value="shield">shield</option>
  <option value="diamond">diamond</option>
  <option value="ban">ban</option>
</select>

// données au format geojson
const features = [
{
    id: 1,
    type:'Feature',
    geometry: {
        type:'Point',
        coordinates: [-444750, 6094320]
    },
    properties: {
        type:'Je suis un point',
        valeur: 'petite',
        compteur: 5,
        form:'sign'
    }
},
{
    id: 2,
    type:'Feature',
    geometry: {
        type:'Point',
        coordinates: [-444700, 6094320]
    },
    properties: {
        type:'Je suis un point',
        valeur: 'moyen',
        compteur: 19,
        form:'sign'
    }
},
{
    id: 3,
    type:'Feature',
    geometry: {
        type:'Point',
        coordinates: [-444700, 6094480]
    },
    properties: {
        type:'Je suis un point',
        valeur: 'moyen',
        compteur: 700,
        form:'circle'
    }
},
{
    id: 4,
    type:'Feature',
    geometry: {
        type:'Polygon',
        coordinates: [
        [
            [-444850, 6094520],
            [-444800, 6094520],
            [-444750, 6094495],
            [-444800, 6094470],
            [-444850, 6094470],
            [-444850, 6094520]
        ]
    ]
    },
    properties: {
        type:'Je suis un polygon',
        valeur: 'grande',
        compteur: 58,
        form:'circle'
    }
},
{
    id: 5,
    type:'Feature',
    geometry: {
        type:'LineString',
        coordinates: [
            [-444950, 6094450],
            [-444900, 6094520],
            [-444850, 6094555],
            [-444800, 6094550],
    ]
    },
    properties: {
        type:'Je suis une ligne',
        valeur: 'grande',
        compteur: 7,
        form:'diamond'
    }
}


]
// déclaration d'une bibilthèque de glyphs
kmapv.Services.addFontDef({
    "font":"\"Font Awesome 6 Free\"",
    "name":"Font Awesome 6 Free",
    "copyright":"SIL OFL 1.1",
    "prefix": "fa"
  },{
    "fa-person-hiking": '\uf6ec',
    "fa-camera": '\uf030',
  })


// 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: [-444800, 6094400],
    defaultZoom: 17,
    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 })

let position = null
let style = "circle"

// change le style du calque
function updatePosition(value) {
  position = value === "auto" ? null : value
  kmapvInstance.refreshMap()
}
function updateStyle(value) {
  style = value === "auto" ? null : value
  kmapvInstance.refreshMap()
}

const styles = kmapv.Services.createStyle([
      kmapv.Services.styleHelpers.square,
      kmapv.Services.styleHelpers.polygon,
      kmapv.Services.styleHelpers.line,
      {
        badge: {
          property: 'compteur',
          form: (feature) => {return style ? style: feature.get("form")}, // on utilise une fonction pour avoir une forme dynamique
          position: () =>  position, // on utilise une fonction pour avoir une position dynamique
        }}
    ])

// Ajout d'un calque de données
kmapvInstance.dataLayer.addDataLayer({
    title: "Calque de donnée",
    idGroup: 'data',
    zIndex: 1,
    layerId: 'identifiant-du-calque',
    selectable: true,
    hoverable: true,
    style: styles,
})

// ajout des données dans le calque
kmapvInstance.dataLayer.addGeojsonFeatures({
    type: 'FeatureCollection',
    features,
}, 'identifiant-du-calque')