Mapgears labs

Introduction à l'accrochage d'entités dans ol3!

2015-05-12T12:00:00Z

La version 3.5.0 d’ol3 (OpenLayers 3) est maintenant disponible. Avec elle vient l’ajout la nouvelle fonctionnalité d’accrochage d’entités géographiques vectorielles!

Qu’est-ce que l’accrochage d’entités géographiques?

Dans OL3, vous pouvez dessiner ou modifier des entités géographiques vectorielles sur la carte à l’aide des objects “interactions” de type “Draw” et “Modify”. La nouvelle interaction de type “Snap” apporte la possibilité d’effectuer un accrochage à d’autres entités existantes pendant que l’usager dessine ou modifie une entité. L’accrochage peut être fait sur un coin ou sur le bord d’une entité.

Cela amène l’édition d’entités géographiques vectorielles au même niveau qu’un SIG de bureau!

Comment ça marche?

Voici quelques détails techniques sur la façon dont cela fonctionne.

L’interaction de type “Snap” écoute les événements de navigateur de la carte dans le but de modifier ses coordonnées internes, qui sont à l’origine égals à la position du curseur de la souris, par l’emplacement d’un coin ou du bord d’une entité à proximité. Voilà le secret derrière la fonctionnalité!

Par conséquent, afin de permettre aux interactions de type “Modify” ou “Draw” de fonctionner avec l’option d’accrochage, l’interaction de type “Snap” doit être ajouté après ceux-ci, ce qui lui permet d’effectuer sa magie en premier.

Les participants

La fonctionnalité a été lancée par Fran Peručić, de Promet I Prostor à Zagreb Croatie. Alexandre Dubé de Mapgears Inc. à Saguenay QC Canada s’est joint à lui pour participer à son développement et pousser de l’avant sa réalisation afin d’être révisé par l’équipe de développement sénior de OL3. Andreas Hocevar de Boundless a révisé le code, contribué à l’organisation et au découpage des tâches à accomplir et a finalement appliqué le patch pour le dépôt GitHub OL3. Plusieurs autres développeurs ont également participé via des contributions diverses, telles que des corrections de bugs, une meilleure documentation, etc.

Un merci spécial à tous les développeurs et leurs entreprises qui ont joint leurs efforts pour faire de cette superbe fonctionnalité un grand succès!

Références

OL3 est vraiment génial! Visitez son site Web afin d’y explorer ses nombreux exemples et constater à quel point cette librairie est puissante: OpenLayers 3.

Intégration de données publiques dans un portail web dans le domaine minier

2013-10-03T10:00:00Z

Le défi GéoHack 2013 réalisé par Julien-Samuel Lacroix de Mapgears et coordonné par Simon Duchaine de MRB & associés.

Description du défi

MRB & associés est une compagnie qui oeuvre dans le domaine minier, plus précisément dans la gestion de données d’exploration. L’entreprise veut offrir à ses clients de nouvelles solutions de consultation de leurs données en utilisant des services Web existants combinés à leurs données d’exploration. Le tout via une interface web simple et intuitive.

Parmis les fonctionnalités voulues :

Affichage d’un shapefile (ex. claim public) rapide dans une interface web
Analyse des éléments par un outil de requête simple
Diffusion de ces claims en KML ou comme service web
Intégration de données ouvertes (SIGEOM) et mise-à-jour automatisées en provenance de GESTIM

Réalisation

Le défi s’est divisé en deux parties: la création de cartes avec les données géospatiales et la création d’une interface de cartographie Web dans laquelle elles ont été affichées.

Les cartes

Simon Duchaine s’est occupé de la production de cartes à l’aide des logiciels MapServer et ScribeUI, ce qui a permis une gestion rapide et efficace des données afin qu’elles soient transformées en images de cartes disponibles pour l’interface.

L’interface Web

Julien-Samuel Lacroix, quand à lui, a créé l’interface Web à l’aide de ExtJS 4 et la partie cartographique à l’aide de GeoExt 2 et OpenLayers 2.12. L’architecture MVC supportée nativement dans ExtJS a été utilisée afin de bien découper les composantes de l’application et a aussi permis à celle-ci d’être compressée en un seul fichier JavaScript à des fins de performance.

En quoi consiste le Géohack

Le Défi GéoHack de Montréal 2013 est un événement dérivé des hackathons qui a eu lieu en marge du Colloque Géomatique 2013 le 2 octobre 2013. Les participants regroupaient des développeurs dans le domaine de la géomatique ainsi que des gens d’affaires de différentes entreprises et organismes qui agissaient en tant que “Donneurs d’ouvrages” pour des sujets proposés.

