Créer une carte des événements WordPress à venir avec les API WordCamp.org & Meetup.com

Avec WordPress 4.8, le widget du tableau de bord va maintenant afficher un flux d’événements WP à venir pour encourager les utilisateurs de notre CMS fétiche à participer aux événements de la communauté. Super idée 🙂

Et si on allait un peu plus loin en affichant tout ça sur une carte interactive vectorielle ?

Pour résumer, nous allons utiliser l’API central.wordcamp.org pour récupérer la liste des WordCamps à venir, l’API Meetup.com pour les meetups WP et amCharts pour les fonds de cartes SVG indispensables à l’affichage de ces infos.

L’objet de cet article est de présenter le petit plugin libre et gratuit que nous avons créé pour cela, mais aussi d’aller plus loin et de vous montrer comment le reproduire par vos propres moyens.

Rendu final obtenu avec notre plugin :

[wpce localisation=”europe” height=”500″ countries=”1″ countries-color=”#f4f1c8″ wc-display=”1″ wc-icon=”logo” wc-color=”#e8009a” mt-display=”1″ mt-icon=”marker” mt-color=”#00afef”]

Avec le WordCamp Europe qui se déroulera à Paris la semaine prochaine (Emilie fait partie du staff et quasiment toute l’agence sera présente), on peut dire que c’est d’actualité.

Allez, c’est parti pour un petit retour d’expérience sur l’utilisation de ces API 🙂

Récupérer les données de l’API central.wordcamp.org

Pour se connecter à l’API, il faut utiliser le point de terminaison suivant :

https://central.wordcamp.org/wp-json/wp/v2/wordcamps?per_page=100&status=wcpt-scheduled&order=desc

Cela renvoie ce type de données, formatées en JSON. Les paramètres utilisés sont les suivants :

• per_page : nombre d’éléments à retourner, 100 étant un nombre a priori suffisant
• status : ici, on va uniquement récupérer les éléments ayant le statut wcpt-scheduled, c’est à dire les événements planifiés
• order : la règle de tri, ici décroissant par date, donc du plus proche au plus lointain

Nous allons stocker les données acquises dans un transient WordPress pour les mettre en cache et éviter de réitérer l’appel à l’API à chaque affichage de notre page web (pour en savoir plus sur les transients WordPress, consultez cet article de WPFormation).

Voilà ce que ça donne :

// On essaye de récupérer la valeur stockée dans le transient
$transient = get_transient('who_get_wordcamps');
if ( ! empty($transient) ) :
	// Si le transient existe alors on va récupérer sa valeur
	$upcoming_wordcamps = json_decode($transient, true);
else : 
	// Si le transient n'existe pas, alors on fait appel à l'API wordcamps
	$api_url = 'https://central.wordcamp.org/wp-json/wp/v2/wordcamps?per_page=100&status=wcpt-scheduled&order=desc';
	// On va récupérer les données au format JSON et les stocker dans la variable $api_response
	$request_args = array( 'sslverify' => false, 'timeout' => 10 );
	$api_response = ( function_exists('vip_safe_wp_remote_get') ? vip_safe_wp_remote_get($api_url, $request_args) : wp_remote_get($api_url, $request_args) );
	if ( $api_response && ! is_wp_error($api_response) ) :
		// Si on obtient quelque chose et qu'il n'y a pas d'erreur, alors on stocke le contenu de $api_response dans le transient
		$upcoming_wordcamps = json_decode($api_response['body'], true);
		set_transient('who_get_wordcamps', wp_json_encode($upcoming_wordcamps), DAY_IN_SECONDS);
	endif;
endif;			

Vous vous retrouvez donc avec un tableau PHP contenant toutes les infos nécessaires pour chaque WordCamp. On peut boucler dans les données reçues et afficher les données des événements assez facilement :

foreach ( $upcoming_wordcamps as $key => $value ) : 
	// Identifiant
	$eventID = $value['id'];
	// Date de début formatée suivant les réglages de votre site
	$dateStart = date( get_option('date_format'), $value['Start Date (YYYY-mm-dd)'] );
	// Date de fin formatée suivant les réglages de votre site
	$dateEnd = date( get_option('date_format'), $value['End Date (YYYY-mm-dd)'] );
	// Titre de l'événement
	$title = $value['title']['rendered'];
	// Lieu
	$location = $value['Location'];
	// URL de l'événement
	$url = $value['URL'];
	// Compte Twitter associé
	$twitterAccount = $value['Twitter'];
	// Hashtag Twitter associé
	$twitterHashtag = $value['WordCamp Hashtag'];
	// Nombre de participants attendus
	$anticipatedAttendees = $value['Number of Anticipated Attendees'];
	// Coordonnées : latitude
	$lat = $value['_venue_coordinates']['latitude'];
	// Coordonnées : longitude
	$lng = $value['_venue_coordinates']['longitude'];
	// Ville
	$city = $value['_venue_city'];
	// Pays (code normalisé ISO)
	$countryCode = $value['_venue_country_code'];
	// Pays (nom courant)
	$countryName = $value['_venue_country_name'];
endforeach;

Pas si compliqué finalement ! Merci aux équipes de développeurs de la communauté pour la mise à disposition de cette API ♥

Récupérer les données de l’API Meetup.com

Alors là c’est un poil plus compliqué, car l’API meetup.com nécessite une clé pour pouvoir être utilisée. Pour cela vous devez disposer d’un compte meetup.com — mais je suppose que c’est déjà le cas puisque vous participez sûrement à de nombreux meetups WordPress. 😀

Pour obtenir votre clé, suivez ce lien : obtenir une clé API meetup.com. Notre plugin contient un bouton d’accès direct à votre clé API.

Une fois votre clé API obtenue, on utilise le même principe. Tout d’abord, on se connecte au point de terminaison qui nous intéresse sur cette API :

https://api.meetup.com/2/events?member_id=72560962&key=%s&sign=true&key=VOTRE_CLE_API

Vous noterez qu’on ajoute les paramètres suivants dans l’URL :

• member_id : toujours égal à 72560962 puisqu’il s’agit de l’identifiant de la fondation WordPress sur meetup.com. Et comme la fondation est inscrite à tous les meetups WordPress officiels, c’est ce qui va nous permettre de récupérer les événements WordPress et pas les meetups Joomla, Drupal ou encore les concours de cracher de noyaux de cerises (c’est de saison dans mon Ardèche natale) 😀
• key : votre clé API meetup.com

Comme pour les WordCamps, on va se connecter pour récupérer les données et stocker tout ça dans un transient WP :

// On essaye de récupérer la valeur stockée dans le transient
$transient = get_transient('who_get_meetups');
if ( ! empty($transient) ) :
	// Si le transient existe alors on va récupérer sa valeur
	$upcoming_meetups = json_decode($transient, true);
else : 
	// Si le transient n'existe pas, alors on fait appel à l'API meetup.com
	$api_url = 'https://api.meetup.com/2/events?member_id=72560962&key=%s&sign=true&key=VOTRE_CLE_API';
	// On va récupérer les données au format JSON et les stocker dans la variable $api_response
	$request_args = array( 'sslverify' => false, 'timeout' => 10 );
	$api_response = ( function_exists('vip_safe_wp_remote_get') ? vip_safe_wp_remote_get($api_url, $request_args) : wp_remote_get($api_url, $request_args) );
	if ( $api_response && ! is_wp_error($api_response) ) :
		// Si on obtient quelque chose et qu'il n'y a pas d'erreur, alors on stocke le contenu de $api_response dans le transient
		$upcoming_meetups = json_decode($api_response['body'], true);
		set_transient('who_get_meetups', wp_json_encode($upcoming_meetups), DAY_IN_SECONDS);
	endif;
endif;

à aussi, on va pouvoir boucler et récupérer des données à peu près similaires à celles des WordCamps :

foreach ( $upcoming_wordcamps as $key => $value ) : 
	// Identifiant
	$eventID = $value['id'];
	// Date de début formatée suivant les réglages de votre site 
	$dateStart = date( get_option('date_format'), intval($value['time'])/1000 );
	// On laisse la date de fin vide (un meetup WP se passe toujours sur un seul jour)
	$dateEnd = '';
	// Titre de l'événement
	$title = $value['group']['name'];
	// Lieu
	$location = $value['venue']['city'];
	// URL de l'événement
	$url = $value['event_url'];
	// On laisse le compte Twitter vide (n'existe pas sur meetup.com)
	$twitterAccount = '';
	// On laisse le hashtag Twitter vide (n'existe pas sur meetup.com)
	$twitterHashtag = '';
	// On laisse le nombre de participants attendus vide (n'existe pas sur meetup.com)
	$anticipatedAttendees = '';
	// Coordonnées : latitude
	$lat = $value['venue']['lat'];
	// Coordonnées : longitude
	$lng = $value['venue']['lon'];
	// Ville
	$lng = $value['venue']['city'];
	// Pays (code normalisé ISO)
	$countryCode = $value['venue']['country'];
	// Pays (nom courant)
	$countryName = $value['venue']['localized_country_name'];
endforeach;

Youpi ! 🙂

L’affichage des données sur un fond de carte amCharts

Bon maintenant qu’on a plein de données, il n’y a plus qu’à les afficher…

Et tant qu’à faire, plutôt que de faire une liste ou un vulgaire tableau rébarbatif, plaçons tout ça sur une carte ! Ça tombe bien on a récupéré les coordonnées GPS de chaque événement.

On pourrait utiliser Google Maps, bien entendu, mais pour une fois j’aimerais bien parler d’une alternative hyper sympa et trop méconnue : amCharts. Nous avons eu le plaisir de l’utiliser sur le site du groupe Urgo qui va être mis en ligne d’ici quelques heures et sur quelques autres projets, et le principe m’à séduit : des fonds cartographiques vectoriels en SVG propres et à jour et une API Javascript bien faite pour la manipulation des données. En gros, vous pouvez afficher vos marqueurs un peu comme sur Google Maps, sauf que vous avez ici un fond de carte vectoriel 100% personnalisable !

Comme les données que nous obtenons sont mondiales, nous allons récupérer le fond de carte mondial worldlow.js. Nous récupérons également la bibliothèque Javascript amCharts.

Functions.php

On commence par ajouter nos trois scripts via le fichier functions.php  du thème.

wp_register_script( 'wce-map-base', get_stylesheet_directory_uri() . '/maps/js/ammap.js', array(), false, true );
wp_register_script( 'wce-map-design', get_stylesheet_directory_uri() . '/maps/js/worldLow.js', array(), false, true );
wp_register_script( 'wce-map-scripts', get_stylesheet_directory_uri() . '/maps/js/scripts.js', array(), false, true );
wp_enqueue_script( 'wce-map-base' );
wp_enqueue_script( 'wce-map-design' );
wp_enqueue_script( 'wce-map-scripts' );

Le fichier scripts.js est un fichier JS vide, que nous remplirons bientôt.

Vous remarquerez que dans le code ci-dessus, les fichiers JS utilisés sont rangés dans un répertoire /maps , qui se trouve lui même tout simplement placé dans le thème (ou dans le thème enfant).

scripts.js

Nous allons initialiser la cartographie interactive. Je précise que je n’ai mis ici que les paramètres de base. L’exemple ci-après et l’extension que nous proposons sur le dépôt officiel WordPress sont plus complexes. Notez la présence de la variable markers  en ligne 8. C’est elle qui contiendra tous nos pointeurs (WordCamps et Meetups).

jQuery(document).ready(function() {
	var map = AmCharts.makeChart( 'canvas_carto', {
		'type': 'map',
		'projection': 'miller',
		'addClassNames': true,
  		'dataProvider': {
			'map': 'worldLow',
  			'images': markers
  		},
		'imagesSettings': {
			'autoZoom': true,
			'rollOverScale': 1.5,
			'selectedScale': 1.5
		}
	});
});

Génération des marqueurs en PHP + Javascript

C’est assez simple, il suffit de boucler sur les événements et de placer dans notre tableau JS markers chaque nouveau pointeur avec les informations nécessaire pour l’affichage du pointeur sur la carte. Au niveau de la doc, amCharts décrit plutôt bien l’objet MapImage que nous utilisons ici. Je vous mets un exemple ci-dessous avec les WordCamps. Pour les meetups il suffira d’adapter légèrement en fonction des infos remontées plus tôt dans cet article.

if ( $upcoming_wordcamps ) :
	echo '<script>var markers = new Array();</script>';
	foreach ( $upcoming_wordcamps as $key => $value ) : 
		$eventID = $value['id'];
		$title = $value['title']['rendered'];
		$lat = $value['_venue_coordinates']['latitude'];
		$lng = $value['_venue_coordinates']['longitude'];
		?>
		<script>
		markers.push({
			'id': <?php echo json_encode($eventID); ?>,
			'title': <?php echo json_encode($title); ?>,
			'selectable': true,
			'latitude': <?php echo $lat; ?>,
			'longitude': <?php echo $lng; ?>
		});
		</script>
		<?php
	endforeach;
endif;

Exemple de code fonctionnel

Ci-dessous, une version simplifiée et adaptée pour pouvoir être utilisée sur CodePen (les données API appelés sont statiques et datées du 28 mai 2017, il est donc normal que celles-ci ne restent pas à jour dans le futur !).

[codepen_embed height=”454″ theme_id=”0″ slug_hash=”NjVYVw” default_tab=”result” user=”audrasjb”]See the Pen WordPress Events on amCharts Map by audrasjb (@audrasjb) on CodePen.[/codepen_embed]

Sympa non ? 🙂

Télécharger l’extension sur WordPress.org

Et voici le lien de téléchargement du plugin sur WordPress.org : https://wordpress.org/plugins/wp-community-events/