tmap : a SVG Generator for Animated Maps

Transcription

1 : a SVG Generator for Animated Maps Laurent PIERRE EDF R&D laurent.pierre@edf.fr

2 Presentation Electricité De France ( EDF) is the historical french electricity utility. EDF R&D (2000 ind) is a mutualized entity for all the EDF Group. ICAME (our department) deals mostly with commercial entities of the EDF group. I mostly work to bring web mapping to projects, essentialy with FOSS4G tools.

3 Location

4 Location

5 Plan The context First attempt the future

6 The Context

7 Context & Needs At the very beginning we were asked to find a way to visualize time varying data with thematic maps. All the products we knew were unable to take the 'time part' into account. So we decided to investigate to find methods to achieve the requirements.

8 Data We were provided with spreadsheet data from marketing division. As a first example, these data simulate client behavior for the next decade. They also have an attribute referencing a map ID (administrative region id).

9 The data

10 The data space time data data

11 The data space time data data selectors

12 The data a join between a data and a map having... at one time, one place with the selectors set each to a value we must have at most one line matching. we can formally construct an 'animation' along the timeline. now, one must find a practical way to generate the actual animation.

13 Constraints Besides being a tool for marketer, the product had to be able to produce material for presentations (to suits). The tool had to be accessible to non cartography specialists. End users must be able to define by themselves the data and the map to be used as well as the thematic.

14 First Attempt

15 Limited Goals We didnt'get at once to the desired result... At the begining, we wanted to show that animated thematic maps were valuable as a demonstration tool. Our fisrt attempt didn't emphasize on data and animation definition but on showable results.

16 Techniques Let's recall that a movie is composed from still images at the rate of 24 per second. If we can produce thematic maps based on user data for each slice of time (with interpolation between the actual values). Then we can assemble these images to produce a sequence.

17 Tools Used Mapserver for elementary image (map) generation. ImageMagick for image assembling and legend creation. PostgreSQL for data and map storing. Quicktime Pro for film generation from elementary images.

18 First Generation python mapserver QuickTime postgresql

19 Demo 1

20

21 Toward Nice demo but.. huge data volume for a movie (~70 M). no interactivity with animations. complex process for creating animations : definitly not for end users

22 Toward We came up with vector animation : SVG Flash and proposed a web interface for user interaction.

23 SVG SVG (Scalable Vector Graphic) is a XML dialect dedicated to vector graphic description Besides, a SVG description can be embedded in a HTML file and manipulated through DOM description via javascript. It is an open format easy to produce and transform

24 SVG In SVG language, one can assign color to geometric elements. Color changes can even managed by the language. Instead, we choosed to use javascript to apply to each geometric element a color function of the time (better flexibility).

25 SVG

26 SVG

27 SVG One can easily assemble independently generated SVG fragments to form a final animation without any new calculation. Thanks to vector format, animations produced with SVG format are visible in all sizes. Graphical effects (shadows, gradients) are easily produced. Tooltips are possible within an animation.

28 Data, Animations & Movies Data Maps Animations geo id's must match 1 or 2 value(s) chosen selectors affected Movies time must be common

29 Demo 2

30 How Does it Work? Data and meta-data are stored in a database (PostgreSQL). XML representation for meta-data. Extensive use of patterns for SVG generation. Python (and Turbogears soon). Maps are stored in the database as SVG fragments and referenced in the XML representation with their meta-data associated (extents, gid,... ).

31 The Future

32 The Future Choices in thematic styles are reduced. Ergonomy could be better. We must have the ability to add extra maps just to improve presentation (roads, rivers,...) Why not use symbolic maps for none spatiallly referenced data?

33 The Dark Side of the Future we love SVG but it is hard to make it run on all platform with any browser we use IE6 + Adobe SVG viewer (dark future) on Windows on OS X it works thanks to Crossover We hope that SVG will be more supported by Firefox, Safari and Opera

34 The Future But if not? Flash runs everywhere proprietary format Java client robust libraries UDIG? ETL needed to nicely import data.

35 Open Source We are looking for people interested in the project in order to share our experience In the near future, we would like to impulse a GPL project for.

36 Questions?