Chaque équipe regroupait un “Donneur d’ouvrage” et jusqu’à trois développeurs. Ensemble, ils avaient le défi de réaliser une application de cartographie Web en une seule journée. Celles-ci devaient être publiées sous licence libre afin de tirer profit du patrimoine géographique et des données ouvertes de la communauté québécoise.

La page de bilan des défis peut être consultée afin d’en savoir plus à propos des différents projets qui ont été réalisés au cours de l’événement.

À propos de MRB & associés

MRB & associés offre une vaste gamme de services géotechniques et d’exploration minière. Gestion de projets, stratégie d’exploration, analyse de données, évaluation de ressources et rapports techniques conformes à la norme canadienne 43-101 sont parmi les services qu’ils offrent. Outre les aspects techniques de l’industrie minière, leur réseau de professionnels associés collabore à la création de matériels promotionnels tels les graphiques, cartes, et documents de présentation à utiliser dans les expositions ou campagnes de financement privé.

Références

Pour en savoir plus à propos des technologies utilisées dans cette application, visiter leur site web respectif: ExtJS, GeoExt 2, OpenLayers, MapServer et ScribeUI.

Le dépôt du code source de l’application réalisée pendant le défi est disponible sur GitHub.

Matane, Une ville attractive et animée!

2013-05-21T11:00:00Z

Un démo d’application de cartographie Web de la ville de Matane.

Objectif et origine du démo

Ce démo a pour objectif de montrer les attraits touristiques d’une ville en utilisant différentes méthodes de navigation entre une carte OpenStreetMap et des informations contextuelles. Nous avons adapté un tutoriel de Mapbox pour faire ce démo avec Leaflet.

Fonctionnalités

Plusieurs méthodes de navigation sont possibles:

Dérouler la liste des points d’intérêts de gauche avec la souris ou le clavier
Cliquer sur le point d’intérêt désiré dans la liste déroulante ou sur la carte

Nous avons aussi ajouté un lien dans la description de la Maison Horace-Bouffard permettant d’afficher le trajet pour s’y rendre à partir du bureau d’accueil touristique de Matane. De plus, sur la page couverture de la liste déroulante, un lien Flickr ouvre un diaporama de photographie provenant de ce site. Ces images sont récupérées dynamiquement sur Flickr à l’aide de leur géolocalisation et d’un critère de recherche “matane”.

Références

Pour en savoir plus à propos des technologies utilisées dans cette application, visiter leur site web respectif: Leaflet, Lightbox, jQuery, jQuery UI et OpenStreetMap.

Carte interactive pour la ville de Nouméa

2012-12-12T12:00:00Z

La maquette d’application de cartographie Web que Mapgears et ses partenaires SiGéO et SCSI ont proposé à la ville de Nouméa.

La demande d’origine

Pendant l’automne 2012, la ville de Nouméa en Nouvelle-Calédonie était en phase de refaire une beauté à son site Web. Du même coup, ils avaient besoin d’une application de cartographie Web pour rendre disponible leurs données géospatiales au grand public.

Mapgears a été appelée à produire une maquette de cette application en partenariat avec SiGéO et SCSI, des entreprises locales de Nouvelle-Calédonie.

Les technologies utilisées

L’application a été construite entièrement avec des technologies à licence libre. La partie Web est basée sur OpenLayers comme moteur cartographique principal et se marie avec GeoExt et ExtJS pour offrir des outils tels que les curseurs d’opacité et de niveau de zoom.

La partie serveur comprend MapServer pour dessiner la carte ainsi que la légende. Celle-ci a été tuilée et servie par MapCache. Une couche vectorielle de travaux publics est servie par TinyOWS en mode éditable à l’aide du protocole de l’OGC WFS-T. L’outil de routage est basé sur pgRouting pour calculer les chemins les plus courts en utilisant la donnée de la ville tout en contournant les travaux lorsque possible. Le module MapFish Print permet l’exportation de la carte en PDF.

Le résultat est très impressionnant!

Quelques outils particulièrement intéressants

Voici quelques détails supplémentaires concernant certains outils particulièrement intéressants.

Consultation des lieux d’intérêt et recherches

La consultation des lieux d’intérêt de la ville est très intuitive. Ils sont classés en catégories accessibles par des boutons avec menus déroulant en haut de la carte. En quelques clics, on obtient un résultat filtré en fonction du type de lieu recherché. Un clic sur un enregistrement retourné recentre la carte sur cet élément qui est dorénavant surligné et une info-bulle affiche les informations le concernant.

