Dessiner un polygone sur la Map

[Khadija (Ait razouk)]

Request description

Dessiner un polygone sur la Map

Bonjour,

J’ai une question à propos d’une tâche qui permet de dessiner un polygone sur la carte (Map), est ce qu’il y a une fonctionnalité dans Simplicité qui prend en charge en fonction des coordonnées du marker?

Si ce n’est pas le cas, pourriez-vous nous aider à ajouter cette fonctionnalité ou récupérer l’élément de la carte (objet Map) existant pour gérer cette fonctionnalité ?

[david (David AZOULAY)]

Bonjour

Je ne suis pas sûr de comprendre ce dont vous avez besoin ni dans quel contexte on se trouve (si on parle de “polygone” j’imagine qu’on parle d’une map spécifique, mais ça ne me dit pas dans quel contexte vous affichez cette map ni quel type d’interaction elle a avec vos données)

De manière générale Simplicité gère un type “coordonnées géographiques”. Ce type d’attribut est notamment utilisé pour les cartes d’emplacements standards “place maps”, comme celle de la démo sur les clients:

Vous pouvez donc aussi vous en servir dans le cadre d’une map spécifique.

Le format des données dans ce type d’attribut est <latitude>,<longitude> où latitude et longitude sont des décimaux au format technique:

[Khadija (Ait razouk)]

Bonjour,

Merci pour votre retour, ce que nous avons actuellement est la localisation de tous les sites client, basée sur le type “coordonnées géographiques” :

En plus de la localisation des sites, nous avons besoin de dessiner un polygone qui présente la forme du site :

[david (David AZOULAY)]

Il n’y a pas de type “coordonnées géographiques multiples” mais vous pouvez très bien, par exemple gérer ça dans un attribut texte long de type JSON contenant toutes les informations pertinentes pour afficher votre map spécifique genre:

{
  "polygon": [ "<latitude1>,<longitude 1>", ... "<latitude n>,<longitude n>" ],
  "color": "#FF0000",
...
}

Ce type d’attribut est est général la bonne option pour stocker des données à “géometrie variable”.

Pour ce qui est de l’affichage de la map c’est du dev specifique utilisant l’API Google Maps. Ca peut être, toujours par exemple, comme pour la map custom du client dans le démo (cf. la ressource SCRIPT de l’objet DemoClient):

[david (David AZOULAY)]

Voici un exemple où la carte s’affiche à l’ouverture du formulaire (dans la demo c’est une action):

Avec la ressource SCRIPT suivante sur l’objet (la carte utilise les données de l’attribut JSON):

(() => {
	Simplicite.UI.hooks.MonObjet = (o, cbk) => {
		try {
			var p = o.locals.ui;
			if (p && o.isMainInstance()) {
				p.form.onload = (ctn, obj, params) => {
					const data = JSON.parse($ui.getUIField(null, o, 'monAttribut').ui.val());
					if (data)
						$ui.loadScript({
							url: Simplicite.GOOGLE_MAPS_JS_URL,
							onload: () => {
								const center = new google.maps.LatLng(data.centre.lat, data.centre.lng);
								const map = new google.maps.Map(document.getElementById('onfmap'), {
									center: center,
									zoom: data.zoom || 13,
									mapTypeId: google.maps.MapTypeId.HYBRID,
									streetViewControl: false
								});
								new google.maps.Marker({ position: center, map: map });
								new google.maps.Polygon({
									paths: data.polygone,
									strokeColor: data.couleur || '#FF0000',
									strokeOpacity: 0.8,
									strokeWeight: 2,
									fillColor: data.couleur || '#FF0000',
									fillOpacity: data.opacite || 0.35,
								}).setMap(map);
							}
						});
				}
			}
		} catch (e) {
			console.error(e.message);
		} finally {
			cbk && cbk(); // final callback
		}
	};
})();

Les données JSON dans l’exemple ci-dessus:

{
	"polygone": [
		{
			"lng": 2.4143093706133607,
			"lat": 48.45493560087042
		},
		{
			"lng": 2.40621126266374,
			"lat": 48.441724291610555
		},
		{
			"lng": 2.432190192143719,
			"lat": 48.43826373937818
		},
		{
			"lng": 2.441739127242032,
			"lat": 48.451663935540786
		},
		{
			"lng": 2.420375718918836,
			"lat": 48.45646483042665
		}
	],
	"centre": {
		"lng": 2.4226921785524564,
		"lat": 48.44410149962756
	}
}