Sommaire #


Présentation de l’addin Open Street Map #
Ce composant propose un affichage géographique de différents objets paramétrables individuellement (taille, couleur, texte, icône…).
Ce composant peut être cible de lien (filtre ou paramètre) : il se rafraîchit lorsque sa source de données ou son filtre sont modifiés.
Ce composant peut être source de lien : il a alors la capacité de rafraîchir ses composants cibles lorsque l’utilisateur sélectionne un ou plusieurs objets.
Il est aussi capable de déclencher un lien hypertexte lors de la sélection d’un élément.
Utilisation #
Ce composant (basé sur les cartes OpenStreetMap et le framework Leaflet) permet de gérer plusieurs types d’objet :
CIRCLE : il s’agit d’un cercle géolocalisé (taille en mètres) contenant un texte, un tooltip (texte affiché au survol) et la possibilité de déclencher un lien hypertexte au clic.
Exemple :

MARKER : il s’agit d’une icône géolocalisée (taille fixe), avec un tooltip (texte affiché au survol) et la possibilité de déclencher un lien hypertexte au clic.
Exemple :

CHART : c’est un histogramme géolocalisé (taille fixe) , avec un tooltip (texte affiché au survol) et la possibilité de déclencher un lien hypertexte au clic.
Exemple :

SECTOR : c’est un camembert géolocalisé (taille fixe) , avec un tooltip (texte affiché au survol) et la possibilité de déclencher un lien hypertexte au clic.
Exemple :

POLAR : c’est un graphique polaire géolocalisé (taille fixe) , avec un tooltip (texte affiché au survol) et la possibilité de déclencher un lien hypertexte au clic.

LABEL : un libellé géolocalisé (taille fixe) , avec un tooltip (texte affiché au survol) et la possibilité de déclencher un lien hypertexte au clic.
Exemple :

Chaque objet est indépendant et peut être visible ou non en fonction du niveau de zoom.
Les objets peuvent aussi être sélectionnés (un par un ou sélection multiple, au lasso ou à la souris).
Modes de fonctionnement #
Classique : #
Les données sont chargées lors de l’affichage du composant (comme pour les autres composants BiBOARD).
Ce mode est à privilégier si vous avez une faible quantité d’objets à afficher (quelques centaines).
Rafraîchissement dynamique : #
Lors de chaque action de Zoom ou de Déplacement, les données sont rechargées (en fonction d’un paramètre représentant la partie visible de la carte) sans que le composant soit re-créé.
Ce mode est à privilégier si vous avez une quantité importante d’objets à afficher (plusieurs milliers).
Pré-requis à l’utilisation de ce mode :
- chaque objet doit avoir un ID unique (« Liaison de données »/ »Champ contenant l’id unique de chaque objet »)
- dans ce mode, le composant ne tient pas compte des filtres qui pourraient lui être appliqués
- le hub pilotant le composant doit avoir UN et UN SEUL paramètre (dont le nom devra être précisé dans « Comportement »/ »Nom du paramètre pour le rafraîchissement dynamique »)
- en fonction de ce paramètre, le hub ne doit retourner que les objets visibles dans la carte (en fonction de sa position )
- le paramètre passé (qui donne les coordonnées en haut à droite et en bas à gauche de la partie visible de la carte) est de la forme suivante (5 nombres encadrés par de ‘|’) : |lat est|lon nord|lat ouest|lon sud|zoom|
Exemple :
|11.40380859375|51.33061163769853|-6.525878906250001|41.11246878918088|6| ==> France métropolitaine + corseVoici une fonction utilitaire à appeler dans votre requête qui permet de savoir si un objet doit être visible sur la carte :
CREATE FUNCTION [dbo].[IsObjectViewable] ( @lat float, /* latitude de l'objet */ @lon float, /* longitude de l'objet */ @zmin int, /* zoom minimum pour que l'objet soit visible */ @zmax int, /* zoom maximum pour que l'objet soit visible */ @box nvarchar(100) /* paramètre passé par la carte */ ) RETURNS int AS BEGIN DECLARE @retval int set @retval=0 DECLARE @strend int DECLARE @strstart int declare @east float declare @north float declare @west float declare @south float declare @zoom int if (@box='') return 0 /* paramètre vide ==> objet non visible */ if (@box='#NULL') return 0 /* paramètre NULL ==> objet non visible */ set @strstart=1 set @strend=CHARINDEX('|',@box,@strstart+1) SELECT @east=SUBSTRING(@box, @strstart+1, @strend-1-@strstart ) set @strstart=@strend set @strend=CHARINDEX('|',@box,@strstart+1) SELECT @north=SUBSTRING(@box, @strstart+1, @strend-1-@strstart) set @strstart=@strend set @strend=CHARINDEX('|',@box,@strstart+1) SELECT @west=SUBSTRING(@box, @strstart+1, @strend-1-@strstart) set @strstart=@strend set @strend=CHARINDEX('|',@box,@strstart+1) SELECT @south=SUBSTRING(@box, @strstart+1, @strend-1-@strstart) set @strstart=@strend set @strend=CHARINDEX('|',@box,@strstart+1) SELECT @zoom=SUBSTRING(@box, @strstart+1, @strend-1-@strstart) if ((@zoom < @zmin) or (@zoom > @zmax)) begin return 0 /* pas le bon niveau de zoom ==> objet non visible */ end if ((@lat between @south and @north) and (@lon between @west and @east)) begin return 1 /* l'objet est dans la zone visible de la carte ==> objet visible */ end RETURN 0 /* objet non visible */ END
Et voici la façon d’utiliser cette fonction dans la requête :
Select [OSM-DEMO].dbo.T_OSM_DEMO_FRANCE.ID, [OSM-DEMO].dbo.T_OSM_DEMO_FRANCE.LAT_DD, [OSM-DEMO].dbo.T_OSM_DEMO_FRANCE.NAME, [OSM-DEMO].dbo.T_OSM_DEMO_FRANCE.ZoomMin, [OSM-DEMO].dbo.T_OSM_DEMO_FRANCE.ZoomMax, [OSM-DEMO].dbo.T_OSM_DEMO_FRANCE.SIZE, [OSM-DEMO].dbo.T_OSM_DEMO_FRANCE.NAME2, [OSM-DEMO].dbo.T_OSM_DEMO_FRANCE.OBJ_COLOR, [OSM-DEMO].dbo.T_OSM_DEMO_FRANCE.OBJ_FILL, [OSM-DEMO].dbo.T_OSM_DEMO_FRANCE.TEXT_COLOR, [OSM-DEMO].dbo.T_OSM_DEMO_FRANCE.LON_DD, :param as ZOOM_INIT From [OSM-DEMO].dbo.T_OSM_DEMO_FRANCE where dbo.IsObjectViewable(LAT_DD, LON_DD, ZoomMin, ZoomMax,:param)=1
Paramétrage #
Il y a 7 menus spécifiques de paramétrage pour l’addin OSM.
Paramètres généraux #
Contient les propriétés générales indépendantes des objets affichés :

