wiki:Surcharger_les_infobulles

Gis 4 Surcharger les infobulles

Depuis l’introduction de la nouvelle version de gis, nous sommes confrontés aux mêmes problèmes de personnalisations des informations liées aux markers. Voici une solution pour agrémenter vos infobulles par des illustrations et des descriptions. je vous propose dans notre exemple les modifications de l’apparence des marqueurs par des logo de mots clés, comme dans l’ancienne version de Gis escoitar. Avec la possibilité d’ajouter l’option d’affichage des tracés de plusieurs fichiers KML ou GPX attaché à des objets.

Carte nos-sentiers

Pack utilisé sur le site de randonnée nos-sentiers

Vous pouvez voir un aperçu sous Spip 3

Étant donné que le langage spip est traité en premier, cette méthode est transparente et ne pose pas de problème.

Le principe est simple : j’encode seulement le résultat des boucles, ce qui permet d’éviter les problèmes des virgules en trop et les cheveux blancs.

Dans le cas de l’affichage des points de géolocalisation attachés à un article dans une rubrique, l’identité de l’article est reprise dans un inclure pour afficher le logo article, logo de l’auteur et petit plus, une boucle gis pour les distances entre l’utilisateur enregistré et les points de géolocalisation.

Le basculement de l’affichage

Première méthode avec un bouton de basculement entre : “afficher les points de géolocalisation et cacher les tracés” “afficher les tracés et cacher les points de géolocalisation" les deux fichiers (inc_carte & inc_gpx) sont à placer dans le répertoire squelette.

Ne fonctionne pas sous Internet Explorer 8 Dans une boucle rubrique, que l’on peut appeler avec un mot clé technique :

<BOUCLE_RUBRIQUE(RUBRIQUES){!id_rubrique}{titre_mot=gis}> 

