Le projet — S-SIG Project

tutoriel de réalisation d'une carte choroplète avec ssig project.

Nous allons ici apprendre à réaliser une carte choroplète sur le web depuis des données au format word. 0 - Document source Le document source pourrait aussi bien être un tableau excel. Ici, on part d'un document qui détail la SAU(surface agricole utile) des exploitations bios, classées par région française sau_bio

1 - Extraire l'information

On extrait l'info qui nous intéresse par copier /coller sous excel.
Puis on génère : -
- soit un feuillet au format .XLS
- soit un fichier au format CSV.
- C'est ce fichier de données qui sera en entrée de S-SIG project

2 - SSIG Project va générer les fichiers web cartographiques On lance le s-sig project ssigproject4

Etape1: On charge le fichier au format .xls ou .csv Etape2:

On sélectionne les champs qui nous intéressent pour créer une carte ( ici lat et code_reg, qui sont respectivement la latitude et le code région) par un simple drag&drop entre "champs disponibles" et "champs retenus"
Attention pour chaque carte , il y'a obligatoirement :
- un champ ID, deux champs de coordonnées X et Y
- les champs que vous ajoutez pour la carte, 2 au minimum,
Pour chaque champ retenu, on donnera une valeur integer ou texte.
Puis on génère le fichier cartographique GeoJson qui s'affiche dans le mémo
On lui donne un nom et on sauvegarde ce fichier

Etape3 et 4: C'est la réalisation de la carte proprement dite.

On sélectionne le type de carte
On créer les paramètres: titre, légende, taille des cercles
On choisi la couleur des données 1 et données2

3 - Les fichiers cartographiques générés par s-sig project concrètement on génère les 2 fichiers geojson

Un pour le fond de carte
Un pour les données

extrait du 1er fichier geojson cartefrance.js: ici la région "alsace" avec les références de son polygone

