UNIDOO Library

# MapGeoFeatures

# Description

Affiche des features sur une carte à partir d'un flux GeoJSON.
Ces features peuvent être :

  • des trajectoires de plusieurs vols (forme ligne, multi-ligne)
  • des sites représentés par un point dont la forme est paramétrable : cercle, triangle, carré ...
  • des zones géographiques (forme polygone).
    Cliquer sur une forme géométrique affiche une popup avec les propriétés associées à chaque feature.

# Utilisation

Pour utiliser ce composant il faut installer (opens new window) la librairie unidoo dans le projet et insérer le tag unidoo-map-geofeatures dans un composant v-app. Les 2 points ":" avant les noms de propriétés (e.g :title) permettent de passer des variables au composant comme ci-dessous :

      <unidoo-map-geo-features
        :title="title"
        :service-url="serviceUrl"
        :color-title="colorTitle"
        :color-feature="colorFeature"
        :color-of-selected-feature="colorOfSelectedFeature"
        :shape-style-point="shapeStylePoint"
        :banned-keys="bannedKeys"
        :disable-popup="disablePopupProperties"
        :no-title-in-popup-with-one-feature="noTitleInPopupWithOneFeature"
      ></unidoo-map-geo-features>

NB : Le composant peut également être utilisé directement en tant que custom element dans une page HTML ou dans Wordpress dans le Block VUE JS. Prérequis :
Ajouter les éléments suivant dans le header de la page HTML ou dans le Block Wordpress correspondant :

  • l'adresse du CDN contenant le package du composant @sedoo/unidoo suivi du numéro de version (ici 0.1.30) avec le lien suivant <script src="https://unpkg.com/@sedoo/unidoo@0.1.30/dist/unidoo/unidoo.umd.min.js"></script>.
  • l'adresse du CDN d'une version de Vue 2 compatible (ici Vue.js v2.7.14) avec le lien suivant <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>.

# Example dans une page HTML

    <unidoo-map-geo-features
          title="Mon titre de test"
          service-url="https://services.iagos-data.fr/prod/v2.0/availability/tracks?month=199804&"
          color-title="blue"
          color-feature="green"
          color-of-selected-feature="red"
    ></unidoo-map-geo-features>

# Propriétés

Nom Type Defaut Requis Description
title String non Titre dans le bandeau au dessus du composant
service-url String oui URL du services REST qui contient le GeoJSON
color-title String '#3f4a75' non Couleur du bandeau Titre
color-feature String 'green' non Couleur des features dessinées (trajectoires, ...)
color-of-selected-feature String 'green' non Couleur des features sélectionnées
shape-style-point String 'circle' non Forme associée à une feature de type géométrique Point : circle, triangle, square, star, cross, x, material:local_airport (local_airport (opens new window) is an icon name found in the library google material (opens new window)), fontawesome:f3c5 (f3c5 is a unicode value of the icon marker location-dot (opens new window) found in the maps (opens new window) icon category of the library fontawesome free (opens new window))
is-rotation-shape-style-point String oui Active la rotation de la forme associée à une feature de type géométrique Point : utile pour afficher l'inclinaison de l'icone avion (forme material:local_airport) en fonction de la trajectoire quand l'attribut rotation est renseignée dans la feature
banned-keys String 'geometry, origin, interval, source, technicalId, externalLinkPrefix, externalLink, UTC_time, altitude' non propriétés exclus de l'affichage dans la popup
disable-popup String 'false' non Désactive l'affichage de la popup au clic sur une feature
no-title-in-popup-with-one-feature String 'true' non Désactive l'affichage du titre dans la popup au clic sur une feature quand elle ne contient qu'une feature

NB : Le GeoJSON est une "featureCollection" de plusieurs formes géométriques auxquelles sont associées des propriétés. Ces formes sont dessinées sur la carte. Les formes géométriques pris en charge par le composant sont de type "LineString, MultiLineString (e.g Trajectoire de vol), Point (e.g un Site), Polygon (e.g Area)". Les propriétés peuvent être affichées dans une popup au clic sur une feature.

# Example

Map Geo Features

← $unidooUuid →