Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

   Interactive HTML5 GIS Data Visualization

GOTUG 2018


The GIS - Business User Gap

1) Historical facts

  • GIS origin: Scientific
  • Complex Data
  • GIS was so tied to the hardware !
  • UI made by computer engineers

2) Huge challenge for my business guy

  • Does not know about geocoding, projections or coordinates !
  • So what does he need ?

CartoVista: 100% Designed with HTML5

  • Map = designed to work everywhere
  • Mobility is a must: Smartphones-tablets are important - used in meetings and in the field
  • UI = Responsive, adapt all mobile devices
  • Gestures and capabilities (GPS, camera)
  • GIS Interfaces = Too complex (layers, tools)
  • Access to data: has to be simple
  • Canvas gives us much better rendering

Operational Business Efficiency

  • Ever used a web map that takes > 10 seconds to render ?
  • Not fast enough = perceived as a real waste of time
  • Data Insights: Business users need 2 levels: details and overview of opportunities or problems
  • GIS analyst: often are preparing the maps for the business users
  • Rounds of changes
  • Business users are looking for self service
  • Have the freedom to change data ranges and colors themselves
  • Business decisions often require external data
  • Having live information = competitive advantage

How CartoVista delivers faster web maps ?

  • Bottom: Raster Tiles
  • Interactive layers
  • Separation of geography and related data
  • Clever referencing
  • Avoid duplication
  • Fast binding


CartoVista Publisher

  • Bring your shapefile in !
  • Configure map styles
  • Interactivity setup
  • Copy on your web server et voila!
  • Can even create map tiles
  • Video time: 1:14

Web Publishing & Styling



  • CartoVista allows to go quite far in terms of styling

1) HTML5 Canvas Layer Effects

  • Who's been using photoshop for cartographic maps ?
  • Working with vector data provides interesting possibilities in the browser
  • Video time: 0:30

Use case 2: InfoCarte Styling

  • Video time: 1:00

GIS / Transport Use Cases




Use case 3: Traffic Counts (Points)

  • Focus on a region
  • Video time: 4:37

Use case 4: Traffic Counts (lines)

  • Video time: 3:07

Use case 5: Census Transportation Planning Product - CTPP Maps

  • Video time: 0:42
  • Video time: 0:42

Live maps



Use case 7: Energy Trading

  • Brookfield Renewable is one of the largest Energy company in the world
  • 40 feet wide data wall
  • Used by the trading floor
  • Includes all sorts of charts, live maps and data

  • Timing is key for trading !
  • Imagine there is a heat storm in the US and the grid goes wanky
  • The price go out of wack
  • The good news is that the data is pushed to the wall in real time
  • It uses web sockets which is very efficient
  • Live weather data allow to plan and watch more efficiently

Animation !

  • Last (but not least) demo !/li>
  • We used this at our last launch event
  • To demonstrate animation capabilities in our software
  • We wanted to show multiple moving items on the map

Thank you !

Questions ?  Email me !  

Use a spacebar or arrow keys to navigate.
Press 'P' to launch speaker console.