Créer une carte OpenStreetMap pour son site internet
A diverses reprises, nous avons dû mettre en place des cartographies pour certains sites, la solution la plus simple pourrait être d’utiliser Google Map (lire notre article), toutefois cette solution ne permet pas une personnalisation poussée ni d’automatisation sur certains points, c’est pourquoi nous vous présentons une variante pour votre site et surtout Open Source.
Les fichiers nécessaires à votre Cartographie
Pour créer une carte personnalisée, vous allez avoir besoin d’utiliser les ressources d’Open Street Map. Pour info OpenStreetMap (OSM) est un projet international fondé en 2004 dans le but de créer une carte libre du monde. Ils collectent des données dans le monde entier sur les routes, voies ferrées, les rivières, les forêts, les bâtiments…
Les données cartographiques collectées sont ré-utilisables sous licence libre Open Database License (depuis le 12 septembre 2012).
Dans un premier temps vous devez créer un fichier JavaScript sur votre serveur au chemin suivant : /www/wp-includes/js avec avec les données suivantes :
[pastacode lang= »javascript » message= »Map.js » highlight= » » provider= »manual »]
function initCrijMap(points){
map = displayMap();
displayMarkers(map, points);
}
function displayMarkers(map, points){
for(key in points){
point = points[key];
// ajouter un marqueur à l'emplacement donné
options = {
icon: L.icon({
iconUrl: point.icon
, iconSize: [25, 25]
, iconAnchor: [-3, 0]
, popupAnchor: [15, 0]
})
};
L.marker(point.coord, options).addTo(map)
.bindPopup(point.name +'Accéder à mon espace');
}
}
function displayMap(){
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map-ij').setView([43.6316, 3.89706], 11);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("Coordonnées : " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
return map;
}
[/pastacode]
Quelques petites explications sur ce fichier :
- iconSize: [25, 25] définit la taille en pixels de l’icone du marqueur
- iconAnchor: [-3, 0] définit la place du marqueur par rapport aux coordonnées
- popupAnchor: [15, 0] définit la place de l’info bulle par rapport aux coordonnées
- bindPopup(point.name +'<a href= »‘+ point.href +' »>Accéder à mon espace</a>’) définit ce qui doit apparaître dans l’info-bulle, ici on devrait trouver le « point.name » et une URL qui correspond à « point.href » (plus de précisions en bas de page dans la partie « Ajouter des marqueurs »)
- var map = L.map(‘map-ij’).setView([43.6316, 3.89706], 11); définit le centre de votre carte ainsi que le niveau de zoom
- la fonction ci-dessous vous permet d’activer une info-bulle au clic pour vous donner les coordonnées situées sur la carte :
[pastacode lang= »javascript » message= »Clic pour avoir les coordonnées » highlight= » » provider= »manual »]
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("Coordonnées : " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);[/pastacode]
De plus, vous devez ajouter le fichier leaflet dans /www/wp-includes/js
Leaflet est une bibliothèque logicielle libre en javaScript de cartographie interactive développée par Vladimir Agafonkin de CloudMade et de nombreux contributeurs. Elle est notamment utilisée par le projet de cartographie libre et ouverte OpenStreetMap.
La bibliothèque est utilisée sur les sites cartographiques OpenStreetMap (bibliothèque par défaut), Flickr, Wikipédia (greffon de cartographie et application mobile), Foursquare, craigslist, IGN, Washington Post, le Wall Street Journal, Geocaching.com, City-Data.com, StreetEasy, Nestoria, Skobbler…
Dans un second, vous devez déclarer vos deux fichiers JavaScript dans votre fichier functions.php de votre thème (ou celui de votre thème enfant) :
[pastacode lang= »php » message= »functions.php » highlight= » » provider= »manual »]
// Fonction Map
function mytheme_custom_scripts() {
if ( ! is_admin() ) {
$scriptsrc = '/wp-includes/js/';
wp_register_script( 'map', $scriptsrc . 'map.js' );
wp_register_script( 'leaflet', $scriptsrc . 'leaflet.js' );
wp_enqueue_style( 'leaflet', '/wp-includes/css/leaflet.css');
wp_enqueue_script( 'map' );
wp_enqueue_script( 'leaflet' );
}
}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_scripts' );[/pastacode]
Dans un troisième temps, un fichier leaflet (qui contient le CSS) sur votre serveur web au chemin suivant : /www/wp-includes/css
Enfin dans un quatrième temps, vous devez créer un modèle de page avec pour l’instant ces données avant ou après votre contenu de page. Ce modèle servira à implanter la carte sur chaque page qui devra mettre en avant votre cartographie.
[pastacode lang= »php » message= »Template-map.php » highlight= » » provider= »manual »]
[/pastacode]
Choisir son fond de cartes (les tuiles)
Dans le fichier Map.js, un fond de carte de base est déjà intégré (http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png), toutefois, vous pouvez changer ce fond de carte (les tuiles exactement) en changeant simplement l’URL, nous avons fait un listing des fonds de carte d’Open Street Map pouvant être utilisé sur cet article.
Il suffit donc de choisir son fond de carte préféré et l’ajouter dans votre fichier Map.js
[pastacode lang= »javascript » message= »Changer son fond de carte » highlight= »2″ provider= »manual »]
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);[/pastacode]
Création de Custom Post Type pour votre cartographie
Afin d’automatiser, mais aussi de simplifier l’accès aux marqueurs via un espace dédié, nous avons décidé de créer des Custom Post Type, bien sûr cette étape n’est pas nécessaire et vous pouvez utiliser vos articles ou vos pages pour vos marqueurs ou tout simplement ne rien utiliser.
Création de nos Custom Post Type (lire notre article sur les Custom Post Type):
[pastacode lang= »php » message= »Custom Post Type pour des collectivités » highlight= » » provider= »manual »]
//custom post types : Marqueurs
add_theme_support( 'post-thumbnails' ); //active les Post thumbnails (images à la une)
add_action('init', 'my_custom_init');
function my_custom_init()
{
register_post_type('collectivite', array(
'label' => __('Cartographie des Collectivités'),
'singular_label' => __('Collectivité'),
'public' => true,
'show_ui' => true,
'capability_type' => 'post',
'hierarchical' => false,
'supports' => array('title', 'editor', 'thumbnail')
));
register_taxonomy( 'adhesion', 'collectivite', array( 'hierarchical' => true, 'label' => 'Adhésion', 'query_var' => true, 'rewrite' => true ) );
}[/pastacode]
Ajouter des marqueurs
Nous allons maintenant ajouter des marqueurs dans votre template pour qu’ils s’affichent sur votre carte. Puisque nous avons créés des Custom Post Type, nous allons automatiser au mieux ces marqueurs afin de retourner dans ce fichier le moins possible. Ce qui pourrait nous donner ceci :
[pastacode lang= »php » message= »Ajouter des points » highlight= » » provider= »manual »]
[/pastacode]
Chaque marqueur est composé de 3 parties :
- name : Le titre de votre Custom Post Type sous la forme <?php echo get_the_title( 7461 ); ?> afin de faire remonter le titre de votre marqueur automatiquement
- icon : L’image du marqueur sur votre carte qui utilise le lien de l’image à la une de votre Custom Post Type (pour changer d’image comme vous le souhaitez)
- href : Le lien vers le Custom Post Type sous la forme <?php echo get_permalink( 7461); ?> ainsi que les coordonnées de votre marqueur
« 7461 » représente l’id de mon article, page ou Custom Post Type, vous pouvez le trouver dans l’URL quand vous êtes sur un contenu :
Toutefois vous pouvez mettre en dur vos données, elles fonctionneront tout aussi bien, mais pour chaque modification vous devrez ré-intervenir dans votre fichier.
N’oubliez pas de supprimer votre cache, de mettre le bon modèle de page et d’actualisez celle-ci, vous devez avoir une jolie carte avec tous vos marqueurs :
