Créer un widget carto avec bazar

L'outil Widget permet d'afficher les contenus venant d'un formulaire bazar sous forme :
  • d'une fenêtre dans la page de votre wiki
  • d'une fenêtre dans n'importe quel site web autre (dans Wordpress, Spip, Joomla, etc.)

Nous nous intéressons ici à la création de cartes issues de formulaires bazar. (Voir page ActionBazarcarto pour en savoir plus sur l'affichage carte)

Voici par exemple le widget issu du bazar des personnes ressources YesWiki

Créer facilement des cartes


Vous avez besoin de créer des cartes pour :
  • montrer les membres de votre réseau,
  • faire une carte des adhérents,
  • partager vos initiatives, projets
  • faire une carte pour un événement, un colloque, un festival
  • inventorier des éléments du patrimoine, l'accessibilité de lieux,
  • etc...

Vous pouvez utiliser yeswiki pour :
  • fabriquer des cartes thématiques pour afficher dans votre wiki
  • utiliser yeswiki comme cartothèque, c'est à dire un lieu central pour créer des cartes à la volée et les afficher dans n'importe quel site web via un code embed

Etape 1 : rendez-vous sur la page Bazar de votre wiki

  • choisissez le formulaire que vous voulez afficher sous forme de cartes.
  • cliquez sur le bouton Widget
image Capture_bazar.png (13.1kB)



Etape 2 : Sur la page widget

  • Type de Visualisation : par défaut vos données s'affichent sous forme d'accordéon. Choisissez cartes avec fiches entières
  • Options de la carte : Choisir un fond de carte en fonction de ses besoins : topographie, délimités communaux, noir et blanc ou couleur, etc. (Voir la liste des fournisseurs de cartes)
image pagewidgetcarto.png (0.5MB)


















Etape 3 : Sélection des couches Facettes

  • Sélectionnez les couches Facettes que vous voulez voir apparaitre
  • Attention : pour l'instant le widget carto ne gère pas de couleurs différentes en fonction des couches facettes. Donc tous les points sont affichés avec le style par défaut. Mais ça viendra !
image widgetcartofacette.png (15.1kB)











Etape 4 : choix code d'intégration

Avant la création du code final vous pouvez aussi :
  • ajuster la taille des marqueurs
  • définir des coordonnées
  • définir la taille d'affichage du widget carto

Une fois tout paramétré vous avez deux codes à copier/coller à votre disposition :
  • le premier un iframe à installer dans votre site web (voir intégration iframe en fonction de votre CMS wordpress, spip, joomla, etc)
  • le second c'est l'action Bazar à intégrer dans la page de votre choix de votre wiki


image widgetembed.png (90.8kB)


Alternative, utiliser gogocarto


{{bazarliste id="2" template="gogomap.tpl.html" width="100%" height="600px" groups="checkboxListeCategories" titles="Mes catégories" colorfield="checkboxListeCategories" color="#98A100= market, #1E8065= organic" iconfield="checkboxListeCategories" icon="leaf=market,cogs=organic"  iconprefix="fa fa-"}}


image Capture_dcran_de_20191021_122151.png (0.1MB)

Pour les icones, j'ai utilisé la librairie fontawesome, vous pouvez trouver des icones ici : https://fontawesome.com/icons?d=gallery&m=free

Toute la configuration de gogocarto n'est pas disponible via des paramètres de bazarliste. A la place, vous pouvez donner un fichier de configuration en utilisant "jsonconfurl"
{{bazarliste id="2" template="gogomap.tpl.html" jsonconfurl="https://pixelhumain.github.io/GoGoCartoJs/web/data/configuration-pwa.json"}}


Voir tout la configuration possible sur https://pixelhumain.github.io/GoGoCartoJs/docs/configuration.html
documentation