Cartographie sur Internet : réalisation d’un Atlas Interactif en SVG pour le Parcnaturel régional de Lorraine

Frédéric Reichert *, Hélène Durand **.* Parc Naturel Régional de Lorraine,

Chargé de mission SIG / ATLASTél : 03.83.84.25.14.

Courriel : frederic.reichert@pnr-lorraine.com** Alisé, Tél : 04.67.42.61.00.

Courriel : Helene.durand@wanadoo.fr

Résumé :

Dans le cadre de l’évolution de la mission « Système d’Information Géographique » duParc naturel régional de Lorraine, les objectifs prioritaires pour 2005-2006 se portentprincipalement sur le développement d’outils internes et externes pour la valorisation, lepartage et l’édition de l’information géographique contenue sur le territoire pour leGrand Public.

Trois projets sont en cours de réalisation : un catalogue de données géographiques pourles utilisateurs et les partenaires institutionnels du Parc, une cartothèque accessible enintranet et via le site Internet du Parc (www.pnr-lorraine.com), un Atlas cartographiquedynamique pour le partage, la consultation interactive et l’édition de donnéesgéographiques du territoire Parc. Cet Atlas cartographique dynamique est developpéavec une nouvelle technologie de cartographie sur Internet, le SVG (Scalable VectorGraphic). La technologie SVG, en plus d’être normalisée, offre de nombreux avantagespermettant la conception d’interfaces ergonomiques et l’accès à des fonctions avancéestelles que les calculs de distance et de surface, mais aussi les outils de navigations usuels(zooms, échelle graphique, déplacement, …). Ces fonctions sont, pour la plupart, lancéessur le poste client et autorisent de ce fait des temps de réponse très courts. Cet Atlas seraen ligne au mois de mai 2005 et permettra ainsi au Grand public d’avoir accès, par choixde commune ou par thématiques, à de nombreuses données géographiques contenuessur le Parc naturel régional de Lorraine. Cet Atlas a été développé et personnalisé parune solution e-Carto de l’Atelier Languedocien d’Information Spatialisée (AliséGéomatique).

Fig 1. La vallée du Rupt de Mad Fig 2. Couple de Crapaud commun Fig 3. Plantes messicoles (coquelicots)

1 . P r é s e n t a t i o n d e l a m i s s i o n « S I G - O b s e r v a t o i r e d up a t r i m o i n e n a t u r e l » P . N . R d e L o r r a i n e e t d e s e s b e s o i n s e nm a t i è r e d e W E B m a p p i n g

1 . 1 . P r é s e n t a t i o n d u P a r c n a t u r e l r é g i o n a l d e L o r r a i n e e t d e l am i s s i o n « S I G – O b s e r v a t o i r e d u p a t r i m o i n e n a t u r e l »

Le Parc naturel régional de Lorraine (P.n.r.L.) a été créé en 1974. Il est depuis 2003 géré parun Syndicat mixte, regroupant 188 communes sur 2195 km² réparties sur trois départements(Meuse, Meurthe-et-Moselle et Moselle). Il fait partie de la première génération des Parcnaturels régionaux dont les vocations sont de protéger et valoriser le patrimoine naturel,culturel et humain de leurs territoires en mettant en œuvre une politique innovanted’aménagement et de développement économique, social et culturel respectueuse del’environnement.

Le P.n.r.L. est un territoire rural fragile au patrimoine remarquable. Il a la particularitégéographique d’être scindé en deux secteurs de part et d’autre de l’axe Nancy-Metz : la zoneOuest s’étend de la vallée de la Meuse à la vallée de la Moselle, elle est limitée par Verdun etMetz au nord et par Toul au sud ; la zone Est s’étend de Château-Salins à Fénétrange etSarrebourg. Ce territoire est caractérisé par quelques zones de vignobles, de nombreuxmilieux forestiers, des prairies, des zones de vergers, des pelouses calcaire, des mares saléescontinentales, de nombreuses zones humides et un réseau hydrographique très dense.

Fig 4. Présentation des deux parties du PNR de Lorraine à l’aide d’un extrait de l’atlas SVG