Item à paramétrer | Description | Valeur par défaut | |
---|---|---|---|
Latitude du centre de la carte(1) | Obligatoire | Contient la latitude du point central de la carte | Coordonnées BiBOARD Grenoble |
Longitude du centre de la carte(1) | Obligatoire | Contient la longitude du point central de la carte | |
Niveau de zoom minimal | Obligatoire | Contient le zoom minimal autorisé | 3 (un continent) |
Niveau de zoom au chargement(1) | Obligatoire | Contient le niveau de zoom utilisé à l’affichage de la carte | 10 |
Niveau de zoom maximal | Obligatoire | Contient le zoom maximal autorisé | 18 |
Taille minimale de la police de caractères(2) | Obligatoire | Taille minimale des textes des objets (pixel) | 5 |
Taille maximale de la police de caractères(2) | Obligatoire | Taille maximale des textes des objets (pixel) | 200 |
Police de caractères | Obligatoire | Police de caractères utilisée pour les textes des objets | inherit |
Répertoire contenant les icônes | Obligatoire | Répertoire du serveur contenant les icônes liées aux objets | /resources/addins/BBOsm/OsmCircleMarker/images/ |
Notes
(1) : ce paramètre est ignoré si « Zoom automatique en fonction des objets présents » est choisi dans le paramétrage du comportement.
(2) : la taille du texte de chaque objet est ajustée pour être contenue à l’intérieur de l’objet, dans la limite de ces tailles de police
Liaison de données #
Il s’agit de tous les éléments permettant de lier le fonctionnement à la source de données :