var region ={"type": "FeatureCollection", "features": [ { "type": "Feature", "id": 0, "properties": { "CODE_REG": "42", "NOM_REGION": "ALSACE", "SAU_AB": 5.31 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 7.635286252333743, 49.05417033124251 ], [ 7.741338000435657, 49.046865074208256 ], [ 7.799933815678393, 49.064163946959376 ], [ 7.86740786315694, 49.033492285163192 ], [ 7.937040105229868, 49.056232385060227 ], [ 8.091376040143567, 48.989258216915019 ], [ 8.221430767806323, 48.975243666913244 ], [ 8.226443353339743, 48.964931599143974 ], [ 8.187146829524126, 48.945056847257014 ], [ 8.087015537833404, 48.80201157532273 ], [ 8.031856127590665, 48.788145879028448 ], [ 8.003463262628275, 48.758771104344291 ], [ 7.9702489316298, 48.756230651177148 ], [ 7.961741941979375, 48.720257765357736 ], [ 7.835922776649398, 48.633674012774833 ], [ 7.800157312826982, 48.582953097489053 ], [ 7.804888560666584, 48.513034136640051 ], [ 7.766736990539806, 48.48550754917752 ], [ 7.730965954524634, 48.382204598962659 ], [ 7.741666931126771, 48.323271990296846 ], [ 7.694100863620412, 48.302294295637488 ], [ 7.666151164922541, 48.22110081156665 ], [ 7.577313633812119, 48.120377505091668 ], [ 7.57845848532248, 48.024885520519106 ], [ 7.622157237439436, 47.973658776544781 ], [ 7.555555931593322, 47.871088144215989 ], [ 7.561264182881103, 47.838358305953903 ], [ 7.5329951942426, 47.76679444061611 ], [ 7.543886495657565, 47.722584189175741 ], [ 7.512126938273288, 47.696092223249494 ], [ 7.524660767519585, 47.660194259961521 ], [ 7.59304480807176, 47.598602584774511 ], [ 7.574802363624118, 47.576138679052818 ], [ 7.499031138583075, 47.535234086440092 ], [ 7.530015374335445, 47.526324174147646 ], [ 7.497798337099153, 47.521225603251573 ], [ 7.507921358469647, 47.496228795883731 ], [ 7.475515741730054, 47.480366812193601 ], [ 7.434762802735241, 47.497966414670373 ], [ 7.421224587469297, 47.480170416517737 ], [ 7.45348463444772, 47.473575570083291 ], [ 7.386297665366169, 47.43196913059537 ], [ 7.30396226330273, 47.438255913247964 ], [ 7.245522018100497, 47.420301211215893 ], [ 7.223327833667841, 47.439508924620611 ], [ 7.172161933684952, 47.445502687031095 ], [ 7.198164745738478, 47.493578513372569 ], [ 7.130345969302944, 47.503026582392074 ], [ 7.137885353811547, 47.530656874241295 ], [ 7.094347427121731, 47.57349509457535 ], [ 7.074027786924363, 47.598876102635614 ], [ 7.017367446263211, 47.596911757799582 ], [ 7.013694805961424, 47.629574169181431 ], [ 7.04528182657027, 47.670374857002592 ], [ 7.027565261265178, 47.705369648742575 ], [ 7.032078754918139, 47.726185782777755 ], [ 6.923451893165113, 47.770063509793395 ], [ 6.849115909459171, 47.801231791302357 ], [ 6.846179818400714, 47.8229451969992 ], [ 6.920034363859817, 47.850287916322905 ], [ 6.898328478088028, 47.888694987411313 ], [ 6.922160436958347, 47.917320678873281 ], [ 6.931042779041344, 47.971150087264945 ], [ 6.951932774075346, 48.002427414171422 ], [ 7.016021163859049, 48.03719011358875 ], [ 7.070401852087161, 48.106442159773167 ], [ 7.084163065741953, 48.129221849002995 ], [ 7.059046502262299, 48.139180939164163 ], [ 7.116387084020929, 48.207130463191177 ], [ 7.174225817625896, 48.287812654672827 ], [ 7.198282253797448, 48.310476845515339 ], [ 7.169536741555646, 48.342306851067335 ], [ 7.11712364866647, 48.334132671808753 ], [ 7.075964382704829, 48.352584678290448 ], [ 7.103692119107969, 48.387986824903926 ], [ 7.084984818990844, 48.397885423431013 ], [ 7.104289373594807, 48.454161566303597 ], [ 7.118811334453165, 48.483719121438178 ], [ 7.091002987511437, 48.500877510899933 ], [ 7.129692812778337, 48.501105287545585 ], [ 7.065385141315664, 48.524303993995723 ], [ 7.115540518856966, 48.536664965642352 ], [ 7.187100727729706, 48.537272031399972 ], [ 7.265138661762518, 48.591718281577499 ], [ 7.267285945085939, 48.631872125743946 ], [ 7.30435567942054, 48.660210280253466 ], [ 7.257235958829996, 48.672848633664401 ], [ 7.250464516766439, 48.695438345504471 ], [ 7.313339799219532, 48.767239821137672 ], [ 7.270145805443711, 48.802506239140968 ], [ 7.250463058398026, 48.814944070494228 ], [ 7.258104736769576, 48.822174408783724 ], [ 7.187180467437471, 48.834056533117717 ], [ 7.177191463548315, 48.847455723958753 ], [ 7.141886293356858, 48.835562955966367 ], [ 7.139809056870439, 48.817497200947514 ], [ 7.079244017340416, 48.786286698543158 ], [ 7.067190325510981, 48.79948597132433 ], [ 7.085040494589197, 48.811907903672818 ], [ 7.047117135291342, 48.820637204573032 ], [ 7.052063234966211, 48.846881947727361 ], [ 7.098772378476003, 48.854213767896958 ], [ 6.972290835029876, 48.890745893781499 ], [ 6.941467553114349, 48.924575837481598 ], [ 6.981780660262745, 48.941943286062454 ], [ 6.992516893179032, 48.960530156067641 ], [ 7.032219488521414, 48.956049102284176 ], [ 7.038298626051461, 48.995912113745298 ], [ 7.072338008345651, 49.057246900452057 ], [ 7.074754252857154, 49.072128637075842 ], [ 7.115058744808606, 49.070592087140682 ], [ 7.106357678230494, 49.045346495314412 ], [ 7.129951033200566, 49.005359975541893 ], [ 7.195847203497309, 48.993770362707451 ], [ 7.293287728169993, 48.964888606668886 ], [ 7.343366934876006, 48.948430720426749 ], [ 7.429246229055975, 48.960857665109117 ], [ 7.477938528915779, 48.961479159152844 ], [ 7.556833008164061, 48.936327446591143 ], [ 7.608319630826532, 49.010425736097545 ], [ 7.635286252333743, 49.05417033124251 ] ] ] } }

