DataTables et GeoJson

J’ai cherché plusieurs jours avant d’arriver à faire un tableau propre (en tout cas avec les données qui m’intéresse). Mon défi était de pouvoir lire les informations dans un GeoJSON, puisque je voulais avoir qu’un seul fichier pour les données géographiques et le tableau.

DataTables

DataTables est un plug-in de Jquery, qui permet de faire des jolis tableaux : pagination, recherche, multi-colonnes triables, nombreuses options, et surtout nombreuses sources possibles. Je vous laisse voir le site. Mais en gros après avoir fait appel à Jquery, et à datatables, il suffit de paramétrer la source de données.

Ce qui est intéressant, la prise en charge  sources AJAX donc de JSON.

GeoJSON

Json : JavaScript Object Notation – Notation Objet issue de JavaScript est un format léger d’échange de données. Il est facile à lire ou à écrire pour des humains. Il est aisément analysable ou générable par des machines, comme dit le site. De ce format de stockage de données est dérivé le format GeoJson qui permet de stocker des données géographique est de forme (générale) :

{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [125.6, 10.1]
},
"properties": {
"name": "Dinagat Islands"
}
}

Donc ce qui m’intéresse sont les données attributaires, mon fichier est de forme plus complexe, du type

{"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::2154" }},
"features": [
{ "type": "Feature",
"properties": {
"pkuid": 1,
"Commune": "dgdsfgdsfgsdfg",
"Nom": "sdfgsdfgsdfgsd",
"nb_entreprises": 0,
"ha_dispo": 8.000000,
"ha_total": 8.000000,
"etat": "En projet",
"vocation": "industrielle",
"vocation_2": null,
"date_MAJ": "2015-07-24",
"ficheCCI": null,
"voctype": "2",
"ha_rest": "0" },
"geometry": { "type": "MultiPoint", "coordinates": [ [ 215071.42874480342, 6844697.3285109317 ] ] }},
{ "type": "Feature", ... },...

Donc le but, c’est d’extraire les données.
Pour cela, il suffit de déclarer dans les paramètres de configuration de datatables (un fichier javascript ou dans les balises script)

$(document).ready(function() {
$('#example').DataTable( {
	"processing": true,
	"ajax": {
		"url": "data/zae.geojson",
		"dataSrc": "features"
	},
	"columns": [
		{ data: 'properties.pkuid' },
		{ data: 'properties.Commune' },
		{ data: 'properties.Nom' },
		{ data: 'properties.nb_entreprises' },
		{ data: 'properties.ha_dispo' },
		{ data: 'properties.ha_total' },
		{ data: 'properties.ha_rest' },
		{ data: 'properties.vocation' },
		{ data: 'properties.ficheCCI' },
		{ data: 'properties.date_MAJ' },
		{ data: 'properties.etat' }
	]
} );
} );

Remplacer les champs pkuid ou Commune… par vos champs à vous, mais n’oubliez pas le properties. devant.

attention, cela ne fonctionne pas si le fichier GeoJson commence par var truc = {….

Fini pour cette fois, mon tableau fonctionne, j’espère que le vôtre aussi.