Item à paramétrer | Description | Type d’objet | |
---|---|---|---|
Champ contenant le type d’objet | Obligatoire | Contient le type d’objet(CIRCLE, MARKER, CHART, SECTOR, POLAR ou LABEL) | Tous |
Champ contenant la latitude | Obligatoire | Latitude de l’objet | Tous |
Champ contenant la longitude | Obligatoire | Longitude de l’objet | Tous |
Champ contenant le niveau de zoom minimal pour voir l’objet | Obligatoire | L’objet n’est visible que si le zoom courant est entre cesdeux bornes | Tous |
Champ contenant le niveau de zoom maximal pour voir l’objet | Obligatoire | Tous | |
Champ contenant l’id unique de chaque objet | Obligatoire en mode rafraîchissement dynamique | Identifiant unique de chaque objetAttention : ce champ doit être un entier | Tous |
Champ contenant la valeur de l’opacité | Opacité du remplissage | Tous | |
Champ contenant l’URL cible | Lien URL déclenché au clic sur l’objet | Tous | |
Champ contenant le texte du tooltip | Texte affiché au survol de l’objet (peut contenir des balises html) | Tous | |
Champ contenant la couleur du texte du tooltip | Couleur du texte affiché au survol de l’objet | Tous | |
Champ contenant la couleur de fond du tooltip | Couleur de fond du texte affiché au survol de l’objet | Tous | |
Champ de référence pour les liens sortants | Champs de référence pour les liens sortants | Tous | |
Champ contenant la couleur de fond | Couleur de remplissage du cercle | CIRCLE | |
Couleur de fond des graphes et des tooltips | CHART, SECTOR, POLAR | ||
Couleur de fond des tooltips | CIRCLE, MARKER, LABEL | ||
Champ contenant la police de caractères à utiliser | Famille de police de caractères (‘inherit’ par défaut) | Tous sauf MARKER | |
Champ contenant la taille de la police de caractères | Taille de la police de caractères (0 pour ajustement automatique) | Tous sauf MARKER | |
Champ contenant le libellé à afficher | Libellé à afficher (peut contenir des balises html) | Tous sauf MARKER | |
Champ contenant la couleur du texte | Couleur du texte du libellé | Tous sauf MARKER | |
Champ contenant la hauteur du libellé | Hauteur du libellé | CHART, SECTOR, POLAR, LABEL |
Liaison de données – champs spécifiques pour les cercles #

Item à paramétrer | Description |
---|---|
Champ contenant le rayon du cercle | Rayon du cercle (en m) |
Champ contenant la couleur du cercle | Couleur du cercle |
Liaison de données – champs spécifiques pour les marqueurs #

Item à paramétrer | Description |
---|---|
Champ contenant le nom de l’icône à utiliser | Icône utilisée |
Liaison de données – champs spécifiques pour les graphes #

Item à paramétrer | Description |
---|---|
Champ contenant les données JSON du graphe | représentation JSON des données à afficher |
Champ contenant la largeur de l’objet | Largeur du graphe en pixels(1) |
Champ contenant la hauteur de l’objet | Hauteur du graphe en pixels |
Champ contenant le nom JSON de la série | Identifie le nom de la série dans les données JSON |
Champ contenant le nom JSON de la valeur | Identifie le nom de la valeur dans les données JSON |
Champ contenant le nom JSON de la couleur | Identifie le nom de la couleur dans les données JSON |
Valeur max pour les minicharts | Permet d’aligner tous les graphes de la carte sur la même valeur max |
Notes
(1) : ce paramètre est aussi utilisé pour gérer la largeur d’un objet de type LABEL
Exemple de données JSON : #
Pour afficher le graphe suivant , voici les données à préparer :
[{« Isère » : « x », « y » : 35, « color »: »red »}, {« Isère » : « x », « y » : 172, « color »: »green »}, {« x » : « Hospitalisés », « y » : 228, « color »: »blue »}]
Le nom de la série est « x »
Le nom de la valeur est « y »
Le nom de la couleur est « color »
Comportement #
Il s’agit de tous les éléments permettant de configurer le comportement du composant

Item à paramétrer | Description | Valeur par défaut | |
---|---|---|---|
Rafraîchissement automatique | Obligatoire | Rafraîchissement automatique | Faux |
Filtrage automatique | Obligatoire | Filtrage automatique | Faux |
Mode de sélection | Obligatoire | Permet de choisir le mode de sélection :None : sélection interditeSingle : sélection d’un objet par clicMulti : sélection de multiples objets (clic et ctrl-clic)Lasso : sélection des objets en les entourant à la sourisMulti-Lasso: comme Lasso, mais, possibilité de réaliser plusieurs zone de sélection disjointes | None |
Zoom automatique en fonction des objets présents | Obligatoire | Ajuste le zoom pour permettre de voir tous les objets présents sur la carte | Faux |
Effacer la sélection lors du zoom | Obligatoire | Vide la sélection lors d’un zoom | Vrai |
Montrer les informations de positionnement | Obligatoire | Permet de visualiser les coordonnées des extrémités de la carte, du pointeur etaffiche le facteur de zoom courant (fonction utile uniquement pour les concepteurs) | Faux |
Rafraîchir dynamiquement les données | Obligatoire | Indique si le hub doit être ré-exécuté à chaque zoom ou déplacement sur la carte.Utile uniquement si vous disposez d’un grand nombre d’objets.Voir plus de détails au point 4.2 ci dessus | Faux |
Nom du paramètre pour le rafraîchissement dynamique | Facultatif | Indique le paramètre permettant de gérer le rafraîchissement dynamique des données |
Les cartes #
Permet de choisir le fond de carte utilisé par le composant