Dés 1993, le P.n.r.L. a mis en place un SIG pour mieux connaître, gérer et protéger sonterritoire. Le SIG fonctionne sur solution ESRI France (ArcView 3.2 et ArcView 8.3) coupléà un serveur de Bases de données Géographiques (IGN, DIREN Lorraine, BRGM, INSEELorraine, données Parc …). Aujourd’hui l’objectif prioritaire de la mission SIG du Parc est defournir, au travers de ses bases de données, des outils d’aide à la décision et de connaissancepour aider les élus locaux et les partenaires institutionnels dans leurs choix de mesuresd’aménagement.

1 . 2 O b j e c t i f d e d i f f u s i o n e t c h o i x d ’ u n e s o l u t i o n

Pour la mission SIG du Parc, l’année 2005 s’oriente vers la diffusion et la consultation del’information géographique contenue sur le territoire du Parc. Cette mise à disposition del’information concerne aussi bien les acteurs locaux que le Grand Public. En parallèle desoutils de consultation cartographiques internes sont en cours de développement pour lestechniciens et les élus du Parc (cartothèque, catalogue de données géographiques). Pour ladiffusion au plus grand nombre, le développement et la mise en ligne d’un Atlascartographique interactif en SVG s’est très vite imposé comme la solution adaptée decartographie sur internet.

La réalisation de cet Atlas SVG s’est faite en plusieurs étapes. Après le choix des thématiquesreprésentées, la réalisation du cahier des charges et le choix du prestataire de service (Ateliere-Carto d’Alisé), la première grande étape a consisté à acquérir les Droits de ReprésentationsElectroniques auprès des fournisseurs de données (IGN et DIREN / MNHN / IEGB / SPN).

Les DRE ont été acquis pour les couches d’informations suivantes : IGN / BD CARTO®, BDALTI®, SCAN 100®, ROUTE 500®. DIREN Lorraine / ZNIEFF* de type I et II, ZICO*,ZPS*, APB*, RAMSAR*.

• ZNIEFF : Zone Naturelle d’Intérêt Ecologique Faunistique et Floristique – ZICO : Zone Importante pour laConservation des Oiseaux – APB : Arrêtés préfectoraux de Protection de Biotope – ZPS : Zone de Protection Spécial– RAMSAR : Convention relative aux zones humides d'importance internationale.

Avant la mise en ligne de l’Atlas interactif, la dernière étape a consisté à préparer les données,élaborer la sémiologie graphique, tester et valider l’Atlas SVG, auprès du prestataire.

Certains critères ont été déterminant dans la solution retenue, à savoir : une cartographiesimple, ergonomique, intuitive, fluide, dynamique et interactive, esthétique et évolutive avecpossibilités d’éditions cartographiques.

Par ailleurs, la couverture locale du territoire du Parc ne permettant encore à l’ensemble desdes communes du Syndicat mixte d’avoir l’accès à Internet, il était souhaitable d’obtenir unoutil qui fonctionne également sur Cd-Rom. Enfin, il fallait des délais de développement et deproduction courts (quelques mois). Après sélection, la solution e-Carto développée parl’Atelier Languedocien d’Information Spatialisée (Alisé Géomatique) s’est donc rapidementimposée.

1 . 3 L e s f o n c t i o n n a l i t é s a t t e n d u e s d e l ’ A t l a s S V G

Pour la cartographie interactive sur Internet, une solution en SVG (Scalable Vector Graphic) atout de suite été envisagée car elle offre la possibilité d'intégrer le graphisme vectoriel aux setites Web. En ce qui concerne l'interactivité, le SVG propose une riche palette d'événements(mouse over, mouse out, on click, key press, etc.) présentés dans le détail dans le chapitre 2.Ils sont employés de la même façon que pour les éléments HTML traditionnels.

Les principales fonctions attendues de l’Atlas interactif SVG étaient : choix du territoire à consulter (zones, communes), choix de la thématique à représenter, affichage interactif de couches vectorielles,

zooms et déplacements, outils de calculs de distance et de surface, échelle graphique dynamique, affichages d'informations complémentaires (info-bulles) au survol de la carte, sélections géographiques, paramétrage de l'impression