Extrait du 2nd fichier geojson: centro.js ,avec le premier centroid sur la région alsace. Je ne détail pas les autres région, c'est identique.

var centro ={"type": "FeatureCollection", "features": [ { "type": "Feature", "id": 0, "properties": { "CODE_REG": "42", "NOM_REGION": "ALSACE", "nb_prod": 4850, "NB_OPE": 4541 }, "geometry": { "type": "Point", "coordinates": [ 9.264795251445694, 41.362757426457222 ] } } , ,

4 - Génération du fichier javascript du serveur d'application cartographique Au final , on génère le javascript qui lance la bibliothèque leaflet, celle là même qui pourra créer notre carte avec les fichiers générés précédemment. Voici un extrait

var info; var map; function setSizeIcon(a){ return rayon=Math.sqrt(a)*(20/Math.sqrt(2704)); } function init() { // create a map in the "map" div, set the view to a given place and zoom map = L.map('map').setView([46.2, 2], 5); // add an CloudMade tile layer var CM = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors', opacity: 0.4 }).addTo(map); regionGeoJs=L.geoJson(region, { style :{ weight: 1, opacity: 1, color: '#66CC66', fillOpacity: 0.1 } } ).addTo(map); // add geojson regionCentroProd=L.geoJson(centro, { pointToLayer: function (feature, latlng) { return L.circleMarker(latlng,{ radius:setSizeIcon(feature.properties.nb_prod), color : '#005824', fillOpacity: 1, fillColor: '#41AE76' }).bindPopup("Nb producteurs : " +feature.properties.nb_prod); } }).addTo(map); regionCentroOpe=L.geoJson(centro, { pointToLayer: function (feature, latlng) { return L.circleMarker(latlng,{ radius:setSizeIcon(feature.properties.nb_ope), color : '#005824', fillOpacity: 1, fillColor: '#41AE76' }).bindPopup("Nb operateurs : " +feature.properties.nb_ope); } }); info = L.control(); info.onAdd = function (map) { this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info" this.update(); return this._div; }; // method that we will use to update the control based on feature properties passed info.update = function (props) { this._div.innerHTML = "Nombre de producteurs et d'opérateurs bio" ; }; info.addTo(map); var legend = L.control({position: 'bottomleft'}); legend.onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend'); div.innerHTML +='Nombre d\'individus '; return div; }; legend.addTo(map); L.control.layers({"Nombre de producteur":regionCentroProd, "Nombre d'opérateur":regionCentroOpe}, {"Régions":regionGeoJs}).addTo(map); }

5 - Le résultat: Une carte de France interactive de la SAU bio par région. Ici le curseur est sur la région Auvergne et affiche en dynamique les données carte-choroplete

6 - Pour aller plus loin: bientôt ici un lien pour voir directement la page sur le web, comment et où l'héberger

Tuto: publier une carte choroplète interactive sur le web depuis un document word

tutoriel de réalisation d'une carte choroplète avec ssig project.