hypermap, future balise HTML ?#

Date de publication initiale : 11 juin 2010

La cartographie et la localisation font partie intégrante de notre environnement web actuel. Le succès d'application comme GoogleMaps avec plus de 10 millions de cartes créées¹ ou encore Google Earth qui recense plus de 500 millions de téléchargements² en est la preuve concrète. Cette ouverture vers le spatial a apporté, à mon avis, autant de bouleversements que l'ouverture sociale du Web 2.0.

La plupart des cartes que j'ai pu voir se résument à quelques marqueurs auxquels ont été ajoutées des informations complémentaires. Rien de très méchant "cartographiquement" parlant. Néanmoins et même si les API sont relativement faciles à comprendre, il faut être un minimum intéressé par la programmation pour créer sa propre application.

D'où l'idée que je développe dans ce billet, celle d'une futur balise HTML <hypermap></hypermap>, qui serait interprétée directement par votre navigateur. Celle-ci permettrait de créer automatiquement une carte en fonction des caractéristiques associées. Un exemple de squelette HTML est présenté ci-dessous afin d'illustrer mon propos :

<body>
    <hypermap>
        <mapOptions>
            <zoom>4</zoom>
            <lonlat>273950;5841011</lonlat>
            <static>False</static>
        </mapOptions>
        <layers>
            <layer>OSM</layer>
        </layers>
        <control>
        </control>
        <data>
            <point>
                <lonlat>313385;6242152</lonlat>
                <content>Paris</content>  
            </point>
            <point>
                <localisation>Nice,France</localisation>
                <content>Nice</content>  
            </point>
        </data>
    </hypermap>
  </body>

Détaillons un peu plus en détails chacune des sous balises :

mapOptions : spécifie les caractéristiques générales de la carte
layers : défini les couches à afficher
control : ajoute des contrôles spécifiques à la carte
data : définie les données qui seront affichées. Les positions peuvent être données au format longitude/latitude ou simplement nommées par leur localisation (celle-ci sera converti grâce à la librairie YQL)

De la théorie à la pratique, il y a tout de même un monde. C'est pourquoi, j'ai décidé d'implémenter cette idée afin de valider cette preuve de concept (exemple). Pour cela j'ai utilisé comme librairie OpenLayers et Prototype et comme source de données OpenStreetMap. L'architecture du DOM est la même que l'exemple présenté ci-dessus. Si vous affichez le code source de la page, vous ne verrez rien d'autre qu'une balise hypermap !

Info

Le serveur hébergeant la démonstration n'étant plus disponible depuis de nombreuses années, la démonstration, autre fois intégrée en iFrame est désactivée.
<iframe src="http://geotribu.net/applications/tutoriaux/openlayers/hypercarte/hypermap_prototype.html" width="600" height="500" scrolling="no" bordure="0px"></iframe>

Auteur·ice#

L'équipe Geotribu#

Toute l'actualité de la géomatique Open Source ! Mais aussi des tutoriels, des billets de blog, des tests et surtout une bonne humeur géographique !

Commentaires

Afin de favoriser les échanges constructifs, merci de préférer le pseudonymat à l'anonymat. Pour rappel, l'adresse mail n'est pas exposée publiquement et sert principalement aux notifications de réponse. Les commentaires sont automatiquement republiés sur nos réseaux sociaux pour favoriser la discussion. Consulter la page sur la confidentialité et les données personnelles.
Une version minimale de la syntaxe markdown est acceptée pour la mise en forme des commentaires.
Propulsé par Isso.

Ce contenu est sous licence Creative Commons BY-NC-SA 4.0 International Pictogramme Creative Commons Pictogramme Creative Commons BY Pictogramme Creative Commons NC Pictogramme Creative Commons SA