Un autre moyen d’obtenir l’information est à l’aide de l’outil de recherche par saisie de texte. Les résultats obtenus suivent la même logique que précedemment. Ce type de requête cherche dans toutes les données disponibles.

Un dernier outil de recherche spatiale, disponible en haut à droite de l’interface, permet d’obtenir une liste de lieux d’intérêt dans un rayon donné à partir du centre de la carte.

Calcul d’itinéraire

Une fois l’outil activé, un premier clic dans la carte détermine le lieu de départ et le second le lieu d’arrivée. Le chemin le plus court est calculé et dessiné dans la carte. Ce qui intéressant est que l’outil tient compte de la présence des travaux et les considère dans ses calculs. Dans l’exemple ci-bas, la rue du Pasteur Maurice LEENHARDT est en réparation tel qu’indiqué par le marqueur. L’outil considère donc que de faire un détour est un meilleur parcours.

Astuces MapServer

Le rendu de la carte est très joli, particulièrement grâce à l’effet de couleur dégradée et de la symbologie SVG. Simon Mercier explique plus en détail la recette pour Produire un effet de couleur dégradée avec MapServer dans son blogue. La Symbologie SVG est supportée depuis MapServer 6.2 et augmente considérablement la qualité des symboles de la carte.

Voir l’application en action

Vous pouvez voir l’application en action et avoir un feeling de son niveau de professionalisme. Vous pouvez également regarder cette vidéo qui explique en large ses fonctionnalités et comment s’en servir.

Références

Pour en savoir plus à propos des technologies utilisées dans cette application, visiter leur site web respectif: ExtJS, GeoExt, OpenLayers, MapFish Print MapServer, MapCache, pgRouting et TinyOWS.

Investissements du Québec en Santé

2012-08-21T08:48:00Z

Budget annuel du Québec pour la santé, le service de la dette et les autres postes budgétaires

Une application cartographique Web de conçu et réalisé par l’équipe Mapgears Québec.

L’engin de cartographie Web utilisé est Leaflet. L’application utilise également jQuery et D3 pour la manipulation du HTML et pour les animations diverses.

La carte de fond est publié par un serveur MapCache à l’aide du protocole TMS du standard OGC. Les points contenant l’information d’investissements du Québec en Santé proviennent des Données Ouvertes du Gouvernement du Québec.

Pour plus de détails, voir l’application en-ligne.

Voir le Démo en action
En savoir plus à propos de D3
En savoir plus à propos des [Données Ouvertes du Gouvernement du Québec] quebec_opendata
En savoir plus à propos de jQuery
En savoir plus à propos de Leaflet
En savoir plus à propos de MapCache

Suivi de personnel

2012-08-20T10:00:00Z

Surveillez le personnel d’événements extérieurs à l’aide d’une application de cartographie Web interactive

Cette application de cartographie Web a été construite et utilisée à des fins de surveillance de personnel d’événements extérieurs, tels que des concerts de festivals, sur une carte interactive. Elle a été conçue pour être utilisée par des navigateurs standards ainsi que sur des tablettes.

Des zones et icônes représentant le personnel sont affichés sur la carte et rafraichie à toutes les 15 secondes, ce qui émule ce dont l’application aurait l’air pendant un événement réel.

L’application client utilise OpenLayers, GeoExt et ExtJS comme librairies JavaScript. La carte de fond a été crée à l’aide de MapServer Basemaps et Imposm avec les données gratuites d’OpenStreetMap et est publiée à l’aide d’un serveur MapCache utilisant le protocole TMS du standard de l’OGC. Les éléments vecteurs de la carte sont obetenus à l’aide du protocol WFS du standard OGC, à l’aide de MapServer connecté à une base de données PostGIS qui contient les données des zones et des points.

Le démo lui-même contient un bouton “About this demo”, qui contient plus de détails techniques.

Voir le Démo en action
En savoir plus à propos de Basemaps
En savoir plus à propos d’ExtJS
En savoir plus à propos de GeoExt
En savoir plus à propos d’Imposm
En savoir plus à propos de MapCache
En savoir plus à propos de MapServer
En savoir plus à propos d’OpenLayers
En savoir plus à propos d’OpenStreetMap
En savoir plus à propos de PostGIS

Outil d'Analyse de données géospatiales

2012-06-15T13:50:00Z