<form method="post">

 [(#ENV{on}|=={'Afficher tracés'}|? {'<input type="hidden" name="on" value=""/> <input type="submit" value="Cacher tracés" />','<input type="submit" name="on" value="Afficher tracés"/>'})]

</form> 

[(#ENV{on}|=={'Afficher tracés'}|?{[(#INCLURE{fond=inc_gpx}{id_rubrique})],[(#INCLURE{fond=inc_carte}{id_rubrique})]})] 

</BOUCLE_RUBRIQUE>

Dans notre fichier inc_gpx :

une boucle qui reprend les urls des documents gpx dans un tableau #ARRAY, la variable point passe à « non » pour éviter de surcharger la carte.

#SET{url,#ARRAY}

<BOUCLE_ARTICLE(ARTICLES){id_rubrique}>

  <BOUCLE_DOCUMENT(DOCUMENTS){id_article}{extension=gpx}>

    #SET{url,#GET{url}|push{#URL_DOCUMENT}}

  </BOUCLE_DOCUMENT>

</BOUCLE_ARTICLE>   
   
[(#INCLURE{fond=modeles/carte_gis,
     objets=articles,
     id_rubrique=#ID_RUBRIQUE,
     control_zoom=small,
     overview=oui, 
     fullscreen=oui,
     point=non,
     controle_type=oui,
     gpx=#GET{url}
    })]

Dans notre fichier inc_carte :

l’appel sans la fonction de superposition des cartes avec clustering.

[(#INCLURE{fond=modeles/carte_gis,
    objets=articles,
    id_rubrique=#ID_RUBRIQUE,
    control_zoom=small,
    cluster=oui,
    overview=oui, 
    fullscreen=oui,
    controle_type=oui,
    clusterStyles=[(#ARRAY{url,#CHEMIN_IMAGE{bg_cluster.png},height,40,width,40,opt_textColor,#B9121B})],
    })]


Deuxième méthode qui consiste à intégrer directement le code de façon classique (voir le même code ci-dessus ou la documentation du plugin gis).

Sans les options de basculement dans notre fichier rubrique.html les deux fichiers inc_gps et inc_carte peuvent-être supprimés.

La surcharge des infobulles

Dans le fichier gis_articles du répertoire json, remplacer le code :

"title":[(#TITRE_GIS*|sinon{#TITRE*}|supprimer_numero|json_encode)],                        
"description":[(#DESCRIPTIF_GIS|sinon{#DESCRIPTIF}|json_encode)]

par

"title":[(#INCLURE{fond=json/inc_bulle, id_article}|json_encode)]

Placer le fichier inc_bulle dans le répertoire json du plugin Gis.

Pour les informations sur les distances entre l’utilisateur et les points de géolocalisation.

Il faut avoir préalablement déclaré la variable qui va contenir l’id_gis de la session, par notre première boucle GEO_LON_LAT_USER.

Dans la boucle AUTEUR on récupère le logo d’un seul auteur pour l’article (le logo d’un co-auteur est toujours possible, mais demande une info-bulle hors norme).

Nos deux dernières boucle gis nous donnent les valeurs des distances, comme décrit dans la documentation.

Voici son contenu :

<BOUCLE_GEO_LON_LAT_USER(spip_gis_liens){objet=auteur}{id_objet=#SESSION{id_auteur}}>
  [(#SET{user_geo,#ID_GIS})]

	</BOUCLE_GEO_LON_LAT_USER>

<div style="width:200px;">

[<a href="#URL_ARTICLE" style="text-decoration:none;"  title="<:suite:>">(#INFO_TITRE{article,#ID_ARTICLE})</a><br/>]

[<a href="#URL_ARTICLE" title="<:suite:>">(#LOGO_ARTICLE|image_reduire{110}|image_recadre{80,80,center center})</a>]

<BOUCLE_ARTICLE(spip_auteurs_liens){id_objet=#ID_ARTICLE}{objet=article}>
		<BOUCLE_AUTEUR(AUTEURS){id_auteur=#ID_AUTEUR}{0,1}{tout}>

			[<a href="#URL_PAGE{auteur,id_auteur=#ID_AUTEUR}" style="text-decoration:none;" title="<:contact:>">(#LOGO_AUTEUR|image_reduire{110}|image_recadre{80,80,center center}|sinon{Pas de logo auteur}|image_passe_partout{90})</a>]
				[<a href="#URL_PAGE{auteur,id_auteur=#ID_AUTEUR}" style="text-decoration:none;" title="<:contact:>"><font style="font-size:10px; color:#FF6633;"><:auteur:>&nbsp;:&nbsp;(#NOM|couper{25})</font></a><br/>]


		</BOUCLE_AUTEUR>
</BOUCLE_ARTICLE>


				



	<BOUCLE_GEO(GIS){id_article}>

		<BOUCLE_DISTANCE(GIS){id_gis=#GET{user_geo}}{gis distance}>
			[<font style="font-size:10px;">Adresse&nbsp;&agrave;&nbsp;(#DISTANCE|couper{5})&nbsp;<sup>km</sup></font><br/>]
		</BOUCLE_DISTANCE>
			
			


		
			[<font style="font-size:10px;">(#ADRESSE|couper{25})</font>]
	  		[<font style="font-size:10px;">(#VILLE|couper{20})</font>]	 
			[<font style="font-size:10px;">((#REGION|couper{25}))</font>]
	</BOUCLE_GEO>

</div>

L’affichage des markers par mots clés

Un logo à la place du marker : Dans notre exemple de site sur la randonnée, les mots clés vont déterminer, le type de randonnée par l’image du logo et la couleur les difficultés.

Dans le fichier gis_articles pour afficher un logo de 20 x 32 d’un mot clé associé à un article, la boucle MOT récupère dans la variable l’url du logo_mot dans le groupes "marker" et ne prend plus par défaut le logo du point gis.

Une icône par défaut sera affichée en l’absence du logo, donc vous veillerez à placer le fichier marker_defaut dans le répertoire "images".

<BOUCLE_art(ARTICLES){gis}{id_article ?}{id_rubrique ?}{id_secteur ?}{id_mot ?}{id_auteur ?}{recherche ?}{0, #ENV{limit,500}}{","}>
<BOUCLE_MOT(MOTS){id_article}{type=marker}>
#SET{url_logo,#LOGO_MOT{url}}
</BOUCLE_MOT>
</B_MOT>
#SET{url_logo,#CHEMIN_IMAGE{marker_defaut.png}}
<//B_MOT>	

		{"type": "Feature",
		"geometry": {"type": "Point", "coordinates": [#LON, #LAT]},
		"id":"#ID_GIS",
		"properties": { 
			"title":[(#INCLURE{fond=json/inc_bulle, id_article}|json_encode)]
			[(#SET{logo_doc,''})]
            
		    [(#SET{logo_doc,#GET{url_logo}|image_passe_partout{20,32}|image_recadre{20,32}})]			
			#SET{icon_w,#GET{logo_doc}|extraire_attribut{src}|largeur}
			#SET{icon_h,#GET{logo_doc}|extraire_attribut{src}|hauteur}
			#SET{icon_anchorPoint,''}
			[,"icon": (#GET{logo_doc}|extraire_attribut{src}|url_absolue|json_encode)],
			"icon_size": [(#VAL{91}|chr)]#GET{icon_w},#GET{icon_h}[(#VAL{93}|chr)],
			"icon_anchor": [(#VAL{91}|chr)][(#GET{icon_w}|div{2})],[(#GET{icon_h})][(#VAL{93}|chr)]
		}}</BOUCLE_art>

Retrouvez dans le pack zip les fichiers à inclure dans votre structure.

Last modified 4 years ago Last modified on 02/13/15 13:40:35

Attachments (1)

Download all attachments as: .zip