Utilisation du survol avancée

Cette section à pour but de montrer l'utilisation du survol pour interragir avec l'application:

Gestion de l'évènement pour passer une feature a l'état "activée"
- Style de la feature en fonction de son état "activée" (activated au lieu de hovered)
  - L'activation des feature est un état stockée en mémoire tant que le navigateur est ouvert
- Survoler le tableau permet aussi de passer une feature a l'état activé via l'api
Utilisation d'une fonction handleCancelHover afin de démontrer une désactivation survol en fonction de l'état de l'application
Affichage d'une info-bulle au survol d'une feature via le plugin "tooltip"
Affichage dans la console de la feature survolée

Démo de survol

{
  "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;" />
<div style="display:flex;flex-direction:row;">
    <table style="width:100px">
      <tr>
        <th>Feature</th>
      </tr>
      <tr class="row" id="feat-1" onmouseenter="onMouseEnter(1)" onmouseleave="onMouseLeave(1)" >
        <td>Point 1</td>
      </tr>
      <tr class="row" id="feat-2" onmouseenter="onMouseEnter(2)" onmouseleave="onMouseLeave(2)" >
        <td>Point 2</td>
      </tr>
      <tr class="row" id="feat-3" onmouseenter="onMouseEnter(3)" onmouseleave="onMouseLeave(3)" >
        <td>Polygon 3</td>
      </tr>
      <tr class="row" id="feat-4" onmouseenter="onMouseEnter(4)" onmouseleave="onMouseLeave(4)" >
        <td>Ligne 4</td>
      </tr>
    </table>
    <div>
        <label><input type="checkbox" id="cancel_hover">Survol de la carte inactif quand je suis coché</label>
    </div>
</div>

// 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,

    interactions: {
        hover: {
            handleCancelHover:function() {
                // l'interaction survol peut-être conditionnées par une fonction
                return document.querySelector("#cancel_hover").checked
            }
        }
    }
}))
 .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
 .use(kmapv.Tooltips({})) // charge le plugin de gestion des tooltips

// Ajout du fond de plan OSM
kmapvInstance.backgroundLayer.addOSM('background', { title: 'open street map', zIndex: 0 })


// styles des données
const styles = kmapv.Services.createStyle(
{
    // remplissage des polygones
    fill: {
        color: 'rgba(200,200,200,0.5)',
    },
    // style les lignes
    stroke: {
        color: '#333',
        width: 2,
    },
    // style des points
    circle: {
        radius: 10,
        fill: {
            color: '#aaa',
        },
        stroke: {
            color: '#333',
            width: 2,
        }
    }
})

// styles des données
const stylesHovered = kmapv.Services.createStyle(
{
    // remplissage des polygones
    fill: {
        color: 'rgba(200,200,200,0.5)',
    },
    // style les lignes
    stroke: {
        color: '#F00',
        width: 2,
    },
    // style des points
    circle: {
        radius: 10,
        fill: {
            color: '#aaa',
        },
        stroke: {
            color: '#F00',
            width: 2,
        }
    }
})

// le calque va utiliser en entrée une fonction de style
// en entrée la feature Openlayer, la résolution de la carte ("son zoom") et est-ce que la feature est considéré sélectionnée par le viewer
const getStyle = function ({ feature, resolution, activated }) {
    return activated ? stylesHovered : 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,
})

// 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/features-base.json').then(function (response) {
    return response.json();
  }).then((data) => {
    kmapvInstance.dataLayer.addGeojsonFeatures({
        type: 'FeatureCollection',
        features: data.features,
    }, 'identifiant-du-calque')
})

// On va écouter les évenements générés par le viewer
kmapvInstance.on('hover-enter', (evt) => {
    console.log("feature enter", evt.feature)
    // mets a jour le tableau
    document.querySelector("#feat-" + evt.feature.getId()).classList.add("hover")
    // active la feature
    kmapvInstance.dataLayer.activeOlFeature(evt.feature)

    showTooltip(evt.feature)
})

kmapvInstance.on('hover-leave', (evt) => {
    // masque le tooltip
    console.log("feature leave", evt?.feature)
    kmapvInstance.tooltips.deleteTooltip()
    if (evt.feature) {
       // puis remets les features et tableau dans leur état d'origine
       document.querySelector("#feat-" + evt.feature.getId()).classList.remove("hover")
       kmapvInstance.dataLayer.desactiveOlFeature(evt.feature)
    }
})


function onMouseEnter (id) {
    console.log("Enter line",id)
    document.querySelector("#feat-" + id).classList.add("hover")
    kmapvInstance.dataLayer.activeFeature(id,'identifiant-du-calque')

    const feature = kmapvInstance.dataLayer.getFeature(id,'identifiant-du-calque')
    showTooltip(feature)

}
function onMouseLeave (id) {
    console.log("Leave line",id)
    kmapvInstance.tooltips.deleteTooltip()
    document.querySelector("#feat-" + id).classList.remove("hover")
    kmapvInstance.dataLayer.desactiveFeature(id,'identifiant-du-calque')
}

function showTooltip(feature) {

    // affiche un tooltip au centre de la géométrie
    const properties = feature.getProperties()
    const tooltip = `<div class="tooltip">
                    <span><label>Type</label>${properties.type}</span>
                    <span><label>Valeur</label>${properties.valeur}</span>
                    </div>`

    kmapvInstance.tooltips.createTooltip(tooltip,kmapv.Services.getCentroid(feature.getGeometry()))

}




table {
  margin-top: 3px;
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.row.hover {
  background-color: #F00;
  color:white;
}

.tooltip {
  display:flex;
  flex-direction:column;
}

.tooltip label {
    font-weight: bold;
    display:inline-block;
    width: 60px
}

# Utilisation du survol avancée

Utilisation du survol avancée