Visualization of Vector Tiles on CesiumJS Virtual Globe

Visualization of Vector Tiles on CesiumJS Virtual Globe | Research Square window.SnipcartSettings = { analytics: { enabled: false } }; (function() { var accessVector = localStorage.getItem('access_vector') || ''; window.dataLayer = window.dataLayer || []; if (accessVector) { window.dataLayer.push({ user: { profile: { profileInfo: { snid: accessVector } } } }); } })(); (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-K279D39R'); Browse Preprints In Review Journals COVID-19 Preprints AJE Video Bytes Research Tools Research Promotion AJE Professional Editing AJE Rubriq About Preprint Platform In Review Editorial Policies Our Team Advisory Board Help Center Sign In Submit a Preprint Cite Share Download PDF Research Article Visualization of Vector Tiles on CesiumJS Virtual Globe Kuk Kang, Kyongil Woo, Cholnam Yun, Wonsok Kim This is a preprint; it has not been peer reviewed by a journal. https://doi.org/ 10.21203/rs.3.rs-3193304/v1 This work is licensed under a CC BY 4.0 License Status: Posted Version 1 posted You are reading this latest preprint version Abstract Essentially, CesiumJS-which can be accessed through the link, http://cesiumjs.org , is an open-source JavaScript library for creating 3D earths and maps with the best performance, visual quality, precision, and ease of use. It is a wonderful tool for 3D-themed visualizations of earth. CesiumJS has a number of data sources, but none of them supports vector tile format. This article explains how to visualize Mapbox vector tiles in a CesiumJS virtual globe environment. CartoDB/BigQuery hosts vector tiles, and a process for producing vector tiles from massive vector data using the BigQuery tiler of CartoDB has been provided. Mapbox CesiumJS Vector Tiles BigQuery CartoDB Virtual Globe Figures Figure 1 Figure 2 Figure 3 Figure 4 1. Introduction Vector data is used extensively in geographic information systems (GIS) to analyse and administrate virtual landscapes. Methods that enable the integrated visualization of landscape and geospatial vector data are thus necessary. Usually, these data are set up as either raster or vector data. Geometry is represented via vector data as a set of coordinate lists for points, lines, and polygons. Eliminating extra or undesired detail from the output image is a crucial challenge for computer graphics and GIS communities. GIS geometric simplification is one of the more general approaches, which are ways to graphically depict a specific geographic entity or group of geographic entities using various visuals when showing the entities at various map scales. (Beukelaar 2018 ) Rendering vector data representing features like road networks, political districts, and rivers is crucial in GIS systems. It is difficult to render vectors in a way that allows them to drape perfectly over topography. Vector data can be rendered on a 3D model using one of two common methods. Both represent the vector data as primitives of geometry or pre-render the vector data to image with style. We contend that vector data need to be handled separately from raster data for various reasons and that the graphics pipeline should render it as distinct geometry. Modern methods create a hurdle since they produce a LOD terrain whose constituent triangles change every frame. Therefore, the vector geometry must likewise change at each frame for the vector data to display accurately on the 3D mesh. (Zhou 2016 ) A common area of thematic cartography is the 3D visualization of data on a virtual globe. Since the debut of Google Earth, one of the most prevalent methods of releasing such material has been the creation of KML overlays. For several years, the Google Earth plugin made it straightforward to publish these KML-based visualizations to the Web [2]. Ultimately, the plug in-technology grew antiquated, and by the end of 2016, Google had discontinued this service. With the advent of new technologies such as HTML5 and WebGL, a number of JavaScript-based 3D globe libraries and APIs (Application Programming Interfaces) were created to make it easier to show 3D interactive globe models on websites without the use of any plugins (Zhou 2016 ). OpenWebGlobe, developed by Swiss researchers, is one such library, as is the WebGL Earth JavaScript API, which began as a bachelor thesis and is now maintained by Klokan Technologies. Although these two programs have their uses, using the CesiumJS API is preferable due to the limitations of these two products. CesiumJS has far more capability, superb documentation, and a hot development community, guaranteeing that most issues are swiftly resolved on programmer forums. This is not the case with the two products mentioned above. Every industry uses CesiumJS, which enables 3D web visualization on any device and supports CAD, web, BIM, point clouds, CityGML, and photogrammetry. These businesses range from real estate to sports management and engineering. But when it became increasingly difficult to render and stream 3D visualizations effectively over time, the CesiumJS community created an open data format called 3D tiles that supports streaming and is tailored for rendering. CesiumJS is widely used as it has the benefits of being cross-device, cross-platform, and dynamic. It enables rendering a lot of objects on both the 3D globe and map without requiring the installation of any browser extensions. One option to use CesiumJS is available: either convert data to the Cesium 3D Tiles format and create the visualization using the CesiumJS library or transmit the data to the Cesium Ion platform, which streams the data and creates the visualization on its own. The development of cameras and geometric objects, as well as the integration of multiple data sources, are all made possible by CesiumJS, the only open-source software that has good user community maintenance. Tiles can be styled dynamically because they are vectors, which enables a broad variety of map styles on global data. Using Mapbox GL JS or the Mapbox Maps SDKs for Android and iOS, it can dynamically modify the look of map without downloading new tiles (mapbox 2019 ). A small vector tile makes it possible to create high-resolution global maps, load them quickly, and cache them effectively. The Mapbox cartographers in charge of the vector tilesets that Mapbox offers put a lot of effort into finding a balance between accuracy and effectiveness (mapbox 2019 ). It can quickly re-render the map because all of map data is loaded in the client side, enabling seamless zooming, tilting, and rotation. One can easily use dynamical querying feature to access map's characteristics. The integration of PostGIS with MapTiler Server is based on the idea of layers. As a result of calling the ST_AsMVTGeom function, each layer is represented by a separate SQL query that returns geometry in tile coordinate space. The ST_AsMVT function can create a binary MapBox Vector Tile by passing this geometry, which MapTiler Server anticipates will be labeled "mvtgeometry," to the function. CARTO provides unique geographical visualization, analysis, and app creation capabilities directly within Google Cloud's data warehouse. It utilizes geographic data natively with BigQuery while using straightforward SQL to create attractive visualizations. BigQuery can also execute powerful spatial analytics and generate amazing maps from billions of information (CARTO). This paper presents a technique for visualizing Map-box vector tiles in a 3D virtual environment. The hosting of vector tiles on CartoDB/Bigquery and the process for producing them are detailed. 2. Related Work There are various custom methods used to load vector tiles on CesiumJS. There have only been a few studies on visualizations that employ approaches to vector-based tiling. An overview of current techniques for storing, processing, and displaying data in a geo-graphic environment is provided in this section. A survey on how large data is managed to utilize web technologies was written by Vitolo et al. (Vitolo 2015 ) Data collections expand quickly as computing science develops. New technologies are required to handle such a massive volume of data. He explains how this must be possible regarding analysis methods, labour processes, and dataset interaction. He highlights the current web technologies used to process straightforward datasets in the paper. Additionally, maintaining a relationship to standards maintained by the Open Geospatial Consortium (OGC) while handling more complex data becomes more difficult. Yue & Jiang (Yue 2014 ) explores big data in the context of geographic information systems, whereas Vitolo concentrates on big data and web technologies. According to him, it is crucial to support the geospatial domain because GIS software, in particular, needs to be capable of handling big datasets containing geospatial data. Most interactions between end users and these datasets occur through desktop GIS programs. To the best of our knowledge, more needs to be done to develop web-based apps that can manage huge data and give clients and end users access regardless of the platform. The most used geographic data storage technology is PostGIS. Other new technology-based alternatives are available, but because of their simplicity and the scarcity of geospatial computer scientists, people frequently remain with the tried-and-true PostGIS database. It is also frequently necessary to use OGC standard data formats, which facilitates the implementation of PostGIS applications. Even though tiling is a fairly old idea, it is nonetheless cutting-edge. This technology must accommodate future demands. Currently, pre-rendered raster images are used to store tiles. Tile caching is a subject that is frequently brought up while discussing tiling. In addition to server-side caching for raster images, vector tiles, such as non-transmission-optimized GeoJSON vector tiles, can also be cached. Most approaches concentrate on a single subject rather than combining various concepts. One method involves using simple queries to retrieve data from the back end and compressing files for delivery. However, allowing users to browse over the data does not assist. The servers must be specifically queried for a specific subset of data. Tile based approaches to creating a map are primarily concerned with tiling rather than with trying to compress or cache vector tiles without using much memory at every stage of the process. 3. Materials and Methods Data processing for vector data hosting on Carto/Bigquery was done (Fig. 1 ). Occasionally, it is impossible to display data legibly at a particular zoom level. For in-stance, a thick succession of topographic lines would appear as a tangle of objects when seen at a low zoom level. In contrast, low-resolution data might appear excessively coarse at high zoom levels. The Mapbox Uploads API analyses your data and automatically determines the maximum and minimum zoom levels at which tiles should be rendered to prevent both potential concerns. The uploaded image resolution determines raster tile sets' minimum and maximum zoom levels. The tile set will render at more zoom levels if the images have a higher resolution. Tile imagery was generated with style and applied to CesiumJS globe as an imagery layer using Mapbox Vector Tile Basic JS Renderer. In the newest version (1.2.1), Mapbox throws a warning (Chrome, Mac): Geometry exceeds the allowed extent, reduce your vector tile buffer size. This warning is actually coming from the vector tiles themselves, so the recommended way to avoid it is to set smaller buffers when generating tiles. This limitation and warning aren't new, but at one point, the threshold will be stabilized (mapbox 2019 ). Simplifying the map at lower zoom levels lowers complexity in areas where the details are unnoticeable. This simplification increases the map's loading speed. Sometimes this occurs immediately after loading, at least during map navigation. A maximum amount of data can exist in a single vector tile. By reducing complex vector features during the upload process, we ensure that each tile in your vector tile set falls be-low this maximum size and displays accurately on your maps. When the zoom level exceeded maximum built zoom, vector data was inserted as a primitive with a custom style or 3D model. Normally vector tiles are built to level 14 as the maximum, and mapping software over-zooms with no loss in quality. The number of vector objects is significantly lower at high-level zoom than at low-level zoom. Therefore, when it is low level, we render it as an image; when it is high level, we render it as a vector to avoid performance issues. Additionally, it will offer options for the primitive shown in CesiumJS when rendering vectors (Primitives). In the case of point-type vector data, it will be a 2D shape or a 3D model. Generally speaking, this notice can be disregarded if the end-user is not experiencing any other problems. The correct tiles on the maximum zoom of the tile set must be chosen when the current reference zoom is greater than the maximum zoom of the vector tile set. When the source's maximum zoom level is set, Mapbox-Gl will be instructed to keep zooming after that point rather than requesting the source at all zoom levels. The speed at which vector tiles are generated is slow or unavailable because it may interfere with the display of other layers depending on the source of the data or the number of vector tiles in a layer at a given zoom level (Zhou 2016 ). In other words, the process may not be able to produce enough vector tiles as needed. Polyline and polygon vector data must be recreated when adding primitives to the CesiumJS globe. In the meantime, there may be a few optimization tricks it can do depending on what it is trying to visualize in the application. It is considered moving 100k points in a primitive should be fast. This is more or less the underlying principle behind 3D Tiles that allows to visualize datasets with billions of points, for example. This is how the up-coming vector format of 3D Tiles would handle that for supporting time dynamic features. Overall workflow described in Fig. 2 . 4. Results In terms of thematic content, the prospects of 3D visualization are limitless. There are many more visual variations than in the context of 2D maps. This is different from saying that one should overload the globe with data; rather, displaying too many items on the globe or employing too many visual variables at the same time may lead to data loss. Most theme globes, however, only employ one of the three most prevalent depiction methods: choropleths, 3D prism maps, and graded 3D symbols. To integrate an interactive virtual globe into an HTML website using CesiumJS, merely a few lines of JavaScript code are necessary. This is detailed in the CesiumJS API documentation, particularly in the instructional section. After we have a virtual globe on our website, we can add various sorts of themed visualizations to it in various ways based on the dataset format (Ingensand 2016 ). The findings imply that the suggested CartoDB vector tiler, as opposed to the conventional vector database method, can assist us in more effectively visualizing vector tiles on CesiumJS Web Globe. A vector tile at a lower level (large scale) can be requested and seen on a 3D terrain surface, making these benefits even more obvious (Murshed 2018 ). The last generalization aspect mentioned by Ingensand ( 2016 ) is the selection of relevant vector objects for a certain zoom level. This aspect is implemented in two different ways within the WHERE clause of the developed custom PostGIS functions. The first is attribute driven, where a certain attribute describes for which zoom levels the data shall be included. This can be a direct Integer value representing a zoom level or a class attribute. Vector tiles are requested based on the index number for 3D displays. Vector data can be rendered in three dimensions using a geometry-based or texture-based method after the vector tiles have been parsed. Elevation interpolation techniques can be employed to convert the vector data into 3D coordinates when a geometry-based approach is utilized to display the vector tile (Fig. 3 ). The vector data can be viewed on a 3D terrain surface using 3D rendering techniques. The vector tiles must be rasterized into texture vector tiles before using texture mapping technology to map them onto a 3D terrain surface when using a texture-based approach to view the vector tiles (Fig. 4 ). Conventional map symbols can be merged with the rasterized vector data when a texture-based technique is used to view the vector tiles. Although there are no significant technical issues when using the geometry-based method to describe these basic map symbols, the user experience is negatively impacted by the low rendering efficiency, especially when working with global vector map data. The second way is geometry driven, where the area of a polygon, in relation to the zoom level, controls the selection of Raster overlays. One of its advantages is that vector tiles carry the data we need to visualize on them so we can rapidly access them using APIs. The properties attribute of a vector tile is where data are kept. We can develop more adaptable data-driven visualizations by gaining access to tile attributes. The CesiumJS web globe is a very user-friendly platform, making it advantageous to utilize it to immediately process the vector tiles because the user can readily visualize the data. Utilizing the CesiumJS web globe has the drawback of not analyzing massive amounts of data. A GIS program like ArcGIS or QGIS has the benefit of handling massive volumes of data. The drawback of utilizing GIS software is that it requires more training to use than the CesiumJS online globe and is not as user-friendly. 5. Conclusions Vector tiles are a potent tool for data visualization on a map, in conclusion. They offer a scalable and effective technique to render massive amounts of data. To depict any form of data, including points, lines, and polygons, utilize vector tiles. Vector tiles enable the production of unique data layers that may be applied to various data displays. Heatmaps, choropleths, and other data-driven visualizations can be made using vector tiles. A potent platform for displaying vector tiles is CesiumJS. It offers numerous features and choices for personalizing visualizations. CesiumJS is a good framework for doing this, and vector tiles are a useful method to visualize data on a map (Zhou 2016 ). Information is displayed on maps using vector tiles, a type of map data. Points, lines, and polygons recorded in a vector tile format make up vector tiles. Using vector tiles, maps can represent a range of data, including highways, structures, and geographic features. A web-based tool called CesiumJS makes it possible to create and share vector tiles. Web maps, smartphone apps, and Augmented Reality (AR) applications can all benefit from using CesiumJS to produce vector tiles. Declarations Funding: Not applicable Conflicts of interest/Competing interests: The author(s) declare(s) that they have no competing interests Availability of data and material: Not applicable Authors' contributions: Kang and Kim wrote the main manuscript text and Woo, Yun prepared figures 3-4. All authors reviewed the manuscript. References De Beukelaar ITY (2018) Cartographic implications of Vector Tile technology (Unpublished master’s thesis). Geographical Information Management and Applications (GIMA MSc) CARTO, "CARTO, BIGQUERY TILER." from https://carto.com/bigquery-tiler/ CesiumJS "CESIUMJS " from https://cesium.com/platform/cesiumjs/ Ingensand J (2016) "Implementation of tiled vector services: a case study." In Sdw@ giscience: 19 mapbox (2019) Mapbox Documentation mapbox (2019) "Mapbox Vector Tile Specification." from https://github.com/mapbox/vector-tile-spec mapbox (2019) "Vector tiles standards." from https://docs.mapbox.com/data/tilesets/guides/vector-tiles-standards/ Murshed SM (2018) "Design and Implementation of a 4D Web Application for An-alytical Visualization of Smart City Applications." Int J Geo-Information 2018(7). Vitolo C (2015) "Web technologies for environmental Big Data." Environmental Modelling & Software 63(Jan. 2015): 14 Yue P (2014) "BigGIS: How big data can shape next-generation GIS." The Third In-ternational Conference on Agro-Geoinformatics, Beijing, China 2014: 6 Zhou M (2016) "A virtual globe-based vector data model: quaternary quadrangle vector tile model." International Journal of Digital Earth 9, 2016(3): 230–251 Additional Declarations No competing interests reported. Cite Share Download PDF Status: Posted Version 1 posted You are reading this latest preprint version Research Square lets you share your work early, gain feedback from the community, and start making changes to your manuscript prior to peer review in a journal. As a division of Research Square Company, we’re committed to making research communication faster, fairer, and more useful. We do this by developing innovative software and high quality services for the global research community. Our growing team is made up of researchers and industry professionals working together to solve the most critical problems facing scientific publishing. Also discoverable on Platform About Our Team In Review Editorial Policies Advisory Board Help Center Resources Author Services Accessibility API Access RSS feed Manage Cookie Preferences © Research Square 2026 | ISSN 2693-5015 (online) Privacy Policy Terms of Service Do Not Sell My Personal Information {"props":{"pageProps":{"initialData":{"identity":"rs-3193304","acceptedTermsAndConditions":true,"allowDirectSubmit":true,"archivedVersions":[],"articleType":"Research Article","associatedPublications":[],"authors":[{"id":221203074,"identity":"808b0d3f-fa2c-43fa-9f7c-5ed1c1a3173d","order_by":0,"name":"Kuk Kang","email":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAAyAQMAAABI0h/eAAAABlBMVEX///8AAABVwtN+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAzElEQVRIiWNgGAWjYBACCR4GZoYPFTZyQDbjAQaGBOK0MM44k2bMANRKvBZmzrbDiQ1Ea5HsOWNszMCWlt4vkX/gwIeKNAb+9m78+qR5e4yTC3hscmfOSGY4OONMDoPEmbMb8GqR4+cxPjxDIi13w41khsO8bRUMBhK5RGjhMTicbkC0FrDDeBIOJ0C15BDWItlzrNhwxoE0w5k9jw2AfknjIegXiTPJmyU+/rOR52dPfPjgQ0WyHH97L34tGICHNOWjYBSMglEwCrACALZXR08Ekg8KAAAAAElFTkSuQmCC","orcid":"","institution":"Institute of Remote Sensing and Geoinformatics, Academy of Science","correspondingAuthor":true,"submittingAuthor":false,"prefix":"","firstName":"Kuk","middleName":"","lastName":"Kang","suffix":""},{"id":221203075,"identity":"3bf28e88-a307-4a51-acdd-04acc44aade7","order_by":1,"name":"Kyongil Woo","email":"","orcid":"","institution":"Institute of Remote Sensing and Geoinformatics, Academy of Science","correspondingAuthor":false,"submittingAuthor":false,"prefix":"","firstName":"Kyongil","middleName":"","lastName":"Woo","suffix":""},{"id":221203076,"identity":"deaf814d-1e47-4027-83f1-9761745c8dd8","order_by":2,"name":"Cholnam Yun","email":"","orcid":"","institution":"Institute of Remote Sensing and Geoinformatics, Academy of Science","correspondingAuthor":false,"submittingAuthor":false,"prefix":"","firstName":"Cholnam","middleName":"","lastName":"Yun","suffix":""},{"id":221203077,"identity":"0faf9a99-7506-45af-9d66-f1dfb4337493","order_by":3,"name":"Wonsok Kim","email":"","orcid":"","institution":"Institute of Remote Sensing and Geoinformatics, Academy of Science","correspondingAuthor":false,"submittingAuthor":false,"prefix":"","firstName":"Wonsok","middleName":"","lastName":"Kim","suffix":""}],"badges":[],"createdAt":"2023-07-22 01:14:17","currentVersionCode":1,"declarations":"","doi":"10.21203/rs.3.rs-3193304/v1","doiUrl":"https://doi.org/10.21203/rs.3.rs-3193304/v1","draftVersion":[],"editorialEvents":[],"editorialNote":"","failedWorkflow":false,"files":[{"id":40722452,"identity":"9475406a-72e1-4924-91ad-7eacc50e546e","added_by":"auto","created_at":"2023-07-28 14:02:46","extension":"png","order_by":1,"title":"Figure 1","display":"","copyAsset":false,"role":"figure","size":48572,"visible":true,"origin":"","legend":"\u003cp\u003eGenerating Mapbox vector tiles\u003c/p\u003e","description":"","filename":"1.png","url":"https://assets-eu.researchsquare.com/files/rs-3193304/v1/f6e33c4d5e4f6277dd9187e4.png"},{"id":40723075,"identity":"e4b3c0e9-95f6-4ee2-99a6-9645eb82f811","added_by":"auto","created_at":"2023-07-28 14:10:46","extension":"png","order_by":2,"title":"Figure 2","display":"","copyAsset":false,"role":"figure","size":116236,"visible":true,"origin":"","legend":"\u003cp\u003eWork flow\u003c/p\u003e","description":"","filename":"2.png","url":"https://assets-eu.researchsquare.com/files/rs-3193304/v1/2d1bf703eb20598c2a576a13.png"},{"id":40722453,"identity":"cf42b7a7-a7f2-447e-88b1-98d31ce355db","added_by":"auto","created_at":"2023-07-28 14:02:46","extension":"png","order_by":3,"title":"Figure 3","display":"","copyAsset":false,"role":"figure","size":1401890,"visible":true,"origin":"","legend":"\u003cp\u003eTexture based rendering of vector tile.\u003c/p\u003e","description":"","filename":"3.png","url":"https://assets-eu.researchsquare.com/files/rs-3193304/v1/74f5c13469bc12609a059fc3.png"},{"id":40722456,"identity":"6a20db9d-51ed-4ee4-acd5-c9f64676aa5f","added_by":"auto","created_at":"2023-07-28 14:02:46","extension":"png","order_by":4,"title":"Figure 4","display":"","copyAsset":false,"role":"figure","size":2100733,"visible":true,"origin":"","legend":"\u003cp\u003e3D model of vector tile.\u003c/p\u003e","description":"","filename":"4.png","url":"https://assets-eu.researchsquare.com/files/rs-3193304/v1/c6fe916d0ea5d4923ffcf384.png"},{"id":42333563,"identity":"d89cf805-fe9f-42b5-9c64-0169ba73152e","added_by":"auto","created_at":"2023-08-29 22:37:18","extension":"pdf","order_by":0,"title":"","display":"","copyAsset":false,"role":"manuscript-pdf","size":3327113,"visible":true,"origin":"","legend":"","description":"","filename":"manuscript.pdf","url":"https://assets-eu.researchsquare.com/files/rs-3193304/v1/ff0d7c3b-a99d-45d8-9f11-c3c836d4e021.pdf"}],"financialInterests":"No competing interests reported.","formattedTitle":"Visualization of Vector Tiles on CesiumJS Virtual Globe","fulltext":[{"header":"1. Introduction","content":"\u003cp\u003eVector data is used extensively in geographic information systems (GIS) to analyse and administrate virtual landscapes. Methods that enable the integrated visualization of landscape and geospatial vector data are thus necessary. Usually, these data are set up as either raster or vector data. Geometry is represented via vector data as a set of coordinate lists for points, lines, and polygons. Eliminating extra or undesired detail from the output image is a crucial challenge for computer graphics and GIS communities. GIS geometric simplification is one of the more general approaches, which are ways to graphically depict a specific geographic entity or group of geographic entities using various visuals when showing the entities at various map scales. (Beukelaar \u003cspan citationid=\"CR1\" class=\"CitationRef\"\u003e2018\u003c/span\u003e)\u003c/p\u003e \u003cp\u003eRendering vector data representing features like road networks, political districts, and rivers is crucial in GIS systems. It is difficult to render vectors in a way that allows them to drape perfectly over topography. Vector data can be rendered on a 3D model using one of two common methods. Both represent the vector data as primitives of geometry or pre-render the vector data to image with style. We contend that vector data need to be handled separately from raster data for various reasons and that the graphics pipeline should render it as distinct geometry. Modern methods create a hurdle since they produce a LOD terrain whose constituent triangles change every frame. Therefore, the vector geometry must likewise change at each frame for the vector data to display accurately on the 3D mesh. (Zhou \u003cspan citationid=\"CR11\" class=\"CitationRef\"\u003e2016\u003c/span\u003e)\u003c/p\u003e \u003cp\u003eA common area of thematic cartography is the 3D visualization of data on a virtual globe. Since the debut of Google Earth, one of the most prevalent methods of releasing such material has been the creation of KML overlays. For several years, the Google Earth plugin made it straightforward to publish these KML-based visualizations to the Web [2]. Ultimately, the plug in-technology grew antiquated, and by the end of 2016, Google had discontinued this service. With the advent of new technologies such as HTML5 and WebGL, a number of JavaScript-based 3D globe libraries and APIs (Application Programming Interfaces) were created to make it easier to show 3D interactive globe models on websites without the use of any plugins (Zhou \u003cspan citationid=\"CR11\" class=\"CitationRef\"\u003e2016\u003c/span\u003e).\u003c/p\u003e \u003cp\u003eOpenWebGlobe, developed by Swiss researchers, is one such library, as is the WebGL Earth JavaScript API, which began as a bachelor thesis and is now maintained by Klokan Technologies. Although these two programs have their uses, using the CesiumJS API is preferable due to the limitations of these two products. CesiumJS has far more capability, superb documentation, and a hot development community, guaranteeing that most issues are swiftly resolved on programmer forums. This is not the case with the two products mentioned above. Every industry uses CesiumJS, which enables 3D web visualization on any device and supports CAD, web, BIM, point clouds, CityGML, and photogrammetry. These businesses range from real estate to sports management and engineering. But when it became increasingly difficult to render and stream 3D visualizations effectively over time, the CesiumJS community created an open data format called 3D tiles that supports streaming and is tailored for rendering. CesiumJS is widely used as it has the benefits of being cross-device, cross-platform, and dynamic. It enables rendering a lot of objects on both the 3D globe and map without requiring the installation of any browser extensions. One option to use CesiumJS is available: either convert data to the Cesium 3D Tiles format and create the visualization using the CesiumJS library or transmit the data to the Cesium Ion platform, which streams the data and creates the visualization on its own. The development of cameras and geometric objects, as well as the integration of multiple data sources, are all made possible by CesiumJS, the only open-source software that has good user community maintenance.\u003c/p\u003e \u003cp\u003eTiles can be styled dynamically because they are vectors, which enables a broad variety of map styles on global data. Using Mapbox GL JS or the Mapbox Maps SDKs for Android and iOS, it can dynamically modify the look of map without downloading new tiles (mapbox \u003cspan citationid=\"CR5\" class=\"CitationRef\"\u003e2019\u003c/span\u003e).\u003c/p\u003e \u003cp\u003eA small vector tile makes it possible to create high-resolution global maps, load them quickly, and cache them effectively. The Mapbox cartographers in charge of the vector tilesets that Mapbox offers put a lot of effort into finding a balance between accuracy and effectiveness (mapbox \u003cspan citationid=\"CR5\" class=\"CitationRef\"\u003e2019\u003c/span\u003e).\u003c/p\u003e \u003cp\u003eIt can quickly re-render the map because all of map data is loaded in the client side, enabling seamless zooming, tilting, and rotation.\u003c/p\u003e \u003cp\u003eOne can easily use dynamical querying feature to access map's characteristics. The integration of PostGIS with MapTiler Server is based on the idea of layers. As a result of calling the ST_AsMVTGeom function, each layer is represented by a separate SQL query that returns geometry in tile coordinate space. The ST_AsMVT function can create a binary MapBox Vector Tile by passing this geometry, which MapTiler Server anticipates will be labeled \"mvtgeometry,\" to the function.\u003c/p\u003e \u003cp\u003eCARTO provides unique geographical visualization, analysis, and app creation capabilities directly within Google Cloud's data warehouse. It utilizes geographic data natively with BigQuery while using straightforward SQL to create attractive visualizations. BigQuery can also execute powerful spatial analytics and generate amazing maps from billions of information (CARTO). This paper presents a technique for visualizing Map-box vector tiles in a 3D virtual environment. The hosting of vector tiles on CartoDB/Bigquery and the process for producing them are detailed.\u003c/p\u003e"},{"header":"2. Related Work","content":"\u003cp\u003eThere are various custom methods used to load vector tiles on CesiumJS. There have only been a few studies on visualizations that employ approaches to vector-based tiling. An overview of current techniques for storing, processing, and displaying data in a geo-graphic environment is provided in this section.\u003c/p\u003e \u003cp\u003eA survey on how large data is managed to utilize web technologies was written by Vitolo et al. (Vitolo \u003cspan citationid=\"CR9\" class=\"CitationRef\"\u003e2015\u003c/span\u003e) Data collections expand quickly as computing science develops. New technologies are required to handle such a massive volume of data. He explains how this must be possible regarding analysis methods, labour processes, and dataset interaction. He highlights the current web technologies used to process straightforward datasets in the paper. Additionally, maintaining a relationship to standards maintained by the Open Geospatial Consortium (OGC) while handling more complex data becomes more difficult.\u003c/p\u003e \u003cp\u003eYue \u0026amp; Jiang (Yue \u003cspan citationid=\"CR10\" class=\"CitationRef\"\u003e2014\u003c/span\u003e) explores big data in the context of geographic information systems, whereas Vitolo concentrates on big data and web technologies. According to him, it is crucial to support the geospatial domain because GIS software, in particular, needs to be capable of handling big datasets containing geospatial data.\u003c/p\u003e \u003cp\u003eMost interactions between end users and these datasets occur through desktop GIS programs. To the best of our knowledge, more needs to be done to develop web-based apps that can manage huge data and give clients and end users access regardless of the platform.\u003c/p\u003e \u003cp\u003eThe most used geographic data storage technology is PostGIS. Other new technology-based alternatives are available, but because of their simplicity and the scarcity of geospatial computer scientists, people frequently remain with the tried-and-true PostGIS database. It is also frequently necessary to use OGC standard data formats, which facilitates the implementation of PostGIS applications.\u003c/p\u003e \u003cp\u003eEven though tiling is a fairly old idea, it is nonetheless cutting-edge. This technology must accommodate future demands. Currently, pre-rendered raster images are used to store tiles. Tile caching is a subject that is frequently brought up while discussing tiling. In addition to server-side caching for raster images, vector tiles, such as non-transmission-optimized GeoJSON vector tiles, can also be cached.\u003c/p\u003e \u003cp\u003eMost approaches concentrate on a single subject rather than combining various concepts. One method involves using simple queries to retrieve data from the back end and compressing files for delivery. However, allowing users to browse over the data does not assist. The servers must be specifically queried for a specific subset of data. Tile based approaches to creating a map are primarily concerned with tiling rather than with trying to compress or cache vector tiles without using much memory at every stage of the process.\u003c/p\u003e"},{"header":"3. Materials and Methods","content":"\u003cp\u003eData processing for vector data hosting on Carto/Bigquery was done (Fig.\u0026nbsp;\u003cspan refid=\"Fig1\" class=\"InternalRef\"\u003e1\u003c/span\u003e).\u003c/p\u003e \u003cp\u003eOccasionally, it is impossible to display data legibly at a particular zoom level. For in-stance, a thick succession of topographic lines would appear as a tangle of objects when seen at a low zoom level. In contrast, low-resolution data might appear excessively coarse at high zoom levels. The Mapbox Uploads API analyses your data and automatically determines the maximum and minimum zoom levels at which tiles should be rendered to prevent both potential concerns. The uploaded image resolution determines raster tile sets' minimum and maximum zoom levels. The tile set will render at more zoom levels if the images have a higher resolution.\u003c/p\u003e \u003cp\u003eTile imagery was generated with style and applied to CesiumJS globe as an imagery layer using Mapbox Vector Tile Basic JS Renderer. In the newest version (1.2.1), Mapbox throws a warning (Chrome, Mac): Geometry exceeds the allowed extent, reduce your vector tile buffer size. This warning is actually coming from the vector tiles themselves, so the recommended way to avoid it is to set smaller buffers when generating tiles. This limitation and warning aren't new, but at one point, the threshold will be stabilized (mapbox \u003cspan citationid=\"CR5\" class=\"CitationRef\"\u003e2019\u003c/span\u003e).\u003c/p\u003e \u003cp\u003eSimplifying the map at lower zoom levels lowers complexity in areas where the details are unnoticeable. This simplification increases the map's loading speed.\u003c/p\u003e \u003cp\u003eSometimes this occurs immediately after loading, at least during map navigation. A maximum amount of data can exist in a single vector tile. By reducing complex vector features during the upload process, we ensure that each tile in your vector tile set falls be-low this maximum size and displays accurately on your maps.\u003c/p\u003e \u003cp\u003eWhen the zoom level exceeded maximum built zoom, vector data was inserted as a primitive with a custom style or 3D model. Normally vector tiles are built to level 14 as the maximum, and mapping software over-zooms with no loss in quality.\u003c/p\u003e \u003cp\u003eThe number of vector objects is significantly lower at high-level zoom than at low-level zoom. Therefore, when it is low level, we render it as an image; when it is high level, we render it as a vector to avoid performance issues. Additionally, it will offer options for the primitive shown in CesiumJS when rendering vectors (Primitives). In the case of point-type vector data, it will be a 2D shape or a 3D model.\u003c/p\u003e \u003cp\u003eGenerally speaking, this notice can be disregarded if the end-user is not experiencing any other problems. The correct tiles on the maximum zoom of the tile set must be chosen when the current reference zoom is greater than the maximum zoom of the vector tile set. When the source's maximum zoom level is set, Mapbox-Gl will be instructed to keep zooming after that point rather than requesting the source at all zoom levels.\u003c/p\u003e \u003cp\u003eThe speed at which vector tiles are generated is slow or unavailable because it may interfere with the display of other layers depending on the source of the data or the number of vector tiles in a layer at a given zoom level (Zhou \u003cspan citationid=\"CR11\" class=\"CitationRef\"\u003e2016\u003c/span\u003e). In other words, the process may not be able to produce enough vector tiles as needed.\u003c/p\u003e \u003cp\u003ePolyline and polygon vector data must be recreated when adding primitives to the CesiumJS globe. In the meantime, there may be a few optimization tricks it can do depending on what it is trying to visualize in the application. It is considered moving 100k points in a primitive should be fast. This is more or less the underlying principle behind 3D Tiles that allows to visualize datasets with billions of points, for example. This is how the up-coming vector format of 3D Tiles would handle that for supporting time dynamic features.\u003c/p\u003e \u003cp\u003eOverall workflow described in Fig.\u0026nbsp;\u003cspan refid=\"Fig2\" class=\"InternalRef\"\u003e2\u003c/span\u003e.\u003c/p\u003e"},{"header":"4. Results","content":"\u003cp\u003eIn terms of thematic content, the prospects of 3D visualization are limitless. There are many more visual variations than in the context of 2D maps. This is different from saying that one should overload the globe with data; rather, displaying too many items on the globe or employing too many visual variables at the same time may lead to data loss. Most theme globes, however, only employ one of the three most prevalent depiction methods: choropleths, 3D prism maps, and graded 3D symbols. To integrate an interactive virtual globe into an HTML website using CesiumJS, merely a few lines of JavaScript code are necessary. This is detailed in the CesiumJS API documentation, particularly in the instructional section. After we have a virtual globe on our website, we can add various sorts of themed visualizations to it in various ways based on the dataset format (Ingensand \u003cspan citationid=\"CR4\" class=\"CitationRef\"\u003e2016\u003c/span\u003e).\u003c/p\u003e \u003cp\u003eThe findings imply that the suggested CartoDB vector tiler, as opposed to the conventional vector database method, can assist us in more effectively visualizing vector tiles on CesiumJS Web Globe. A vector tile at a lower level (large scale) can be requested and seen on a 3D terrain surface, making these benefits even more obvious (Murshed \u003cspan citationid=\"CR8\" class=\"CitationRef\"\u003e2018\u003c/span\u003e).\u003c/p\u003e \u003cp\u003eThe last generalization aspect mentioned by Ingensand (\u003cspan citationid=\"CR4\" class=\"CitationRef\"\u003e2016\u003c/span\u003e) is the selection of relevant vector objects for a certain zoom level. This aspect is implemented in two different ways within the WHERE clause of the developed custom PostGIS functions. The first is attribute driven, where a certain attribute describes for which zoom levels the data shall be included. This can be a direct Integer value representing a zoom level or a class attribute.\u003c/p\u003e \u003cp\u003eVector tiles are requested based on the index number for 3D displays. Vector data can be rendered in three dimensions using a geometry-based or texture-based method after the vector tiles have been parsed. Elevation interpolation techniques can be employed to convert the vector data into 3D coordinates when a geometry-based approach is utilized to display the vector tile (Fig.\u0026nbsp;\u003cspan refid=\"Fig4\" class=\"InternalRef\"\u003e3\u003c/span\u003e). The vector data can be viewed on a 3D terrain surface using 3D rendering techniques. The vector tiles must be rasterized into texture vector tiles before using texture mapping technology to map them onto a 3D terrain surface when using a texture-based approach to view the vector tiles (Fig.\u0026nbsp;\u003cspan refid=\"Fig3\" class=\"InternalRef\"\u003e4\u003c/span\u003e).\u003c/p\u003e \u003cp\u003eConventional map symbols can be merged with the rasterized vector data when a texture-based technique is used to view the vector tiles. Although there are no significant technical issues when using the geometry-based method to describe these basic map symbols, the user experience is negatively impacted by the low rendering efficiency, especially when working with global vector map data.\u003c/p\u003e \u003cp\u003eThe second way is geometry driven, where the area of a polygon, in relation to the zoom level, controls the selection of Raster overlays. One of its advantages is that vector tiles carry the data we need to visualize on them so we can rapidly access them using APIs. The properties attribute of a vector tile is where data are kept. We can develop more adaptable data-driven visualizations by gaining access to tile attributes.\u003c/p\u003e \u003cp\u003eThe CesiumJS web globe is a very user-friendly platform, making it advantageous to utilize it to immediately process the vector tiles because the user can readily visualize the data. Utilizing the CesiumJS web globe has the drawback of not analyzing massive amounts of data. A GIS program like ArcGIS or QGIS has the benefit of handling massive volumes of data. The drawback of utilizing GIS software is that it requires more training to use than the CesiumJS online globe and is not as user-friendly.\u003c/p\u003e "},{"header":"5. Conclusions","content":"\u003cp\u003eVector tiles are a potent tool for data visualization on a map, in conclusion. They offer a scalable and effective technique to render massive amounts of data. To depict any form of data, including points, lines, and polygons, utilize vector tiles. Vector tiles enable the production of unique data layers that may be applied to various data displays. Heatmaps, choropleths, and other data-driven visualizations can be made using vector tiles. A potent platform for displaying vector tiles is CesiumJS. It offers numerous features and choices for personalizing visualizations. CesiumJS is a good framework for doing this, and vector tiles are a useful method to visualize data on a map (Zhou \u003cspan citationid=\"CR11\" class=\"CitationRef\"\u003e2016\u003c/span\u003e).\u003c/p\u003e \u003cp\u003eInformation is displayed on maps using vector tiles, a type of map data. Points, lines, and polygons recorded in a vector tile format make up vector tiles. Using vector tiles, maps can represent a range of data, including highways, structures, and geographic features. A web-based tool called CesiumJS makes it possible to create and share vector tiles. Web maps, smartphone apps, and Augmented Reality (AR) applications can all benefit from using CesiumJS to produce vector tiles.\u003c/p\u003e"},{"header":"Declarations","content":"\u003cp\u003eFunding:\u0026nbsp;\u003c/p\u003e\n\u003cp\u003eNot applicable\u003c/p\u003e\n\u003cp\u003eConflicts of interest/Competing interests:\u003c/p\u003e\n\u003cp\u003eThe author(s) declare(s) that they have no competing interests\u003c/p\u003e\n\u003cp\u003eAvailability of data and material:\u003c/p\u003e\n\u003cp\u003eNot applicable\u003c/p\u003e\n\u003cp\u003eAuthors\u0026apos; contributions:\u003c/p\u003e\n\u003cp\u003eKang and Kim wrote the main manuscript text and Woo, Yun prepared figures 3-4. All authors reviewed the manuscript.\u003c/p\u003e"},{"header":"References","content":"\u003col\u003e\u003cli\u003e\u003cspan\u003eDe Beukelaar ITY (2018) Cartographic implications of Vector Tile technology (Unpublished master\u0026rsquo;s thesis). Geographical Information Management and Applications (GIMA MSc)\u003c/span\u003e\u003c/li\u003e \u003cli\u003e\u003cspan\u003eCARTO, \"CARTO, BIGQUERY TILER.\" from \u003cspan class=\"ExternalRef\"\u003e\u003cspan class=\"RefSource\"\u003ehttps://carto.com/bigquery-tiler/\u003c/span\u003e\u003cspan address=\"https://carto.com/bigquery-tiler/\" targettype=\"URL\" class=\"RefTarget\"\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/li\u003e \u003cli\u003e\u003cspan\u003eCesiumJS \"CESIUMJS \" from \u003cspan class=\"ExternalRef\"\u003e\u003cspan class=\"RefSource\"\u003ehttps://cesium.com/platform/cesiumjs/\u003c/span\u003e\u003cspan address=\"https://cesium.com/platform/cesiumjs/\" targettype=\"URL\" class=\"RefTarget\"\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/li\u003e \u003cli\u003e\u003cspan\u003eIngensand J (2016) \"Implementation of tiled vector services: a case study.\" In Sdw@ giscience: 19\u003c/span\u003e\u003c/li\u003e \u003cli\u003e\u003cspan\u003emapbox (2019) Mapbox Documentation\u003c/span\u003e\u003c/li\u003e \u003cli\u003e\u003cspan\u003emapbox (2019) \"Mapbox Vector Tile Specification.\" from \u003cspan class=\"ExternalRef\"\u003e\u003cspan class=\"RefSource\"\u003ehttps://github.com/mapbox/vector-tile-spec\u003c/span\u003e\u003cspan address=\"https://github.com/mapbox/vector-tile-spec\" targettype=\"URL\" class=\"RefTarget\"\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/li\u003e \u003cli\u003e\u003cspan\u003emapbox (2019) \"Vector tiles standards.\" from \u003cspan class=\"ExternalRef\"\u003e\u003cspan class=\"RefSource\"\u003ehttps://docs.mapbox.com/data/tilesets/guides/vector-tiles-standards/\u003c/span\u003e\u003cspan address=\"https://docs.mapbox.com/data/tilesets/guides/vector-tiles-standards/\" targettype=\"URL\" class=\"RefTarget\"\u003e\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/li\u003e \u003cli\u003e\u003cspan\u003eMurshed SM (2018) \"Design and Implementation of a 4D Web Application for An-alytical Visualization of Smart City Applications.\" Int J Geo-Information 2018(7).\u003c/span\u003e\u003c/li\u003e \u003cli\u003e\u003cspan\u003eVitolo C (2015) \"Web technologies for environmental Big Data.\" Environmental Modelling \u0026amp; Software 63(Jan. 2015): 14\u003c/span\u003e\u003c/li\u003e \u003cli\u003e\u003cspan\u003eYue P (2014) \"BigGIS: How big data can shape next-generation GIS.\" The Third In-ternational Conference on Agro-Geoinformatics, Beijing, China 2014: 6\u003c/span\u003e\u003c/li\u003e \u003cli\u003e\u003cspan\u003eZhou M (2016) \"A virtual globe-based vector data model: quaternary quadrangle vector tile model.\" International Journal of Digital Earth 9, 2016(3): 230\u0026ndash;251\u003c/span\u003e\u003c/li\u003e\u003c/ol\u003e"}],"fulltextSource":"","fullText":"","funders":[],"hasAdminPriorityOnWorkflow":false,"hasManuscriptDocX":true,"hasOptedInToPreprint":true,"hasPassedJournalQc":"","hasAnyPriority":false,"hideJournal":true,"highlight":"","institution":"","isAcceptedByJournal":false,"isAuthorSuppliedPdf":false,"isDeskRejected":"","isHiddenFromSearch":false,"isInQc":false,"isInWorkflow":false,"isPdf":false,"isPdfUpToDate":true,"isWithdrawnOrRetracted":false,"journal":{"display":true,"email":"[email protected]","identity":"researchsquare","isNatureJournal":false,"hasQc":true,"allowDirectSubmit":true,"externalIdentity":"","sideBox":"","snPcode":"","submissionUrl":"/submission","title":"Research Square","twitterHandle":"researchsquare","acdcEnabled":true,"dfaEnabled":false,"editorialSystem":"","reportingPortfolio":"","inReviewEnabled":false,"inReviewRevisionsEnabled":true},"keywords":"Mapbox, CesiumJS, Vector Tiles, BigQuery, CartoDB, Virtual Globe","lastPublishedDoi":"10.21203/rs.3.rs-3193304/v1","lastPublishedDoiUrl":"https://doi.org/10.21203/rs.3.rs-3193304/v1","license":{"name":"CC BY 4.0","url":"https://creativecommons.org/licenses/by/4.0/"},"manuscriptAbstract":"\u003cp\u003eEssentially, CesiumJS-which can be accessed through the link, \u003cspan class=\"ExternalRef\"\u003e\u003cspan class=\"RefSource\"\u003ehttp://cesiumjs.org\u003c/span\u003e\u003cspan address=\"http://cesiumjs.org\" targettype=\"URL\" class=\"RefTarget\"\u003e\u003c/span\u003e\u003c/span\u003e, is an open-source JavaScript library for creating 3D earths and maps with the best performance, visual quality, precision, and ease of use. It is a wonderful tool for 3D-themed visualizations of earth. CesiumJS has a number of data sources, but none of them supports vector tile format. This article explains how to visualize Mapbox vector tiles in a CesiumJS virtual globe environment. CartoDB/BigQuery hosts vector tiles, and a process for producing vector tiles from massive vector data using the BigQuery tiler of CartoDB has been provided.\u003c/p\u003e","manuscriptTitle":"Visualization of Vector Tiles on CesiumJS Virtual Globe","msid":"","msnumber":"","nonDraftVersions":[{"code":1,"date":"2023-07-28 14:02:41","doi":"10.21203/rs.3.rs-3193304/v1","editorialEvents":[{"type":"communityComments","content":0}],"status":"published","journal":{"display":true,"email":"[email protected]","identity":"researchsquare","isNatureJournal":false,"hasQc":true,"allowDirectSubmit":true,"externalIdentity":"","sideBox":"","snPcode":"","submissionUrl":"/submission","title":"Research Square","twitterHandle":"researchsquare","acdcEnabled":true,"dfaEnabled":false,"editorialSystem":"","reportingPortfolio":"","inReviewEnabled":false,"inReviewRevisionsEnabled":true}}],"origin":"","ownerIdentity":"79fa2831-6b30-48e2-88bd-ad1772f1c4d5","owner":[],"postedDate":"July 28th, 2023","published":true,"recentEditorialEvents":[],"rejectedJournal":[],"revision":"","amendment":"","status":"posted","subjectAreas":[],"tags":[],"updatedAt":"2023-08-29T22:29:10+00:00","versionOfRecord":[],"versionCreatedAt":"2023-07-28 14:02:41","video":"","vorDoi":"","vorDoiUrl":"","workflowStages":[]},"version":"v1","identity":"rs-3193304","journalConfig":"researchsquare"},"__N_SSP":true},"page":"/article/[identity]/[[...version]]","query":{"redirect":"/article/rs-3193304","identity":"rs-3193304","version":["v1"]},"buildId":"cBFmMYwuxLRRLfASyISRj","isFallback":false,"isExperimentalCompile":false,"dynamicIds":[84888],"gssp":true,"scriptLoader":[]}