Visualisez des données géospatiales de trois manière différentes dans la même application: dans une carte, un tableau et un diagramme.

Cette application de cartographie Web démontre trois manière différentes de visualiser de la donnée géospatiale: dans une carte interactive, dans un tableau ressemblant à un tableur standard et dans des diagrammes, comme un diagrame à pointes de tartes ou à bandes.

L’application client utilise les librairies JavaScript OpenLayers 2.12, GeoExt 2.0 et ExtJS 4.1.0. La carte de fond utilise les données d’OpenStreetMap et est publiée à l’aide du protocole TMS du standard OGC par un serveur MapCache. Les données vectorielles sont obtenus via le protocole WFS du standard OGC par l’entremise d’un serveur MapServer.

La page du démo elle-même contient une fenêtre contenant de l’information additionnel à son propos.

Voir l’Application en action
En savoir plus à propos d’ExtJS
En savoir plus à propos de GeoExt
En savoir plus à propos de MapCache
En savoir plus à propos de MapServer
En savoir plus à propos d’OpenLayers
En savoir plus à propos d’OpenStreetMap

Backbone.Postgis

2012-03-01T10:00:00Z

Simple application Backbone, qui est propulsé par des données de couches postgis. L’application affiche les entités sur une carte et ces attributs dans une table. La navigation des couches utilise de la pagination coté serveur.

Voir le démo en action
En savoir plus sur BackboneJS
En savoir plus sur Backbone-Boilerplate
En savoir plus sur Twitter Bootstrap
En savoir plus sur PostGIS
En savoir plus sur Flask

Gaz à effet de serre

2012-02-04T15:00:00Z

L’application sur les Émissions de Gaz à effet de serre.

L’application sur les Émissions de Gaz à effet de serre (GES) a pour objectif de montrer deux choses:

la densité des installations produisant ces GES
la distribution des émissions de GES au Canada.

Dans une carte, on utilise souvent la “Heatmap” pour montrer la densité d’une valeur quelconque sur le territoire. Par contre, nous avons voulu produire un effet de densité à l’aide d’un grid hexagonal. De plus cette application utilise un effet particulier (fish eyes) pour permettre à l’utilisateur d’avoir accès à tout les points de la carte.

Voir le Démo en action
En savoir plus à propos de Leaflet

WFSTFeatureEditing UX

2011-05-13T15:00:00Z

Modifiez des éléments vectoriels directement sur une carte interactive à l’aide d’un outil d’édition riche en fonctionalités et facile à configurer

Ce démo contient un outil qui génère automatiquement tous les outils requis pour accomplir de l’édition WFS-T d’éléments vectoriels à l’aide de GeoExt, OpenLayers, ExtJS, GXP et TinyOWS.

Plus de détails sont disponibles sur la page du démo.

Voir le Démo en action
En savoir plus à propos d’ExtJS
En savoir plus à propos de GXP
En savoir plus à propos de GeoExt
En savoir plus à propos d’OpenLayers
En savoir plus à propos de TinyOWS

Stations météorologiques

2010-09-24T15:00:00Z

Visualisez rapidement de l’information météo à partir de stations spécifiques

Ce démo contient une carte OpenLayers dans laquelle sont inclus des points vecteurs provenant d’un serveur TinyOWS distant. Seulement une partie des points sont retournés par la requête pour les obtenir en fonction du niveau de zoom de la carte. Aussi, le libellé affiché ainsi que la couleur du point dépend d’un contrôle de sélection personnalisé à droite.

Les points représentent des stations météorologiques et contiennent de l’information telle que la température, la pression, vitesse du vent, etc. Les données affichées sont fictives et statiques.

Le code JavaScript a été compressé à l’aide de l’outil YUI Compressor.

Voir le Démo en action
En savoir plus à propos de TinyOWS
En savoir plus à propos d’OpenLayers
En savoir plus à propos de YUI Compressor

BDGA WFS-T

2009-01-22T15:00:00Z

Éditez des éléments vecteurs directements dans une carte interactive à partir de votre navigateur.

Ce démo contient une carte OpenLayers avec des éléments vecteurs provenant d’un serveur distant qui peuvent être modifiés à partir d’outils d’édition et sauvegardés vers le serveur. Le protocole WFS-T de la norme OGC est utilisé pour les transactions de lecture et d’écriture. Le serveur utilisé est TinyOWS.

Voir le Démo en action
En savoir plus à propos d’OpenLayers
En savoir plus à propos de TinyOWS