2 . P r i n c i p a l e s c a r a c t é r i s t i q u e s d e l ’ a t e l i e r e - C a r t o S V G e t d el ’ a t l a s S V G :

2 . 1 S p é c i f i c i t é s d ’ e - C a r t o p a r r a p p o r t a u x s o l u t i o n s e x i s t a n t e s

Les techniques disponibles actuellement se distinguent très nettement par leur complexité (desimple GIF animés à de véritables SIG distribués), leurs coûts (mise en oeuvre, maintenance,achat logiciel), leur ouverture (multi-plateforme, plug’in ou non, client-serveur ou traitementclient).

Au sein de ces multiples approches du « Web mapping » nous avons pris le parti dedévelopper des applications simples, qui reposent sur la création d’un dallage automatiqueà partir d’un SIG bureautique. La spécificité de cet atelier e-Carto, et de l’atlas résultant estd’être complètement autonome : aucun serveur cartographique n’est nécessaire. L’atlas estproduit ou mis à jour à partir d’un outil SIG et d’une base de données géo-référencées enquelques minutes. Il est ensuite accessible sur n’importe quel média : CD-rom, Internet,Intranet, Extranet. Les caractéristiques des atlas produits par e-Carto sont les suivantes :

Interface simple et intuitive adaptée à un large public (non cartographes et nonspécialistes SIG)

Compatibilité avec les navigateurs standards (Internet explorer et Netscape version 4 ouplus)

Rapidité de chargement et de navigation (simple chargement d’image sans interactionavec un serveur). Les fichiers téléchargés pèsent en moyenne moins de 30k, y comprispour les fichiers SVG et la page n’est pas rechargée à chaque navigation.

Possibilité de diffusion de l’atlas cartographique sur CD, directement. Consultation des données attributaires par popup, créés automatiquement par export de la

base de données ou par bulle étiquette en SVG Contenu de chaque carte adapté à chaque niveau d’échelle, avec une sémiologie

travaillée grâce aux possibilités offertes en amont par un SIG. L’application est consultable sur de nombreuses plates-formes de consultation ( Mac,

Windows, UNIX,) par l’intermédiaire d’un plug’in spécifique. Pas de consommation de la bande passante en dehors du simple accès intermittent de

l’utilisateur pour le chargement de nouvelles images.

