Mapviewer

Mapviewer est un module javascript permettant d'intégrer une vue cartographique dans une application web.

La vue cartographique est exécutée côté client dans le navigateur web. Elle est capable d'utiliser des services webs cartographiques pour afficher des données. Il est possible via son api de lui injecter des données au format geojson

Télécharger mapviewer

Mapviewer est disponible sur notre dépôt Nexus

Bien démarrer

Une fois téléchargée, Mapviewer peut être intégrer via se version var

Vous pouvez intégrer le module dans votre page html via une balise script :

<script src="/js/karteis-mapviewer-var.min.js" />

Une fois importée dans votre page html, le module est accessible via une variable globale : kmapv

Usage basic du Mapviewer

{
  "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">

<h3> Affichage d'une carte OSM et données vectorielles</h3>
<!-- Le div qui sera utilisé pour injecter la carte -->
<div id="kmap" style="height:300px;" />

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

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

  // ajout de features au format geojson
  const features = [
    {
        id: 1,
        type:'Feature',
        geometry: {
          type:'Point',
          coordinates: [-444750, 6094320]
        }
    },
    {
        id: 2,
        type:'Feature',
        geometry: {
          type:'Polygon',
          coordinates: [
            [
                [-444850, 6094520],
                [-444800, 6094520],
                [-444750, 6094495],
                [-444800, 6094470],
                [-444850, 6094470],
                [-444850, 6094520]
            ]
        ]
        }
    }
  ]

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