fontSymbol

Cette section à pour but de montrer quelques exemples d'utilisation de stylisation des points via fontSymbol:

Cette api est basé sur ol-ext:FontSymbol docopen in new window Exemplesopen in new window
les formes possibles sont none|circle|poi|bubble|marker|coma|shield|blazon|bookmark|hexagon|diamond|triangle|sign|ban|lozenge|square
on peut ajouter un text via l'option "text"
- Le texte peut être "normal" ou le nom d'un symbole d'une librairie
  - exemple: '\f6ec' pour cette icone font-awesomeopen in new window
On peut déclarer des "glyphs" afin de consommer plus facilement une librairie (voir addFontDef dans le code)

style de point

{
  "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="updateStyle(this.value)">
    <option value="0">carré</option>
    <option value="cercle-rouge">Cercle rouge</option>
    <option value="cercle-bleu">Cercle bleu avec texte</option>
    <option value="warning-orange">warning avec texte</option>
    <option value="randonneur-noglyph">randonneur (sans glyph)</option>
    <option value="randonneur">randonneur (avec glyph)</option>
    <option value="no-camera">no caméra</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
    }
},
{
    id: 2,
    type:'Feature',
    geometry: {
        type:'Point',
        coordinates: [-444700, 6094320]
    },
    properties: {
        type:'Je suis un point',
        valeur: 'moyen',
        compteur: 19
    }
},
{
    id: 3,
    type:'Feature',
    geometry: {
        type:'Point',
        coordinates: [-444700, 6094480]
    },
    properties: {
        type:'Je suis un point',
        valeur: 'moyen',
        compteur: 700
    }
},
]
// 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 })

// styles des données
let styles =null

// change le style du calque
function updateStyle(id) {

  switch (id) {

    case "cercle-rouge":
      // on peut utiliser une des formes suivantes:
      styles = kmapv.Services.createStyle({
          fontSymbol: {
            form:"circle",
            radius: 12,
            fill: {color:"#FFF"},
            stroke: {color:"red", width:3},
          }
      })

      break
    case "cercle-bleu":
      styles = function({feature}) {
        return kmapv.Services.createStyle({
            fontSymbol: {
              form:"circle",
              radius: 15,

              text: 5,
              fontSize:0.6,
              color:"black",

              fill: {color:"#FFF"},
              stroke: {color:"blue", width:3},
            }
        })
      }
      break
    case "warning-orange":
      // ici l'api va essayer d'adapter la taille de l'iconne a la taille du texte
      styles = function({feature}) {
        const text = feature.get("compteur").toString()
        return kmapv.Services.createStyle({
            fontSymbol: {
              form:"sign",
              radius: 20,

              text: feature.get("compteur"),
              fontSize: "auto",
              color:"black",

              fill: {color:"#FFF"},
              stroke: {color:"orange", width:4},
            }
        })
      }
      break
    case "randonneur":
      styles = function({feature}) {

        return kmapv.Services.createStyle({
            fontSymbol: {
              //form:"none",
              radius: 20,
              fontStyle: "900", // requis pour font-awesome
              glyph: 'fa-person-hiking',
              color:"orange",

            }
        })
      }
      break
    case "randonneur-noglyph":
      styles = function({feature}) {

        return kmapv.Services.createStyle({
            fontSymbol: {
              radius: 20,
              font:"\"Font Awesome 6 Free\"",
              text:"\uf6ec",
              fontStyle: "900", // requis pour font-awesome
              color:"red",

            }
        })
      }
      break
    case "no-camera":
      styles = function({feature}) {

        return kmapv.Services.createStyle({
            fontSymbol: {
              form:"ban",
              radius: 20,

              fontStyle: "900", // requis pour font-awesome
              glyph: 'fa-camera',
              color:"black",
              fontSize:0.7,

              fill: {color:"#FFF"},
              stroke: {color:"red", width:4},
            }
        })
      }
      break

    default:
      styles = kmapv.Services.createStyle(kmapv.Services.styleHelpers.square)
      break
  }
  kmapvInstance.refreshMap()
  return
}

updateStyle()

// on passe par une fonction pour renvoyer le style demandé*
function getStyle(args) {
    return typeof styles === 'function' ? styles(args) : styles
}

// 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: getStyle,
})

//updateStyle()

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

# fontSymbol

fontSymbol