The client wanted a booking system where different areas of stadium/theater would be shown. The tickets for each different sections/areas of a stadium/theater had been differently priced. Also, we had to provide end user with the facility to select the section/area of Stadium while buying or selling the tickets.
This requirement was challenging as every now and then new theaters/stadiums would be dynamically added from admin panel. Also, static images could not be used as the map had to be interactive and capable of zooming in and out. There were a lot of sections, areas and seat types for each theater/stadium and making each of them interactive in terms of price, offer and discount asked for a innovative solution.
We decided to use SVG in our project for this requirement.
SVG stands for Scalable Vector Graphics. Unlike images SVG can be scaled or magnified to any limit without getting stretched. The SVG 1.1 specification defines 14 functional areas or feature sets which includes Paths, Basic shapes, Text, Painting, Color, Gradients and patterns, Clipping, masking and compositing, Filter effects, Interactivity, Linking, Scripting, Animation, Fonts, Metadata.
SVG use in our project
We used the concept of SVG was based on buying and selling of tickets online for Concerts, Sports and Events.
How we Implemented it:
First we Created a SVG through Google Online Editor:
Arena Management Section was made in the Admin Panel of our Project where we can manage All the Svgs and Create Different Sections on it.
How Different Sections Are Created in SVG
When SVG is loaded in a Web Page, we bind mouseover, mouseout and click functions on its Path Elements. When a specific path is clicked, its Id is saved in a temporary variable. Once we click on “Create Section” button it saves all the selected path element ids in the database with the entered Section name.
Database maintains the entire SVG source with all the sections made on it in the Admin Panel.
On front side of the project we just fetch the SVG source and all the sections made on it.