Mapgears labs 2013-11-22T10:23:00Zhttp://labs.mapgears.com/en/archive/atom.xml/Integration of Public Data in a Web Portal in MiningAlexandre Dubé2013-10-03T10:00:00Z2013-10-03T10:00:00Zhttp://labs.mapgears.com/en/archive/mrbportail
<p>The GeoHack Challenge 2013 by Julien-Samuel Lacroix of Mapgears and
coordinated by Simon Duchaine of <span class="caps">MRB</span> <span class="amp">&</span> associates.
<p><a href="http://geohack2.mapgears.com/mrbportail/simple.html">
<img alt="Preview" src="http://labs.mapgears.com/media/images/mrbportail-preview.jpg" />
</a></p></p>
<h2>Challenge Description</h2>
<p><a href="http://mrbweb.com/?lang=e/"><span class="caps">MRB</span> <span class="amp">&</span> Associates</a> is a company that operates in the mining industry,
specifically in exploration data management. The company
wants to offer its customers new ways of browsing their data without
changing their existing web services. All via a simple and intuitive
web interface.</p>
<p>Among the desired features:</p>
<ul>
<li>Display a shapefile (ex. public claims) quickly in a web interface</li>
<li>Data analysis with a simple query tool</li>
<li>Publishing of those claims as <span class="caps">KML</span> or as a web service</li>
<li>Integrating open data (<a href="http://sigeom.mrn.gouv.qc.ca/signet/classes/I0000_serviceWeb"><span class="caps">SIGEOM</span></a>) and automatic updates coming
from <a href="https://gestim.mines.gouv.qc.ca/MRN_GestimP_Presentation/ODM02401_ie.aspx"><span class="caps">GESTIM</span></a></li>
</ul>
<h2>Production</h2>
<p>The challenge was divided into two parts: the creation of maps using
geospatial data and the creation of a web mapping interface in which
they’re loaded.</p>
<h3>The Maps</h3>
<p>Duchaine Simon led the production of maps using
<a href="http://mapserver.org/">MapServer</a> and <a href="http://scribeui.org/">ScribeUI</a> software, which
allowed fast and efficient data management to produce images of maps
available for the web interface.</p>
<h3>The Web Interface</h3>
<p>Julien-Samuel Lacroix created the web interface using
<a href="http://docs.sencha.com/ext-js/">ExtJS 4</a> and mapping components using <a href="http://geoext.github.io/geoext2/">GeoExt 2</a> and
<a href="http://openlayers.org/">OpenLayers 2.12</a>. The <a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller"><span class="caps">MVC</span></a> architecture natively
supported in ExtJS has been used to properly manage the components of
the application and also allowed it to be compressed into a single
JavaScript file for optimal performance.</p>
<h2>What is the Geohack</h2>
<p><a href="http://defigeohackmtl.org/?page_id=51" class="image-float-left">
<img class="geohack" alt="Géohack" src="http://labs.mapgears.com/media/images/geohack.jpg">
</a></p>
<p>The <a href="http://defigeohackmtl.org/?page_id=51">GeoHack Challenge of Montreal 2013</a> is an
hackathon derivative event held around
<a href="http://www.geomatique2013.com/index.php?lang=en">Geomatics Conference 2013</a> that took place in
October 2, 2013. Participants included developers in the field of
geomatics and business people from different companies and organizations
that acted as “Ordering Customers” for subjects suggested.</p>
<p>Each team was composed of one coordinator representing the “client”
and up to three developers. Together, they had the challenge of producing
a web mapping application in a single day. These had to be published
under a free license for the benefit of the geographical heritage and
open data of the Quebec community.</p>
<p>The <a href="http://defigeohackmtl.org/?page_id=26">challenges results</a> page can be consulted to learn
more about the various projects that have been realized during the event.</p>
<div style="clear:left;"></div>
<h2>About <span class="caps">MRB</span> <span class="amp">&</span> Associates</h2>
<p><a href="http://mrbweb.com/?lang=e/" class="image-float-left">
<img class="mrb-logo" alt="MRB & Associates" src="http://labs.mapgears.com/media/images/mrb-associes-logo.jpg">
</a></p>
<p><span class="caps">MRB</span> <span class="amp">&</span> Associates provides a comprehensive array of geotechnical and
mineral exploration services. Project management, exploration
strategy, data analysis, resource evaluations and <span class="caps">NI</span> 43-101 technical
reports are just a few of the services they offer. Beyond the technical
aspects of the mining industry, their team produces professional
promotional material for exhibitions and private financing campaigns.</p>
<div style="clear:left;"></div>
<h2>References</h2>
<p>To learn more about the technologies used in this application,
visit their websites: <a href="http://docs.sencha.com/ext-js/">ExtJS</a>,
<a href="http://geoext.github.io/geoext2/">GeoExt 2</a>, <a href="http://openlayers.org/">OpenLayers</a>, <a href="http://mapserver.org/">MapServer</a> and
<a href="http://scribeui.org/">ScribeUI</a>.</p>
<p>The <a href="https://github.com/juliensam/mrbportail">source code repository</a> of the application produced during
the challenge is available on GitHub.</p> Matane, An attractive and lively city!Marc-André Barbeau2013-05-21T11:00:00Z2013-05-21T11:00:00Zhttp://labs.mapgears.com/en/archive/matane
<p>A web mapping application demo of Matane city.
<p><a href="http://cartalib.mapgears.com/demo-matane/">
<img alt="Preview" src="http://labs.mapgears.com/media/images/matane-preview.jpg" />
</a></p></p>
<h2>Demo goal and origin</h2>
<p>The goal of this demo is to show the attractions of a city using various
navigation methods from using an <a href="http://www.openstreetmap.org/">OpenStreetMap</a> map and a contextual
information list. We borrowed a <a href="http://mapbox.com/tutorial-sherlock/">Mapbox tutorial</a> to make this demo
using <a href="http://leaflet.cloudmade.com/">Leaflet</a>.</p>
<h2>Features</h2>
<p>There are several possible ways to obtain the information:</p>
<ul>
<li>Scroll the left list of points of interests down using the mouse or keyboard</li>
<li>Click on a point of interest on the list or on the map</li>
</ul>
<p>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.</p>
<p>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.</p>
<h2>References</h2>
<p>To find out more about the technologies used in this application,
visit their websites: <a href="http://leaflet.cloudmade.com/">Leaflet</a>, <a href="http://lokeshdhakar.com/projects/lightbox2/">Lightbox</a>,
<a href="http://jquery.com/">jQuery</a>, <a href="http://jqueryui.com/">jQuery <span class="caps">UI</span></a> and <a href="http://www.openstreetmap.org/">OpenStreetMap</a>.</p> Noumea City interactive mapAlexandre Dubé2012-12-12T12:00:00Z2012-12-12T12:00:00Zhttp://labs.mapgears.com/en/archive/noumea
<p>The web mapping application mockup that Mapgears and its partners
SiGéO and <span class="caps">SCSI</span> proposed to the city of Noumea, New Caledonia.
<p><a href="http://noumea.mapgears.com/">
<img alt="Preview" src="http://labs.mapgears.com/media/images/noumea-preview.jpg" />
</a></p></p>
<h2>The original requirement</h2>
<p>During the fall of 2012, the city of Noumea located in New Caledonia was
in the process of updating its website to give it a fresh new look. At
the same time, they wanted to have a web mapping application to
publish their geospatial data to the general public.</p>
<p><a href="http://www.mapgears.com/">Mapgears</a> was invited to produce a proof of concept for
this component in partnership with <a href="http://sigeo.lagoon.nc/">SiGéO</a> and <a href="http://www.scsi.nc/"><span class="caps">SCSI</span></a>,
local companies from New Caledonia.</p>
<h2>Technologies used</h2>
<p>The application is built entirely with open source technologies. The
web part is based on OpenLayers as its geographic core component in
addition to GeoExt and ExtJS to provide advanced mapping tools such as
the opacity and zoom sliders.</p>
<p>On the server side, MapServer is used to render the map and
legend. The maps are cached by MapCache for improved performance. A
vector layer used to display road construction sites is served by
TinyOWS and editable using the <span class="caps">WFS</span>-T protocol from <span class="caps">OGC</span>. The routing
tool uses pgRouting to calculate directions using the original road
network data from Noumea in addition to avoiding constuction sites
when possible. Finally, the MapFish Print module allows exporting the
map as a <span class="caps">PDF</span> document.</p>
<p>The end result is very impressive!</p>
<h2>Cool features</h2>
<p>Here are more details regarding some features of the application that
are particularly interesting.</p>
<h3>Points of interest browsing and searching</h3>
<p>The city’s points of interest browsing method is very intuitive. They
are organized in categories that are accessibles using buttons with
drop down menus in the toolbar located at the top of the map. In a few
clicks, we get a filtered list of locations of a given type. A click
on a record recenters the map to its location, which is also
highlighted, and a popup displays more information about it.</p>
<p><img alt="Points of interest browsing and searching" src="http://labs.mapgears.com/media/images/noumea-screenshot-searchtools.jpg" /></p>
<p>One more way to find locations is to use the search text box at the top
of the application. The text search results are displayed the same way as
previously explained.</p>
<p>The last query method is a geospatial search tool, which is available
at the top right of the interface. The slider position determines the radius
of the search in meters from the center of the current map view. The search
region is highlighted on the map and the results are displayed as a list
and accessible the same way as with the other search mechanisms.</p>
<p><img alt="Search by radius" src="http://labs.mapgears.com/media/images/noumea-screenshot-searchcircle.jpg" /></p>
<p><img alt="Search by radius - results" src="http://labs.mapgears.com/media/images/noumea-screenshot-searchcircleresults.jpg" /></p>
<h3>Routing</h3>
<p>Once the routing tool gets activated, a first click on the map sets
the starting location and the second click the ending location. The
shortest route is computed and rendered on the map. One interesting
thing to point out is the fact that the tool takes the presence of
road construction sites into account and includes them in its
calculations. In the example below, the
<i>Rue du Pasteur Maurice <span class="caps">LEENHARDT</span></i>
street is under repair as indicated by the marker’s
presence. So, the tool considers that taking a detour to avoid the
street repairs is a better route.</p>
<p><img alt="Routing and detour" src="http://labs.mapgears.com/media/images/noumea-screenshot-routing-detour.jpg" /></p>
<h3>MapServer tricks</h3>
<p>As usual, high quality map rendering was produced by MapServer,
including the use of a fade to white color gradient effect on the
shorelines and <span class="caps">SVG</span> symbology. Simon Mercier explains in more details
the recipe to <a href="http://simonmercier.net/blog/?p=1214">Produce a color gradient effect with
MapServer</a> in his blog (in French). The <a href="http://mapserver.org/output/svg.html"><span class="caps">SVG</span>
Symbology</a> is a new feature in MapServer 6.2 and greatly enhances
the quality of the map symbols.</p>
<h2>See the application in action</h2>
<p>You can <a href="http://noumea.mapgears.com/">see the application in action</a> and get a feeling of its high
professionalism level. You can also <a href="http://youtu.be/LY2098-0xgU">watch this video</a> that provides
an overview of its various functionalities and awesome features.</p>
<p>Please note that both the application and the video are in French.</p>
<p><a href="http://youtu.be/LY2098-0xgU">
<img src="http://labs.mapgears.com/media/images/noumea-video.jpg"
alt="Video"
title="Watch the video that explains the application features" />
</a></p>
<h2>References</h2>
<p>To find out more about the technologies used in this application,
visit their websites: <a href="http://docs.sencha.com/ext-js/">ExtJS</a>, <a href="http://geoext.org/">GeoExt</a>,
<a href="http://openlayers.org/">OpenLayers</a>, <a href="http://www.mapfish.org/doc/print/">MapFish Print</a>, <a href="http://mapserver.org/">MapServer</a>,
<a href="http://mapserver.org/trunk/mapcache/">MapCache</a>, <a href="http://pgrouting.org/">pgRouting</a> and <a href="http://www.tinyows.org/">TinyOWS</a>.</p> Quebec Health Sector investmentsSimon Mercier2012-08-21T08:48:00Z2012-08-21T08:48:00Zhttp://labs.mapgears.com/en/archive/quebec-health-sector-investments
<p>Quebec Health Sector annual budget, dept service and other sectors
<p><a href="http://investissementsquebecsante.org/">
<img alt="Preview" src="http://labs.mapgears.com/media/images/investissementsquebecsante-preview.jpg" />
</a></p></p>
<p>A webmapping application made by the Mapgears Quebec team.</p>
<p>The webmapping engine used is Leaflet. The application also uses jQuery and D3
for <span class="caps">HTML</span> manipulation and for the various animations purposes.</p>
<p>The base map is published by a MapCache service using the <span class="caps">OGC</span> <span class="caps">TMS</span> protocol. The
vector features on the map containing the investment informations come from the
Open Data of the Quebec Government.</p>
<p>For more details, see the on-line application.</p>
<ul>
<li>See the live <a href="http://investissementsquebecsante.org/">Application</a> in action.</li>
<li>Learn more about <a href="http://d3js.org/">D3</a></li>
<li>Learn more about <a href="http://jquery.com/">jQuery</a></li>
<li>Learn more about <a href="http://www.ouvert.gouv.qc.ca/">Open Data of Quebec Government</a></li>
<li>Learn more about <a href="http://leaflet.cloudmade.com/">Leaflet</a></li>
<li>Learn more about <a href="http://mapserver.org/trunk/mapcache/">MapCache</a></li>
</ul> Staff TrackingMapgears2012-08-20T10:00:00Z2012-08-20T10:00:00Zhttp://labs.mapgears.com/en/archive/staff-tracking
<p>Monitor outdoor events staff using an interactive webmapping application
<p><a href="http://labs.mapgears.com/staff-tracking/">
<img alt="Preview" src="http://labs.mapgears.com/media/images/staff-tracking-preview.jpg" />
</a></p></p>
<p>This webmapping application was built and used to monitor staff of outdoor
events, such as concerts and shows, on an interactive map. It was designed to
be used in a standard browser and tablets.</p>
<p>Zones and staff icons are displayed on the map and refreshed every 15 seconds,
mimicking what it could look like when used during a real event.</p>
<p>The client-side application uses OpenLayers, GeoExt and ExtJS as JavaScript
frameworks. The base maps was created using MapServer Basemaps and Imposm using
OpenStreetMap data and is published using the <span class="caps">OGC</span> <span class="caps">TMS</span> protocol with a MapCache
server. The features are obtained using the <span class="caps">OGC</span> <span class="caps">WFS</span> protocol, with MapServer
and come from a PostGIS database. </p>
<p>The demo itself contains a “About this demo” button, which contains more
information and technical details.</p>
<ul>
<li>See the <a href="http://labs.mapgears.com/staff-tracking/">Live demo</a> in action</li>
<li>Learn more about <a href="https://github.com/mapserver/basemaps/">Basemaps</a></li>
<li>Learn more about <a href="http://docs.sencha.com/ext-js/">ExtJS</a></li>
<li>Learn more about <a href="http://geoext.org/">GeoExt</a></li>
<li>Learn more about <a href="http://imposm.org/docs/imposm/latest/">Imposm</a></li>
<li>Learn more about <a href="http://mapserver.org/trunk/mapcache/">MapCache</a></li>
<li>Learn more about <a href="http://mapserver.org/">MapServer</a></li>
<li>Learn more about <a href="http://openlayers.org/">OpenLayers</a></li>
<li>Learn more about <a href="http://www.openstreetmap.org/">OpenStreetMap</a></li>
<li>Learn more about <a href="http://postgis.refractions.net/">PostGIS</a></li>
</ul> Feature Analysis ToolAlexandre Dubé2012-06-15T13:50:00Z2012-06-15T13:50:00Zhttp://labs.mapgears.com/en/archive/feature-analysis-tool
<p>Visualize geospatial data in three different ways in the same application:
in a map, a grid and a chart.
<p><a href="http://labs.mapgears.com/feature-analysis-tool/">
<img alt="Preview" src="http://labs.mapgears.com/media/images/feature-analysis-tool-preview.jpg" />
</a></p></p>
<p>This webmapping application shows three different ways to visualize geospatial
data: in an interactive map, in a spreadsheet-like grid and and charts, such
as pie and column charts.</p>
<p>The client-side application uses OpenLayers 2.12, GeoExt 2.0 and ExtJS 4.1.0 as
JavaScript frameworks. The base maps was built using OpenStreetMap data and is
published using the <span class="caps">OGC</span> <span class="caps">TMS</span> protocol with a MapCache server. The features are
obtained using the <span class="caps">OGC</span> <span class="caps">WFS</span> protocol, with MapServer.</p>
<p>The demo itself shows an “About this application” window upon visiting it,
which contains more information and technical details.</p>
<ul>
<li>See the <a href="http://labs.mapgears.com/feature-analysis-tool/">Live demo</a> in action</li>
<li>Learn more about <a href="http://docs.sencha.com/ext-js/">ExtJS</a></li>
<li>Learn more about <a href="http://geoext.org/">GeoExt</a></li>
<li>Learn more about <a href="http://mapserver.org/trunk/mapcache/">MapCache</a></li>
<li>Learn more about <a href="http://mapserver.org/">MapServer</a></li>
<li>Learn more about <a href="http://openlayers.org/">OpenLayers</a></li>
<li>Learn more about <a href="http://www.openstreetmap.org/">OpenStreetMap</a></li>
</ul> Backbone.PostgisAlan Boudreault2012-03-01T10:00:00Z2012-03-01T10:00:00Zhttp://labs.mapgears.com/en/archive/backbone-postgis
<p>Simple Backbone application, which is data-drived by postgis layers. The
application shows the layer features on a map and all its attributes in a
table. It use pagination to navigate through features.
<p><a href="http://labs.mapgears.com/backbone-postgis">
<img alt="Preview" src="http://labs.mapgears.com/media/images/backbone-postgis-preview.jpg" />
</a></p></p>
<ul>
<li>See the <a href="http://labs.mapgears.com/backbone-postgis">Live demo</a> in action</li>
<li>Learn more about <a href="http://backbonejs.org/">BackboneJS</a></li>
<li>Learn more about <a href="https://github.com/tbranyen/backbone-boilerplate">Backbone-Boilerplate</a></li>
<li>Learn more about <a href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a></li>
<li>Learn more about <a href="http://postgis.refractions.net/">PostGIS</a></li>
<li>Learn more about <a href="http://flask.pocoo.org/">Flask</a></li>
</ul> Greenhouse gasSimon Mercier2012-02-04T15:00:00Z2012-02-04T15:00:00Zhttp://labs.mapgears.com/en/archive/greenhouse-gas
<p>Greenhouse gas emission application.
<p><a href="http://solutionsmapgears.github.com/ghg_dataviz/gasemi.html">
<img alt="Preview" src="http://labs.mapgears.com/media/images/greenhouse-gas-preview.jpg" />
</a></p></p>
<p>Greenhouse gas emission (<span class="caps">GHG</span>) application have two goals:
<em> show the density of facilities producing those <span class="caps">GHG</span> emissions
</em> show the distribution of <span class="caps">GHG</span> emissions in Canada</p>
<p>We usually used an “Heatmap” layers to show the density distribution. But,
we tried to produce this density map using a hexagonal grid. Moreover, we
used an “fish eyes effect” with d3js librairy (d3js.org) instead of “cluster
effect” to get and view all points in the map.</p>
<ul>
<li>See the <a href="http://solutionsmapgears.github.com/ghg_dataviz/gasemi.html">Live demo</a> in action</li>
<li>Learn more about <a href="http://leaflet.cloudmade.com/">Leaflet</a></li>
</ul> WFSTFeatureEditing UXAlexandre Dubé2011-05-13T15:00:00Z2011-05-13T15:00:00Zhttp://labs.mapgears.com/en/archive/wfstfeatureediting-ux
<p>Modify vector features on an interactive map using a rich and easy to
configure editing tool
<p><a href="http://dev8.mapgears.com/geoext/mg-sandbox/geoext.ux/ux/WFSTFeatureEditing/examples/WFSTFeatureEditing.html">
<img alt="Preview" src="http://labs.mapgears.com/media/images/wfstfeatureediting-ux-preview.jpg" />
</a></p></p>
<p>The demo features a widget that automatically creates all tools required to
accomplish <span class="caps">WFS</span>-T editing using GeoExt, OpenLayers, ExtJS, <span class="caps">GXP</span> and TinyOWS.</p>
<p>More details are available directly on the demo page.</p>
<ul>
<li>See the <a href="http://dev8.mapgears.com/geoext/mg-sandbox/geoext.ux/ux/WFSTFeatureEditing/examples/WFSTFeatureEditing.html">Live demo</a> in action</li>
<li>Learn more about <a href="http://docs.sencha.com/ext-js/">ExtJS</a></li>
<li>Learn more about <a href="https://github.com/opengeo/gxp/"><span class="caps">GXP</span></a></li>
<li>Learn more about <a href="http://geoext.org/">GeoExt</a></li>
<li>Learn more about <a href="http://openlayers.org/">OpenLayers</a></li>
<li>Learn more about <a href="http://www.tinyows.org/">TinyOWS</a></li>
</ul> Weather SitesAlexandre Dubé2010-09-24T15:00:00Z2010-09-24T15:00:00Zhttp://labs.mapgears.com/en/archive/weather-sites
<p>Quickly vizualize weather information by specific sites
<p><a href="http://labs.mapgears.com/weather-sites/">
<img alt="Preview" src="http://labs.mapgears.com/media/images/weather-sites-preview.jpg" />
</a></p></p>
<p>This demo features an OpenLayers map showing vector features coming from a
remote TinyOWS server. Only a portion of the features is fetched depending on
the zoom level currently on. Also, the label text and color displayed is
controlled by a custom switcher on the right. The javascript code was
minimized using the <span class="caps">YUI</span> Compressor tool.</p>
<ul>
<li>See the <a href="http://labs.mapgears.com/weather-sites/">Live demo</a> in action</li>
<li>Learn more about <a href="http://www.tinyows.org/">TinyOWS</a></li>
<li>Learn more about <a href="http://openlayers.org/">OpenLayers</a></li>
<li>Learn more about <a href="http://developer.yahoo.com/yui/compressor/"><span class="caps">YUI</span> Compressor</a></li>
</ul> BDGA WFS-TAlexandre Dubé2009-01-22T15:00:00Z2009-01-22T15:00:00Zhttp://labs.mapgears.com/en/archive/bdga-wfst
<p>Edit vector features in an interactive map directly from your browser.
<p><a href="http://dev4.mapgears.com/bdga/bdgaWFS-T.html">
<img alt="Preview" src="http://labs.mapgears.com/media/images/bdga-wfst-preview.jpg" />
</a></p></p>
<p>This demo features an OpenLayers map showing vector features coming from a
remote server that can be modified using editing tools and saved back. The
<span class="caps">OGC</span> <span class="caps">WFS</span>-T protocol is used for the <span class="caps">CRUD</span> transactions. The server used is TinyOWS.</p>
<ul>
<li>See the <a href="http://dev4.mapgears.com/bdga/bdgaWFS-T.html">Live demo</a> in action</li>
<li>Learn more about <a href="http://openlayers.org/">OpenLayers</a></li>
<li>Learn more about <a href="http://www.tinyows.org/">TinyOWS</a></li>
</ul>