Création de cartes interactives dans une WebApp

Facebook Twitter Google Plus Linkedin
Blog : Création de cartes interactives dans une WebApp

Nous vous proposons ce retour d’expérience à la suite de la création d’une WebApp permettant une visite virtuelle du Mondial de l’Automobile 2014 à l’aide d’une carte interactive et de trouver facilement des informations sur les exposants. Il était nécessaire de pouvoir mettre à jour en permanence et de façon souple les contenus éditoriaux.

Nous avons choisi d’utiliser le CMS SPIP associé à la librairie JavaScript Leaflet. Nous avons préféré Leaflet à, notamment, OpenLayer - deux solutions Open Source - pour la simplicité de sa mise en œuvre, tout en répondant à nos besoins.
L’intégration en Responsive Design sait faite à l’aide de Bootstrap 3.

A partir des maquettes en Illustrator nous avons utilisé MapTiler pour le découpage des tuiles. C’est ensuite le Système d’Information Géographique (SIG) QGIS qui a pris le relais pour nous permettre de créer les couches vectorielles définissant les coordonnées des exposants sur les couches raster. Les coordonnées ont été exportées au format JSON. A chaque couple de coordonnées des exposants était associé un numéro ID qui nous a permis de les relier aux articles SPIP correspondants.

Il a été nécessaire d’optimiser le système afin de disposer d’une vitesse de téléchargement et d’affichage satisfaisante à partir d’un smartphone. En effet, un flux JSON était généré automatiquement par SPIP en fonction des informations saisies dans la base de données. Notre premièr réflexe a été de le lire à la génération des exposants, ce qui n’était pas du tout efficace. Nous avons donc décidé d’insérer le JSON directement dans le code d’une manière dynamique. Cela a considérablement augmenté la vitesse de chargement des cartes. On est passé d’un chargement lent et rébarbartif à un temps de chargement correct qui permet une navigation fluide.


Commentaires


Laisser un commentaire

Contactez-nous !

  • 01 40 09 18 18

Suivez-nous...

Nos Services

Nos services s'articulent autour des thèmes suivants :

  • Création & refonte de sites web SPIP
  • Webmastering, référencement, SEO
  • Applications métiers et CRM Dolibarr
  • Création de contenu éditorial et vidéo
  • Web App., iOS & Android

Qui sommes-nous ?

Artaban est une agence web qui s'appuie sur une petite équipe pluridisciplinaire. Nous sommes des artisans alliant souplesse, compétence et savoir-faire.

Mots clés