More about Mapgears...

Mapgears labs

Matane, An attractive and lively city!

A web mapping application demo of Matane city.


Demo goal and origin

The goal of this demo is to show the attractions of a city using various navigation methods from using an OpenStreetMap map and a contextual information list. We borrowed a Mapbox tutorial to make this demo using Leaflet.


There are several possible ways to obtain the information:

  • Scroll the left list of points of interests down using the mouse or keyboard
  • Click on a point of interest on the list or on the map

In the “Maison Horace-Bouffard” description, we also added a link to get the directions from the tourist information office in Matane to that location.

We also added a link on the top of the list that displays a slideshow of pictures dynamically obtained from Flickr using their geolocation and a “matane” search tag.


To find out more about the technologies used in this application, visit their websites: Leaflet, Lightbox, jQuery, jQuery UI and OpenStreetMap.

Tags of this article