SlideShare a Scribd company logo
1 of 30
Download to read offline
Geosummit



Web mapping with vector data.
Is it the future ?


Cédric Moullet
geo.admin.ch / swisstopo
Web
Raster or vector?
NOW ?




        …millions of tiles….
How do we do that
now ?

          1. Prepare data
          2. Define symbology
          3. Generate tiles
          4. Publish tiles
          5. Render tiles
Do you need
interactions ?

    … workaround required …
Workaround 1: Server roundtrip

                   What can I find at this mouse position ?



Hover in the map
                                                      Let me ask the
                                                           database


                                                              Here is it
                    A point object has been found




Nice highlight !
Workaround 2: binary mask




  You can know that there is « something »
        Mouse interaction possible
Workaround 3: UTF Grid
UTFGrid provides a standard, scalable way of encoding data for hundreds or
thousands of features alongside your map tiles.
                 !######$$$$%%% %%%% % !
                             !#######$$$$%%%     %%%!
                           !!#####    $$$%%%     %%%!
                           !###### $$$$%%% %% %%%   !
                          !!!#### $$$$$%%%% %%%%    !
                       ! !###### $$$$$$%%%%%%%%%%   !
                     ! !!##### $$$$$$$%%%%%%%%%     !
                    !!!!!####      $$$$$$%%%%%%%%%% !
                    !!!!!####      $$$$$$%%%%%%%%%% !
                    !!!!!####      $$$$$%%%%%%%%%%% !
                    !!!!!#####% $$       %%%%%%%%%%%!
                    !!!!!### #          %%%%%%%%%%%%!
                    !!! #####      ''''%%%%%%%%%%%% !
                     !     ###       ('%%%%%%%%%%%% !
                        ) ### # ( ((%%%%%%%%%%%%
                       )) ##      (((((%%%%%%%%%%%%
                                                    !
                                                    !
                                                        Every character is associated
                       )) #
                        )
                                  ****(+%%%%%%%%%%%
                                   %**++++%%%%%%%%%
                                                    !
                                                    !
                                                        to a feature and its attribute
               .
                        , , ------*+++++%%%%%%%%%
                       ,,,,,------+++++++%%%%%%%%
                                                    !
                                                    !
                                                        information
               .. /,,,,,,------++++++%%%%%%%%%      !
               . //,,,,,,------000++000%%%%%%%      !
                  211,,,,,33------00000000%%%%%%    !
                 2221,,,,33333---00000000000%%%%    !
               222222,,,,3635550000000000000%%%     !
               222222,,,,6665777008900000000%%%     !
               22222::66666777788889900000 %%%%     !
               22222:;;;;%%=7%8888890 0         %%%%!
               22222;;;; ==??%%888888 00 %%%%%      !
               222222 ;; =??%%%8888             %%%%!
               222        ;;    ?A>>@@@           B%!
               CCC         ;;    DEE@@@           BB!




                            MapBox demonstrator
Vectors are not rendered


Server roundtrip: slow
Binary mask & UTF: problem with feature overlay
– no vector information
Any chance to render vectors

                   client side ?
Vector in Web: worflow
1. Vector Data   Data stored in a database or in files




                                                     Simplify and generalize data
            2. Prepare Data                          Transform in appropriate format




                                                                                       Service to deliver data
                                               3. Publish Data



                                                                                4. Render Data
                                                                                                                 View data
                                                                                                                 In browser
Technology       Data




Internet     Libraries
Technology
<canvas> is an HTML element            WebGL (Web Graphics Library) is
which can be used to draw              a JavaScript API for rendering
graphics via scripting (usually        interactive 3D graphics within any
JavaScript). Part of HTML5 specs.      compatible web browser without
                                       the use of plug-ins.
                                       Extend canvas capabilities




Scalable Vector Graphics (SVG) is      Vector Markup Language (VML) is
a family of specifications of an       a deprecated XML language used
XML-based file format for two-         to produce vector graphics.
dimensional vector graphics, both
static and dynamic (i.e. interactive
or animated).
OSS Libraries: Leaflet
Web Site: http://leaflet.cloudmade.com/
Source Code: https://github.com/CloudMade/Leaflet/
Demo: http://leaflet.cloudmade.com/examples/geojson-example.html
Vector renderers: SVG, VML

+ Modern, HTML5, CSS3
+ Light
+ Simplicity

-  Limited
-  Less flexibility

Vector rendering: limited to a few hundred of vector objects




           There are of course other + and -… I present only those that seem essential to me
OSS Libraries: Polymaps
Web Site: http://polymaps.org/
Source Code: https://github.com/simplegeo/polymaps
Demo: http://polymaps.org/ex/population.html
Vector renderers: SVG

+ Light

-  Limited
-  Less flexibility
-  Buggy / no IE support

Vector rendering: limited to a few hundred of vector objects




          There are of course other + and -… I present only those that seem essential to me
OSS Libraries: Tile5
Web Site: http://www.tile5.org/
Source Code: https://github.com/DamonOehlman/tile5
Demo: http://www.tile5.org/demos/playground/#geojson/world
Vector renderers: canvas, webGL

+ Light

-  Limited
-  Only one maintainer

Vector rendering: limited to a few hundreds of vector objects




          There are of course other + and -… I present only those that seem essential to me
OSS Libraries: Kothic JS
Web Site: http://wiki.openstreetmap.org/wiki/Kothic_JS
Source Code: https://github.com/kothic/kothic-js
Demo: http://kothic.org/js/
Vector renderers: canvas

+ optimized tile format

-  focus on OSM
-  small community

Vector rendering: limited to a few hundred of vector objects




         There are of course other + and -… I present only those that seem essential to me
OSS Libraries: OpenLayers
Web Site: http://www.openlayers.org/
Source Code: https://github.com/openlayers/openlayers
Demo: http://r2d2.stefanm.com/mapnik/demo.html
Vector renderers: SVG, VML, canvas

+ Very complete
+ Widely used
+ Very good code quality
+ Support all browsers

-  More complex
-  Partial HTML5 support

Vector rendering: limited to a few hundred of vector objects




         There are of course other + and -… I present only those that seem essential to me
Non OSS: GisCloud
Web Site: http://www.giscloud.com/
Demo: http://www.giscloud.com/map/16594/germany-6000000-features
Vector renderers: VML, canvas

+ impressive performance
+ SaaS
+ Replace desktop viewer

-  not standardized (tile format, rendering)
-  bad IE support

Vector rendering: almost unlimited




         There are of course other + and -… I present only those that seem essential to me
Data & Internet




The user can only see
what is on the screen
Bandwidth is limited
Data
        Screen




Always 1280 * 960 pixels
    (or a bit more or a bit less)
Data
               Vector Datasets




                                           7 Go



                       50 Mo


        5 Mo

12 ko



                 Size from 0 to infinite
                        (or a bit less)
Bandwidth: 5 MB/s        Internet
                         1400 s



                 10 s



          1s              7 Go



0.002 s          50 Mo


          5 Mo

 12 ko
Data




Zoom level dependent
strategy
Data
Strategy
- Transfer only visible data (relative size bigger than one
pixel, clustering for points)
-  Simplify geometry depending on zoom level (depending on
pixel size)


Optimization
- Transfer data in binary format (« as » an image, for
example)
-  Reduce coordinate information size by using relative
coordinates
-  Use binary mask
WebGL (Web Graphics Library) is a
JavaScript API for rendering interactive 3D
graphics within any compatible web
                                              Rendering
browser without the use of plug-ins.



WebGL works also for 2D and for raster
Demo – Demo

                     Client reprojection

  Client colorization                          Client rendering

                                  Client transformation
         Client treatment
Thanks Tom Payne – Camptocamp – for the demo implementation (WebGLMaps)
Vector in Web: worflow
1. Vector Data   Data stored in a database or in files




                                                     Simplify and generalize data
            2. Prepare Data                          Transform in appropriate format




                                                                                       Service to deliver data
            Screen                             3. Publish Data
           paradigm


                                                                                4. Render Data
                                                                                                                 View data
                                                                                                                 In browser

                                               No
                                            standard                                                 WebGL
My 2 cents
ü  WebGL offers new possibilities client side
ü  OSS software will soon support WebGL (Ongoing
code sprint about OpenLayers Three)
ü  Data generalization and simplification is essential
(zoom level dependent)
ü  Display models are treated client side (SLD)

-  A standardized vector tile web service is missing
Thank you for your attention




Cédric Moullet
Head of FSDI Web Infrastructure
swisstopo - COSIG

     cedric.moullet@swisstopo.ch


      cedricmoullet                map.geo.admin.ch

More Related Content

Similar to Web mapping with vector data. Is it the future ? 2012

Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleEstelle Weyl
 
Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014Johannes Eriksson
 
Eventsourcing with PHP and MongoDB
Eventsourcing with PHP and MongoDBEventsourcing with PHP and MongoDB
Eventsourcing with PHP and MongoDBJacopo Nardiello
 
Everything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the WebEverything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the WebJames Rakich
 
Introduction to-web-application-development-with-vaadin7
Introduction to-web-application-development-with-vaadin7Introduction to-web-application-development-with-vaadin7
Introduction to-web-application-development-with-vaadin7Johannes Eriksson
 
HTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game TechHTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game Techvincent_scheib
 
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Patrick Chanezon
 
Ruby on Rails 3.1: Let's bring the fun back into web programing
Ruby on Rails 3.1: Let's bring the fun back into web programingRuby on Rails 3.1: Let's bring the fun back into web programing
Ruby on Rails 3.1: Let's bring the fun back into web programingBozhidar Batsov
 
Designing for The Modern Web
Designing for The Modern WebDesigning for The Modern Web
Designing for The Modern WebSara Cannon
 
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG
JavaOne 2009 -  2d Vector Graphics in the browser with Canvas and SVGJavaOne 2009 -  2d Vector Graphics in the browser with Canvas and SVG
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVGPatrick Chanezon
 
Web Frontend development: tools and good practices to (re)organize the chaos
Web Frontend development: tools and good practices to (re)organize the chaosWeb Frontend development: tools and good practices to (re)organize the chaos
Web Frontend development: tools and good practices to (re)organize the chaosMatteo Papadopoulos
 
HTML5, CSS3, and other fancy buzzwords
HTML5, CSS3, and other fancy buzzwordsHTML5, CSS3, and other fancy buzzwords
HTML5, CSS3, and other fancy buzzwordsMo Jangda
 
The Enterprise Architecture You Always Wanted
The Enterprise Architecture You Always WantedThe Enterprise Architecture You Always Wanted
The Enterprise Architecture You Always WantedThoughtworks
 
Building a game engine with jQuery
Building a game engine with jQueryBuilding a game engine with jQuery
Building a game engine with jQueryPaul Bakaus
 
Installing Games Sucks, Learn WebGL
Installing Games Sucks, Learn WebGLInstalling Games Sucks, Learn WebGL
Installing Games Sucks, Learn WebGLCorey Clark, Ph.D.
 
Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Brian Moon
 
Buildingplatforms
BuildingplatformsBuildingplatforms
Buildingplatformscodebits
 

Similar to Web mapping with vector data. Is it the future ? 2012 (20)

Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
 
Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014
 
Eventsourcing with PHP and MongoDB
Eventsourcing with PHP and MongoDBEventsourcing with PHP and MongoDB
Eventsourcing with PHP and MongoDB
 
Everything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the WebEverything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the Web
 
Introduction to-web-application-development-with-vaadin7
Introduction to-web-application-development-with-vaadin7Introduction to-web-application-development-with-vaadin7
Introduction to-web-application-development-with-vaadin7
 
HTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game TechHTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game Tech
 
HTML5 - A Whirlwind tour
HTML5 - A Whirlwind tourHTML5 - A Whirlwind tour
HTML5 - A Whirlwind tour
 
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?
 
Ruby on Rails 3.1: Let's bring the fun back into web programing
Ruby on Rails 3.1: Let's bring the fun back into web programingRuby on Rails 3.1: Let's bring the fun back into web programing
Ruby on Rails 3.1: Let's bring the fun back into web programing
 
Designing for The Modern Web
Designing for The Modern WebDesigning for The Modern Web
Designing for The Modern Web
 
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG
JavaOne 2009 -  2d Vector Graphics in the browser with Canvas and SVGJavaOne 2009 -  2d Vector Graphics in the browser with Canvas and SVG
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG
 
AWS Elastic Beanstalk
AWS Elastic BeanstalkAWS Elastic Beanstalk
AWS Elastic Beanstalk
 
Web Frontend development: tools and good practices to (re)organize the chaos
Web Frontend development: tools and good practices to (re)organize the chaosWeb Frontend development: tools and good practices to (re)organize the chaos
Web Frontend development: tools and good practices to (re)organize the chaos
 
Introduction To R
Introduction To RIntroduction To R
Introduction To R
 
HTML5, CSS3, and other fancy buzzwords
HTML5, CSS3, and other fancy buzzwordsHTML5, CSS3, and other fancy buzzwords
HTML5, CSS3, and other fancy buzzwords
 
The Enterprise Architecture You Always Wanted
The Enterprise Architecture You Always WantedThe Enterprise Architecture You Always Wanted
The Enterprise Architecture You Always Wanted
 
Building a game engine with jQuery
Building a game engine with jQueryBuilding a game engine with jQuery
Building a game engine with jQuery
 
Installing Games Sucks, Learn WebGL
Installing Games Sucks, Learn WebGLInstalling Games Sucks, Learn WebGL
Installing Games Sucks, Learn WebGL
 
Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Ease into HTML5 and CSS3
Ease into HTML5 and CSS3
 
Buildingplatforms
BuildingplatformsBuildingplatforms
Buildingplatforms
 

More from Moullet

map.geo.admin.ch: contenu et évolution technologique
map.geo.admin.ch:  contenu et évolution technologiquemap.geo.admin.ch:  contenu et évolution technologique
map.geo.admin.ch: contenu et évolution technologiqueMoullet
 
OpenLayers 3 Crowdfunding - FOSS4G - 2013
OpenLayers 3 Crowdfunding - FOSS4G - 2013OpenLayers 3 Crowdfunding - FOSS4G - 2013
OpenLayers 3 Crowdfunding - FOSS4G - 2013Moullet
 
User Centered Design for map.geo.admin.ch - FOSS4G - 2013
User Centered Design for map.geo.admin.ch - FOSS4G - 2013User Centered Design for map.geo.admin.ch - FOSS4G - 2013
User Centered Design for map.geo.admin.ch - FOSS4G - 2013Moullet
 
Open Access and/or Open Data - geo.admin.ch - 2013
Open Access and/or Open Data - geo.admin.ch - 2013Open Access and/or Open Data - geo.admin.ch - 2013
Open Access and/or Open Data - geo.admin.ch - 2013Moullet
 
Open Source development funding. OpenLayers 3 - 2013
Open Source development funding. OpenLayers 3 - 2013Open Source development funding. OpenLayers 3 - 2013
Open Source development funding. OpenLayers 3 - 2013Moullet
 
OpenLayers 3 Alpha - Introduction - 2013
OpenLayers 3 Alpha - Introduction - 2013OpenLayers 3 Alpha - Introduction - 2013
OpenLayers 3 Alpha - Introduction - 2013Moullet
 
Redesign of map.geo.admin.ch - 2013
Redesign of map.geo.admin.ch - 2013Redesign of map.geo.admin.ch - 2013
Redesign of map.geo.admin.ch - 2013Moullet
 
PLR Payerne Assemblée Générale 2013
PLR Payerne Assemblée Générale 2013PLR Payerne Assemblée Générale 2013
PLR Payerne Assemblée Générale 2013Moullet
 
Cloud Computing & Spatial Data Infrastructure - 2012
Cloud Computing & Spatial Data Infrastructure - 2012Cloud Computing & Spatial Data Infrastructure - 2012
Cloud Computing & Spatial Data Infrastructure - 2012Moullet
 
How to use the maps of geo.admin.ch ? 2012
How to use the maps of geo.admin.ch ? 2012How to use the maps of geo.admin.ch ? 2012
How to use the maps of geo.admin.ch ? 2012Moullet
 
GeoAdmin API & Open*, 2012
GeoAdmin API & Open*, 2012GeoAdmin API & Open*, 2012
GeoAdmin API & Open*, 2012Moullet
 
GeoAdmin API & Mobile API, 2012
GeoAdmin API & Mobile API, 2012GeoAdmin API & Mobile API, 2012
GeoAdmin API & Mobile API, 2012Moullet
 
PLR Payerne Assemblée Générale 2012
PLR Payerne Assemblée Générale 2012PLR Payerne Assemblée Générale 2012
PLR Payerne Assemblée Générale 2012Moullet
 
Spatial Data Infrastructure Goes Mobile, 2012
Spatial Data Infrastructure Goes Mobile, 2012Spatial Data Infrastructure Goes Mobile, 2012
Spatial Data Infrastructure Goes Mobile, 2012Moullet
 
Mobile GeoAdmin, 2011
Mobile GeoAdmin, 2011Mobile GeoAdmin, 2011
Mobile GeoAdmin, 2011Moullet
 
Spatial data infrastructure in the cloud, 2011
Spatial data infrastructure in the cloud, 2011Spatial data infrastructure in the cloud, 2011
Spatial data infrastructure in the cloud, 2011Moullet
 
BGDI: Cloud Computing - Data Management - Mobile, 2011
BGDI: Cloud Computing - Data Management - Mobile, 2011BGDI: Cloud Computing - Data Management - Mobile, 2011
BGDI: Cloud Computing - Data Management - Mobile, 2011Moullet
 
Mobile Lösung fur GeoDatenInfrastrucktur, 2011
Mobile Lösung fur GeoDatenInfrastrucktur, 2011Mobile Lösung fur GeoDatenInfrastrucktur, 2011
Mobile Lösung fur GeoDatenInfrastrucktur, 2011Moullet
 
OpenLayers Mobile Code Sprint, 2011
OpenLayers Mobile Code Sprint, 2011OpenLayers Mobile Code Sprint, 2011
OpenLayers Mobile Code Sprint, 2011Moullet
 
Mobile GeoAdmin Mockup, 2011
Mobile GeoAdmin Mockup, 2011Mobile GeoAdmin Mockup, 2011
Mobile GeoAdmin Mockup, 2011Moullet
 

More from Moullet (20)

map.geo.admin.ch: contenu et évolution technologique
map.geo.admin.ch:  contenu et évolution technologiquemap.geo.admin.ch:  contenu et évolution technologique
map.geo.admin.ch: contenu et évolution technologique
 
OpenLayers 3 Crowdfunding - FOSS4G - 2013
OpenLayers 3 Crowdfunding - FOSS4G - 2013OpenLayers 3 Crowdfunding - FOSS4G - 2013
OpenLayers 3 Crowdfunding - FOSS4G - 2013
 
User Centered Design for map.geo.admin.ch - FOSS4G - 2013
User Centered Design for map.geo.admin.ch - FOSS4G - 2013User Centered Design for map.geo.admin.ch - FOSS4G - 2013
User Centered Design for map.geo.admin.ch - FOSS4G - 2013
 
Open Access and/or Open Data - geo.admin.ch - 2013
Open Access and/or Open Data - geo.admin.ch - 2013Open Access and/or Open Data - geo.admin.ch - 2013
Open Access and/or Open Data - geo.admin.ch - 2013
 
Open Source development funding. OpenLayers 3 - 2013
Open Source development funding. OpenLayers 3 - 2013Open Source development funding. OpenLayers 3 - 2013
Open Source development funding. OpenLayers 3 - 2013
 
OpenLayers 3 Alpha - Introduction - 2013
OpenLayers 3 Alpha - Introduction - 2013OpenLayers 3 Alpha - Introduction - 2013
OpenLayers 3 Alpha - Introduction - 2013
 
Redesign of map.geo.admin.ch - 2013
Redesign of map.geo.admin.ch - 2013Redesign of map.geo.admin.ch - 2013
Redesign of map.geo.admin.ch - 2013
 
PLR Payerne Assemblée Générale 2013
PLR Payerne Assemblée Générale 2013PLR Payerne Assemblée Générale 2013
PLR Payerne Assemblée Générale 2013
 
Cloud Computing & Spatial Data Infrastructure - 2012
Cloud Computing & Spatial Data Infrastructure - 2012Cloud Computing & Spatial Data Infrastructure - 2012
Cloud Computing & Spatial Data Infrastructure - 2012
 
How to use the maps of geo.admin.ch ? 2012
How to use the maps of geo.admin.ch ? 2012How to use the maps of geo.admin.ch ? 2012
How to use the maps of geo.admin.ch ? 2012
 
GeoAdmin API & Open*, 2012
GeoAdmin API & Open*, 2012GeoAdmin API & Open*, 2012
GeoAdmin API & Open*, 2012
 
GeoAdmin API & Mobile API, 2012
GeoAdmin API & Mobile API, 2012GeoAdmin API & Mobile API, 2012
GeoAdmin API & Mobile API, 2012
 
PLR Payerne Assemblée Générale 2012
PLR Payerne Assemblée Générale 2012PLR Payerne Assemblée Générale 2012
PLR Payerne Assemblée Générale 2012
 
Spatial Data Infrastructure Goes Mobile, 2012
Spatial Data Infrastructure Goes Mobile, 2012Spatial Data Infrastructure Goes Mobile, 2012
Spatial Data Infrastructure Goes Mobile, 2012
 
Mobile GeoAdmin, 2011
Mobile GeoAdmin, 2011Mobile GeoAdmin, 2011
Mobile GeoAdmin, 2011
 
Spatial data infrastructure in the cloud, 2011
Spatial data infrastructure in the cloud, 2011Spatial data infrastructure in the cloud, 2011
Spatial data infrastructure in the cloud, 2011
 
BGDI: Cloud Computing - Data Management - Mobile, 2011
BGDI: Cloud Computing - Data Management - Mobile, 2011BGDI: Cloud Computing - Data Management - Mobile, 2011
BGDI: Cloud Computing - Data Management - Mobile, 2011
 
Mobile Lösung fur GeoDatenInfrastrucktur, 2011
Mobile Lösung fur GeoDatenInfrastrucktur, 2011Mobile Lösung fur GeoDatenInfrastrucktur, 2011
Mobile Lösung fur GeoDatenInfrastrucktur, 2011
 
OpenLayers Mobile Code Sprint, 2011
OpenLayers Mobile Code Sprint, 2011OpenLayers Mobile Code Sprint, 2011
OpenLayers Mobile Code Sprint, 2011
 
Mobile GeoAdmin Mockup, 2011
Mobile GeoAdmin Mockup, 2011Mobile GeoAdmin Mockup, 2011
Mobile GeoAdmin Mockup, 2011
 

Recently uploaded

Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...amber724300
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessWSO2
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfROWELL MARQUINA
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfAarwolf Industries LLC
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneUiPathCommunity
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Nikki Chapple
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
Deliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceDeliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceOpsTree solutions
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFMichael Gough
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 

Recently uploaded (20)

Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with Platformless
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdf
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdf
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyone
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
Deliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceDeliver Latency Free Customer Experience
Deliver Latency Free Customer Experience
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDF
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 

Web mapping with vector data. Is it the future ? 2012

  • 1. Geosummit Web mapping with vector data. Is it the future ? Cédric Moullet geo.admin.ch / swisstopo
  • 2. Web
  • 4. NOW ? …millions of tiles….
  • 5. How do we do that now ? 1. Prepare data 2. Define symbology 3. Generate tiles 4. Publish tiles 5. Render tiles
  • 6. Do you need interactions ? … workaround required …
  • 7. Workaround 1: Server roundtrip What can I find at this mouse position ? Hover in the map Let me ask the database Here is it A point object has been found Nice highlight !
  • 8. Workaround 2: binary mask You can know that there is « something » Mouse interaction possible
  • 9. Workaround 3: UTF Grid UTFGrid provides a standard, scalable way of encoding data for hundreds or thousands of features alongside your map tiles. !######$$$$%%% %%%% % ! !#######$$$$%%% %%%! !!##### $$$%%% %%%! !###### $$$$%%% %% %%% ! !!!#### $$$$$%%%% %%%% ! ! !###### $$$$$$%%%%%%%%%% ! ! !!##### $$$$$$$%%%%%%%%% ! !!!!!#### $$$$$$%%%%%%%%%% ! !!!!!#### $$$$$$%%%%%%%%%% ! !!!!!#### $$$$$%%%%%%%%%%% ! !!!!!#####% $$ %%%%%%%%%%%! !!!!!### # %%%%%%%%%%%%! !!! ##### ''''%%%%%%%%%%%% ! ! ### ('%%%%%%%%%%%% ! ) ### # ( ((%%%%%%%%%%%% )) ## (((((%%%%%%%%%%%% ! ! Every character is associated )) # ) ****(+%%%%%%%%%%% %**++++%%%%%%%%% ! ! to a feature and its attribute . , , ------*+++++%%%%%%%%% ,,,,,------+++++++%%%%%%%% ! ! information .. /,,,,,,------++++++%%%%%%%%% ! . //,,,,,,------000++000%%%%%%% ! 211,,,,,33------00000000%%%%%% ! 2221,,,,33333---00000000000%%%% ! 222222,,,,3635550000000000000%%% ! 222222,,,,6665777008900000000%%% ! 22222::66666777788889900000 %%%% ! 22222:;;;;%%=7%8888890 0 %%%%! 22222;;;; ==??%%888888 00 %%%%% ! 222222 ;; =??%%%8888 %%%%! 222 ;; ?A>>@@@ B%! CCC ;; DEE@@@ BB! MapBox demonstrator
  • 10. Vectors are not rendered Server roundtrip: slow Binary mask & UTF: problem with feature overlay – no vector information
  • 11. Any chance to render vectors client side ?
  • 12. Vector in Web: worflow 1. Vector Data Data stored in a database or in files Simplify and generalize data 2. Prepare Data Transform in appropriate format Service to deliver data 3. Publish Data 4. Render Data View data In browser
  • 13. Technology Data Internet Libraries
  • 14. Technology <canvas> is an HTML element WebGL (Web Graphics Library) is which can be used to draw a JavaScript API for rendering graphics via scripting (usually interactive 3D graphics within any JavaScript). Part of HTML5 specs. compatible web browser without the use of plug-ins. Extend canvas capabilities Scalable Vector Graphics (SVG) is Vector Markup Language (VML) is a family of specifications of an a deprecated XML language used XML-based file format for two- to produce vector graphics. dimensional vector graphics, both static and dynamic (i.e. interactive or animated).
  • 15. OSS Libraries: Leaflet Web Site: http://leaflet.cloudmade.com/ Source Code: https://github.com/CloudMade/Leaflet/ Demo: http://leaflet.cloudmade.com/examples/geojson-example.html Vector renderers: SVG, VML + Modern, HTML5, CSS3 + Light + Simplicity -  Limited -  Less flexibility Vector rendering: limited to a few hundred of vector objects There are of course other + and -… I present only those that seem essential to me
  • 16. OSS Libraries: Polymaps Web Site: http://polymaps.org/ Source Code: https://github.com/simplegeo/polymaps Demo: http://polymaps.org/ex/population.html Vector renderers: SVG + Light -  Limited -  Less flexibility -  Buggy / no IE support Vector rendering: limited to a few hundred of vector objects There are of course other + and -… I present only those that seem essential to me
  • 17. OSS Libraries: Tile5 Web Site: http://www.tile5.org/ Source Code: https://github.com/DamonOehlman/tile5 Demo: http://www.tile5.org/demos/playground/#geojson/world Vector renderers: canvas, webGL + Light -  Limited -  Only one maintainer Vector rendering: limited to a few hundreds of vector objects There are of course other + and -… I present only those that seem essential to me
  • 18. OSS Libraries: Kothic JS Web Site: http://wiki.openstreetmap.org/wiki/Kothic_JS Source Code: https://github.com/kothic/kothic-js Demo: http://kothic.org/js/ Vector renderers: canvas + optimized tile format -  focus on OSM -  small community Vector rendering: limited to a few hundred of vector objects There are of course other + and -… I present only those that seem essential to me
  • 19. OSS Libraries: OpenLayers Web Site: http://www.openlayers.org/ Source Code: https://github.com/openlayers/openlayers Demo: http://r2d2.stefanm.com/mapnik/demo.html Vector renderers: SVG, VML, canvas + Very complete + Widely used + Very good code quality + Support all browsers -  More complex -  Partial HTML5 support Vector rendering: limited to a few hundred of vector objects There are of course other + and -… I present only those that seem essential to me
  • 20. Non OSS: GisCloud Web Site: http://www.giscloud.com/ Demo: http://www.giscloud.com/map/16594/germany-6000000-features Vector renderers: VML, canvas + impressive performance + SaaS + Replace desktop viewer -  not standardized (tile format, rendering) -  bad IE support Vector rendering: almost unlimited There are of course other + and -… I present only those that seem essential to me
  • 21. Data & Internet The user can only see what is on the screen Bandwidth is limited
  • 22. Data Screen Always 1280 * 960 pixels (or a bit more or a bit less)
  • 23. Data Vector Datasets 7 Go 50 Mo 5 Mo 12 ko Size from 0 to infinite (or a bit less)
  • 24. Bandwidth: 5 MB/s Internet 1400 s 10 s 1s 7 Go 0.002 s 50 Mo 5 Mo 12 ko
  • 26. Data Strategy - Transfer only visible data (relative size bigger than one pixel, clustering for points) -  Simplify geometry depending on zoom level (depending on pixel size) Optimization - Transfer data in binary format (« as » an image, for example) -  Reduce coordinate information size by using relative coordinates -  Use binary mask
  • 27. WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D graphics within any compatible web Rendering browser without the use of plug-ins. WebGL works also for 2D and for raster Demo – Demo Client reprojection Client colorization Client rendering Client transformation Client treatment Thanks Tom Payne – Camptocamp – for the demo implementation (WebGLMaps)
  • 28. Vector in Web: worflow 1. Vector Data Data stored in a database or in files Simplify and generalize data 2. Prepare Data Transform in appropriate format Service to deliver data Screen 3. Publish Data paradigm 4. Render Data View data In browser No standard WebGL
  • 29. My 2 cents ü  WebGL offers new possibilities client side ü  OSS software will soon support WebGL (Ongoing code sprint about OpenLayers Three) ü  Data generalization and simplification is essential (zoom level dependent) ü  Display models are treated client side (SLD) -  A standardized vector tile web service is missing
  • 30. Thank you for your attention Cédric Moullet Head of FSDI Web Infrastructure swisstopo - COSIG cedric.moullet@swisstopo.ch cedricmoullet map.geo.admin.ch