D’autres applications aux services des espaces naturels ont été développées dans ce sens (cf.http://pro.wanadoo.fr/alise/ecarto) en version Html. Le langage SVG ouvre de nouvellespossibilités comme nous allons le présenter dans le cadre de cet atlas du Parc naturel régionalde Lorraine.

Le choix d’export au mode SVG :

Tout en étant conscients du coté précurseur de cette technologie qui repose sur letéléchargement d’un plug’in (cf. tableau ci-dessous), nous considérons cette voie commeprometteuse pour les raisons suivantes :

L’intégration du plug’in SVG d’Adobe au sein de la dernière version d’Acrobat, rend cetatlas directement consultable pour beaucoup d’utilisateurs sans téléchargement.

La recommandation officielle devrait amener certains constructeurs à l’intégrer dans leurnavigateur en standard.

De nombreux constructeurs (Adobe, Apple, Autodesk, Corel, HP, IBM, Quark et Xerox)ont rejoint le comité SVG du W3C et participent activement à sa mise au point.

Toute une communauté de cartographes et développeurs se sont réunis autour de ce sujetpour faire émerger de nouvelles voies en WEB mapping, en témoigne les trois dernièresmanifestations dédiées à ce thème : Open SVG à Zurich, Vancouver, Tokyo et laprochaine édition qui se tiendra cette année en Hollande.

TABLEAU RECAPITULATIF SUR LE FORMAT SVG

PROBLEMATIQUE ATOUTS LIMITES COMMENTAIRESAPPLICATION

Application XML Langage structuré qui facilite lestockage, la préparation et lalivraison d’information sur Internet.

Considéré comme le langaged’avenir du Web.

Recommandations W3C

Ayant le statut de recommandationofficielle cette décision devraitobliger tout navigateur digne de cenom à être capable de lire ce format.

Certaines recommandations du W3Cn’ont pas eu les effets attendus.

Open Source Format texte donnant accès au codesource.S’inscrit dans la Open Source

L’accès aux sources constitue une limitepour certains

Le principe de dallage que nousavons retenu limite ce problème (cf.P 8)

Graphisme hauterésolution

Un format vectoriel antialiasing,lissée, pas de problème d’échelleredimensionnable à loisir sans pertede qualité.

Plug’in Devrait être intégré aux futursnavigateurs.

Pour le moment c’est l’obstacle majeur àl’utilisation de ce format : 2 Mo àtélécharger.

Poids dugraphisme

Format vectoriel léger compressé :« gzipper ».

Plus lourd tout de même que le SWF deFlash qui est binaire.

Caractéristiquetechnique

Indexation des textes dans lesmoteurs de recherche et recherche decaractères dans la fenêtre graphiquepar clic droit.

Nombreux avantages pour le web-mapping.

Animation De nombreuses fonctionnalitésd’animation.

Monde de l’animation et des graphistesplutôt orientés vers Flash…pour lemoment.

Fonction non essentielle pour leWeb mapping

Compatibilité Quelques Problèmes de compatibilitéentre les différentes versions denavigateurs

Boucle d’autodétection installéedans notre application. Garanti letéléchargement si nécessaire.

Communautéd’utilisateurs

Communauté en devenir, la preuveen est avec l’organisation de la 2èmeSVG Open Conference.

Notoriété Format encore peu connu du grand publicmais dont les réalisations récentes sontcroissantes.

Avantage indéniable au SWF deFlash côté notoriété.

Source : Mathieu Noucher, Alisé

2 . 2 . R e p r é s e n t a t i o n e t i n t e r a c t i o n à l ’ a i d e d u S V G :

Nous allons présenter dans ce chapitre quelques exemples de mise en œuvre du format SVGdans le cadre de cet atlas, tout en rappelant quelques fondements théoriques de ce langage.

Une des spécificités du langage SVG est de dissocier l’aspect sémantique d’un objet (le typede la zone) de l’aspect visuel (sa représentation) qui sera affecté à l’aide d’une feuille de styleexterne.

Fig 5. Illustration de la représentation d’une commune au survol de la souris

Ainsi l’objet commune « Essay et Maizerais » ci-dessus est représenté sous la forme d’unpath ou chemin dans le fichier SVG comme suit :

<path id="Communes--pnrl79" d="M35328,12035 l-704,-895 l-8,-567 l1745,-1343 l-200,-403 l289,-1729 l916,-749 l725,-1691 l1905,-563l327,-1047 l807,578 l-552,442 l350,432 l-1011,930 l-192,1010 l657,682 l723,-190 l190,403 l333,-17l388,999 l619,-65 l510,2941 l-3019,-150 l-1239,277 l-1763,1083 l-354,692 z " />

Et son Style est décrit dans la feuille de style à l’aide de la classe suivante :.Communes—pnrl {fill:rgb(255,165,165);fill-opacity:0.01;fill-rule:evenodd;stroke:rgb(120,120,120);stroke-width:244.356;stroke-antialiasing:true; }

Les possibilités en matière de sémiologie graphique sont très riches (cf. chapitre suivant)puisque l’épaisseur, les couleurs de remplissage, la transparence et d’éventuels filtres dedégradés peuvent être appliqués à chaque objet de manière sélective selon l’échelle et ce demanière automatique grâce à l’atelier e-Carto.

Enfin, l’un des principaux atouts du format SVG est de permettre certaines interactions avecl’utilisateur grâce à un langage de script (javascript). Ces opérations permettent de modifierdynamiquement la représentation DOM du document SVG.

Ainsi le survol d’une commune entraîne immédiatement (le traitement est réalisé sur le posteclient) trois actions (cf. figure 5 ci-dessus) :

• l’affichage d’une petite info-bulle, verte sur la carte, indiquant le nom de la commune• le remplissage de cette commune en dégradé orange jaune, pour bien mettre en évidence

les contours de cette entité• l’affichage en bas de la fenêtre de données complémentaires (INSEE, population) qui sont

directement exportées depuis la table attributaire.

De nombreuses autres interactions ont également été développées dans le cadre de cet atlas duP.n.r.L., comme par exemple :

1. Navigation à partir de la carte miniature par simple « glisser/déplacer » durectangle de position. Changement de zoom par click sur les boutons de zoom oudéplacement du rectangle de position et possibilité de retour au zoom minimaldirectement.

Fig 6. Exemple d’utilisation des différents outils de navigation

2. Zoom automatique sur une entité (commune, rivière, znieff, points remarquables,etc.) et Clignotement de cette entité à l’affichage du résultat.

(a)

(b)Fig. 7. Résultat de la recherche d’entité à partir du menu déroulant sur une commune(a) et une zone natura 2000 (b)

3. Mesure d’éléments linéaires ou surfaciques avec affichage de la longueur du derniersegment (1.7 km) et de la longueur cumulée (9.7 km).

Fig. 8. Mise en œuvre de l’outil de mesure de surface ou de longueur

2 . 3 A d a p t a t i o n d e l a s é m i o l o g i e a u x d i f f é r e n t e s é c h e l l e s

Un des atouts de l’atelier e-Carto est de placer la représentation cartographique au centredes priorités. L’outil e-Carto permet facilement d’obtenir un atlas ou la sémiologie graphique

est soigneusement choisie et adaptée à chaque niveau d’échelle (zoom sémantique) et ce ens’appuyant sur les fonctionnalités du SIG.

Au premier niveau d’échelle, l’atlas permet d’avoir une vision globale de l’ensemble duterritoire selon le thème choisi. Les annotations sont limitées car elles sont peu lisibles à cetteéchelle. Le survol des entités permet cependant d’avoir des compléments d’information(rivières principales, nom de commune, ...).

Fig 9. Visualisation de l’occupation du sol au niveau global

Au niveau 2, l’information s’enrichit de toponymes ou de noms d’entités (nom de route, nomdes ZNIEFF). La largeur des éléments linéaires est adaptée à l’échelle de visualisation,comme le montre l’exemple ci-dessous sur la thématique Occupation du sol :

Fig 10. Visualisation de l’occupation du sol à l’échelle intermédiaire (notez le MNT qui donne du “relief” par transparence)

Au niveau le plus fin, l’information s’enrichit encore et l’on peut choisir d’afficher en optionle SCAN 100® de l’IGN en fond d’écran ou bien encore de labelliser les routes, rivières oud’autres éléments qui concourent à la bonne reconnaissance du territoire du Parc par unutilisateur quelconque.

A chaque niveau, l’utilisateur aura accès à des informations complémentaires (sous formed’info-bulle ou d’information en bas d’écran) issues des tables attributaires qui viendrontenrichir le contenu de l’atlas sans surcharger la lisibilité du document cartographique.

3 . L e s é t a p e s d e p r o d u c t i o n d e l ’ A t l a s d u P N R d e L o r r a i n e

3 . 1 D é f i n i t i o n d e l ’ i n t e r f a c e e t d e s f o n c t i o n n a l i t é s

La première étape de la production de cet Atlas a consisté à s’accorder avec les objectifs viséspar le P.n.r.L. Il fallait cerner le public ciblé, en déduire le type d’interface (esthétique etcomplexité) et le type de fonctionnalités choisies.

Le choix d’une interface est importante dans la mesure ou elle détermine la premièreimpression de l’internaute qui le consulte : il pourra se trouver dérouté par une interface tropriche ou au contraire séduit par une interface colorée simple et accessible. Dans le cas duP.n.r.L. la cible grand public imposera une interface assez dépouillée. La charte graphiquerappellera la composante environnementale d’un tel Atlas.

Voici une première maquette de l’interface de l’Atlas :

Fig 11. Interface de consultation de l’atlas SVG

L’atelier e-Carto sera alors adapté pour répondre à cette demande et de nouvellesfonctionnalités seront développées en amont. Les fichiers SVG résultants seront ensuiteanimés par le biais de routines javascript.

Il faut à ce propos saluer la communauté des utilisateurs du langage SVG, qui met souvent àdisposition des bibliothèques de script conséquentes. Celles-ci, quand elles existent, serontlargement adaptées à nos propres besoins. Le portail CartoNet (www.carto.net) et le site deMichel Hirtzler (http://pilat.free.fr/) en sont de bons exemples.

3 . 2 M i s e e n p l a c e d e l a b a s e d e d o n n é e s

Constitution d’une BD homogène sur le territoire du ParcLa constitution d’une base de données géographique homogène, renseignée, et dont les Droitsde Représentation Electroniques ont été acquittés est une étape menée en amont par la missionSIG du P.n.r.L. Elle constitue un travail essentiel et dont les délais ne doivent pas être sous-estimés pour que le travail du prestataire se déroule dans de bonnes conditions.

Choix des référentiels, validation et mise en œuvre de la sémiologie et de la labellisation.Cette étape est indispensable et déterminante pour la qualité graphique de l’atlas résultant.Nous avons su développer une réelle compétence sur le sujet, en témoigne les exemples diverssur le site d’e-Carto.

Des règles spécifiques seront adoptées pour favoriser la consultation sur Internet qui présentedes contraintes très différentes d’un atlas papier.

Dans notre exemple, les référentiels seront choisis judicieusement afin de :

ne pas masquer l’information principale (ex : occupation du sol, périmètres ZNIEFF)

de faciliter le repérage de l’utilisateur quelle que soit l’échelle de visualisation (Villesportes au niveau 1, limite communale au niveau 2, ensemble des tronçons route et rivièreau niveau 3).

De limiter le poids des images et fichiers exportés.

Toute cette phase du travail se déroule sur le SIG en amont de l’exportation par l’atelier e-Carto.

3 . 3 E x p o r t d e l ’ a t l a s a u f o r m a t S V G .

Cette dernière étape qui repose sur l’atelier e-Carto est rapide et simple. Des boites dedialogues permettent de guider l’utilisateur à travers les différentes étapes et lui permettent depersonnaliser largement l’atlas résultant. Cette étape de production ou de mise à jour nenécessite ainsi aucune compétence en programmation, ni de connaissance des langages SVG,javascript ou HTML.

C’est à ce niveau que se fait le choix d’exporter des thèmes au format SVG, couchesvectorielles qui permettront une interaction avec l’utilisateur (label, info bulle et informationcomplémentaire qui s’affiche lors du survol d’une entité) ainsi que le choix des champs quiviendront renseigner les entités graphiques exportées.

Fig 12. Exemple de boite de dialogue guidant l’export de l’Atlas sous e-Carto.

Les autres thèmes seront placés dans l’image de fond. Cette complémentarité entre leformat vectoriel et le format Image permet d’optimiser le poids des fichiers résultants(tous inférieurs à 100 Ko). Il est en effet assez irréaliste de pouvoir consulter un MNT surl’ensemble du P.n.r.L. au format SVG dans des délais courts. Le format image est dans ce casbien plus adapté.

Des versions successives ont été soumises très régulièrement au parc. Un simple espace FTP aété nécessaire pour cette étape de développement de l’atlas et a permis de finaliser laproduction de l’atlas dans des délais courts (moins de 4 mois). Une fois l’atlas livré, lescontraintes d’hébergement et d’administrations sont minimes pour le P.n.r.L. Aucune couchelogicielle n’est nécessaire sur le serveur. Le Parc naturel régional de Lorraine dispose en outredes outils pour lancer, rapidement et de manière autonome, une mise à jour éventuelle decet Atlas.

Nous vous invitons à consulter l’Atlas cartographique interactif prochainement en ligne surhttp://www.pnr-lorraine.com (onglet : Atlas SVG / Cartographie). Les financeurs qui ontpermis la réalisation de cet outil sont le Conseil Régional de Lorraine et les Fonds européens(Objectif II).

Coordonnées :

Parc naturel régional de Lorraine – Logis Abbatial –Rue du Quai – BP35 – 54701 PONT A MOUSSON Cedex.Tél. : 03.83.81.67.67. Télécopie : 03.83.81.33.60

Alisé - 340 Allée du Terral – 34430 St Jean de Védas.Tél. :04.67.42.61.00. E-mail : Helene.durand@wanadoo.fr.Site WEB : http://pro.wanadoo.fr/alise