A UI to view all beach maps in real-time with seat availability in the existing Smart beach ionic application. The beach managers will design and change the beach, this should immediately reflect all users who are viewing the same beach map simultaneously.
Since it is an existing application, we needed a 2D map which is tightly coupled with HTML contents. We needed to achieve the entire map concept only using DOM Elements.
Have to learn about the rendering process and how data is manipulated for generating and rendering the maps.
We planned to develop pure DOM based 2D maps using only DIV and IMG elements. This has helped to use it in any browser as well as ionic mobile applications.
We prepared different map elements using HTML DIV elements. Each element has its own styles. The beach managers will drag and drop these elements to build a free size 2D beach map. They can even build custom elements using custom images. While building the map, the size will be saved inside map JSON. So that it can be loaded on the mobile application by populating the JSON.
We achieved a dynamic HTML map with optimized lazy loading techniques. We prepared live updating data and manually bonded it with HTML DOM elements without using Ng Model bindings. We also turned off the change detector for this map, so the map was updating real-time data without any delay.
The billing application made for our retail chain stores is really good and user friendly in practical execution. The best part is that, Support & Services rendered thereafter the sales closure.
Thank you so much for the development. Have a great year ahead. Kudos