Vector maps offer unparalleled flexibility and customization, allowing developers to style, hide, add, or modify data on-the-fly to create unique mapping experiences. Read on to explore the concept of vector maps in the context of Mapbox, a leading provider of geospatial tools and services.
Vector maps are a cutting-edge approach to mapping that leverages geospatial data to create dynamic and interactive maps in real-time. Unlike traditional raster maps that use images, vector maps are rendered mathematically on the client device, such as a mobile phone, web browser, or automotive system. These maps are composed of geospatial information, such as coordinates, addresses, cities, or zip codes, which form the invisible fabric of our world in the form of points, lines, and polygons.
download vector maps
Vector maps use mathematical equations to render geospatial data in real time, while raster maps are made up of pre-rendered images. Vector maps are highly flexible and customizable, allowing for dynamic styling, interactivity, and data manipulation. Raster maps, on the other hand, are static images and do not offer the same level of flexibility and interactivity.
Mapbox offers both raster and vector tilesets containing a wide variety of data, including road networks, place names, points of interest, satellite and aerial imagery, elevation data, live traffic data, expertly curated national borders, transit data, and more.
Tilesets are a vital component of both vector and raster maps as they facilitate the efficient delivery, rendering, and interaction with map data, ensuring a smooth and responsive map experience for users.
Vector tiles separate the data from the style, allowing for flexible and customizable map styling. Map styles can be defined separately using style rules, which specify how the data should be displayed, including the colors, labels, icons, and other visual elements. This enables developers and map designers to easily customize the appearance of maps to suit their specific needs or branding.
Vector tiles are scalable and can be used to represent geographic data at different levels of detail, from global to local. This allows for seamless zooming and panning of maps at different scales without the need for multiple pre-rendered map tiles, which can save storage space and reduce the complexity of map rendering.
Vector tiles help add interactivity to maps as they can be easily queried and manipulated in real-time. This allows for dynamic map interactions such as searching for locations, highlighting features, and displaying additional information, providing a rich and interactive user experience.
Vector maps allow developers to fully customize the appearance and behavior of maps, giving them unparalleled flexibility to create unique mapping experiences. With Mapbox GL JS, developers can easily style, hide, add, or modify data on-the-fly, allowing for dynamic and interactive maps that can adapt to various use cases and user interactions.
Vector tiles are optimized for delivery on mobile or web platforms, making them lightweight and efficient for rendering on client devices. This means faster load times, smoother map interactions, and reduced data consumption, making vector maps ideal for use in resource-constrained environments, such as mobile apps or areas with limited internet connectivity.
Vector maps are rendered in real-time on the client device, allowing for dynamic and interactive map experiences. Mapbox GL leverages the power of WebGL, a web standard for rendering graphics on the GPU, to achieve high-performance rendering of vector
Mapbox offers a powerful tiling service, Mapbox Tiling Service (MTS), that leverages vector tiles and custom tilesets to enable developers and map designers to create stunning and interactive maps for their applications. Upload your own geospatial data or utilize the extensive collection of global map data provided by Mapbox.
Vector maps use mathematical equations to render geospatial data in real time and are highly flexible allowing for dynamic styling, interactivity, and data manipulation. Raster maps are made up of static images and do not offer the same level of flexibility and interactivity.
The Vector Map (VMAP), also called Vector Smart Map, is a vector-based collection of geographic information system (GIS) data about Earth at various levels of detail. Level 0 (low resolution) coverage is global and entirely in the public domain. Level 1 (global coverage at medium resolution) is only partly in the public domain.
The Maps JavaScript API offers two different implementations of the map: rasterand vector. The raster map is loaded by default, and loads the map as a grid ofpixel-based raster image tiles, which are generated by Google Maps Platformserver-side, then served to your web app. The vector map is a composed ofvector-based tiles, which are drawn at load time on the client-side usingWebGL, a web technology that allows the browser to access the GPU on the user'sdevice to render 2D and 3D graphics.
The vector map is the same Google map your users are familiar with using, andoffers a number of advantages over the default raster tile map, most notablythe sharpness of vector-based images, and the addition of 3D buildings at closezoom levels. The vector map also supports some new features, such as theability to add 3D content with WebGL Overlay View, programmatic tilt andheading control, enhanced camera control, and fractional zoom for smootherzooming.
Vector maps support fractional zoom, which lets you zoom using fractionalvalues instead of integers. While both raster and vector maps support fractionalzoom, fractional zoom is on by default for vector maps, and off by default forraster maps. Use the isFractionalZoomEnabled map option to turn fractionalzoom on and off.
I've seen (also in their examples), that when their vector tiles are integrated using
mapbox.gl, the zoom-in/zoom-out becomes smooth, but I would prefer to use their own javascript library due to other advantages (like traffic incidents display, etc.).
I tried to reproduce the effect and i understand what you mean. From what i understand (i have not worked with HERE maps before), while a user zoom in/out the re-rendering process is the one that produces that single-flicker of a point sometimes.
I have tried both. The first one does not fit my needs because GeoJson appears too large, what results in performance issues. The second one is bad from UX point of view, because it is using raster tiles, whereas nowadays we should use vector tiles. I also looked at OpenLayers / Leaflet, but didn't find an official way to go with Google Maps (see -gl-js/issues/1791).
BTW, thanks to LuisTavares solution about the -vector-tiles-basic-js-renderer library which relies on OverlayView too. I have not tried it but the approach is the same as in
deck.gl so there should not by any issues.
Occasionally you see posts about self-hosted maps pop up on HN. And you know what? That's great! People self-hosting more of their software is generally a good thing, both for them learning how to rely less on the larger corporations out there, as well as perhaps picking up a technical skill or two in the process. Better yet, they might be motivated to contribute back to any of the open source solutions that they might use, such as OpenStreetMap.
Raster maps use a fixed amount of pixels for displaying the data, like most images do, whereas vectors use a bunch of maths to display curves, fill colors and so on. The former is great for photos, whereas the latter is used for all sorts of icons, UI elements and more recently - maps.
Anyone who has ever used a vector graphics editing program like Inkscape can probably attest that as the complexity of vector graphics increases, the performance seems to dip rather noticeably. This also seems to hold true for when they're used for the display of map data, especially on lower end mobile devices.
Now, I don't have a beefy phone, but a mediocre Android phone from just two years ago (2020) shouldn't have a really poor performance when doing something a simple as dragging maps around, which in my case seems to be the case. So, I decided to do a very brief comparison of vector and raster maps on my phone and record the screen, to demonstrate this.
I'm sure that the slowness has something to do with rendering vector data, because all of the sudden those maps become unusable - slow zooming, slow loading (possibly the data is fetched reasonably quickly, just slow to display), slow scrolling. In a word, laggy. When looking at an area of my choice, using the vector maps (even after letting them load fully) I get probably less than 10 frames per second so panning feels choppy.
On the other hand, the raster maps are basically what you'd get when panning across an image - the latter experience remains reasonably smooth. There, the only disadvantage is the typical swapping out of raster tiles as you zoom in or out, but that's a small nuisance at best, apart from the visual difference in quality.
As it currently stands, if we all used only vector data, I feel like a lot of people on lower spec devices would be left out. I wonder whether any serious tests have been made on the battery usage or performance of both types, but even tests this simple show that there are certain problems with the current implementations of vector maps.
With vector maps you wouldn't get none of this weirdness, that's possibly caused by either loading a lower quality image for mobile, or simply displaying a different quality image for that particular zoom level across the devices.
In a sense, it all depends on what kind of a device you're using. Vector maps will be better on most of the beefier devices, whereas raster maps might be better for everyone who's using something less powerful, at least from a performance perspective.
Of course, this doesn't even get into the complexity that might be underlying these technologies - the actual code that you need to generate either the raster or vector tiles, and how easy each of those would be to cache. Furthermore, it's likely that how complex your map data is will also have a significant impact on how quickly or slowly everything works.
f448fe82f3