We are used to using the main online map services provided by the most well-known companies such as Google, Microsoft, Apple and so on. Then there are open tools like OpenStreetMap that lend themselves to the most disparate uses. Protomaps is a platform that provides tools and services for viewing a world map interactive.
Unlike commercial services, Protonmaps maps are open source and, even, they can be saved locally or on the server cloud. It is no longer necessary to rely on platforms developed by third parties to create and manage applications that make use of updated maps: The world map is available to any developer who wants to integrate it into any kind of web platform.
What is Protomaps and how does the interactive world map work
Protomaps is designed to deliver interactive maps quick to use, very light and highly customizable. The latter is precisely the flagship of Protomaps: vector maps are made up of geometric data representing points, lines and polygons, and can be scaled without loss of quality. The approach ensures greater flexibility and interactivity compared to traditional ones folder raster image-based.
The operation of Protomaps is based on the use of vector data and advanced rendering tools to visualize geographic information. Developers can access the Protomaps platform via API (Application Programming Interface) to integrate custom maps into their projects.
Protomaps lets you change the look, style, and data displayed on maps to fit the specific needs of each project. This includes the ability to add custom data, define unique display styles, and manage map interactivity.
What are PMTiles
The PMTiles (Protomaps Tiles) is a file format designed to store and distribute vector map data. They are an efficient way to store information compactly and optimized for online distribution. The files are structured in such a way as to allow rapid and interactive viewing of the maps, dividing the data intotiles” (tiles) of predefined dimensions.
The various ones tile contain vector data georeferenced: it is thus possible to load only the necessary portions of the map when a user views or explores a certain area, reducing the overall amount of data to download and improving performance overall.
What is the connection between Protomaps and OpenStreetMap
Protomaps and OpenStreetMap are separate entities, but there is a significant connection between the two platforms. Protomaps can in fact use OpenStreetMap data to create and visualize custom maps.
Developers who choose to use Protomaps can leverage OpenStreetMap data as the basis for creating their own maps: street information, points of interest, administrative boundaries and much more. Access to the information shared by OpenStreetMap is via API and the data can be immediately used to integrate Protomaps maps.
A world map on their servers
We said that the technology behind the operation by Protomaps is really smart. Thus, any user can have a world map that can be distributed on cloud storage as a single static file in PMTiles format. Sorry if it’s not much. Furthermore, the portions of the map that are of interest to users from time to time can be provided using simple HTTP requests.
Take a look at the Protomaps daily builds page: the most updated map of the entire world weighs, overall, just under 110 GB. This is certainly a demanding size but not even so disproportionate if you consider that that single file contains the geographical information of the entire planet Earth, with an enviable level of detail.
Create a lightweight PMTiles file for the area of interest
Protomaps provides the PMTiles program which allows you to generate a map relating togeographical area of your own interest. To extract the coordinate to pass to the PMTiles application, you can use for example bbox finder. By drawing a rectangle in correspondence with the area you want to use, the coordinates of the two ends of the rectangle drawn on the map are obtained in the address bar.
From the download page, you can download PMTitles in versions for Windows, Linux and macOS, for x86 and ARM platforms. The following command generates a PMTitles file of the passed area using the coordinates extracted from bbox finder:
pmtiles extract https://build.protomaps.com/20231101.pmtiles mappa.pmtiles --bbox=9.613037,42.293564,12.524414,44.512176
In the example, the is used as the basis map file of the world published on November 1, 2023 in order to generate a PMTiles file containing the geographical data of the Tuscany region and surrounding areas. The entire procedure takes a few minutes, including downloading the resulting PMTiles file (approximately 350 MB for the indicated area). The generated file is called mappa.pmtiles.
By default, the PMTiles map works from level 5 up to level 1 (the lowest level). This means that the map thus generated can be enlarged up to street level. Suffice it to say that the world map blocked at level 5 (the general and less detailed one) weighs just 16 MB (note the use of the --maxzoom=5):
pmtiles extract https://build.protomaps.com/20231101.pmtiles mondo.pmtiles --maxzoom=5
How to explore the generated map
Protomaps also integrates a Web application useful for exploring the generated map and verifying its functioning. The PMTiles file can be uploaded to a cloud server, hosted on a storage S3 either compatible or, again, loaded manually. To give it a try, just visit PMTiles Viewer, indicate a remote url or a local file.
By clicking on the tab Metadatait is possible to verify the area covered by the PMTile refers exactly to the area identified through bbox finder.
Simon Willison, in the post entitled Serving a custom vector web map using PMTiles and maplibre-glexplains how to create a web page containing the interactive version of the Protomaps map.
The developer used Quickly come bundler without a specific framework e MapLibre GLa JavaScript library for displaying interactive maps, itself based on mapbox-gl-js. MapLibre GL offers a wide range of tools for viewing custom maps, supporting features such as zooming, custom map styling, adding markers, managing user interactions, and much more. Using npmyou can install MapLibre GL, PMTiles, various dependencies and default styles for Protomaps maps.
Il codice JavaScript first import the necessary code then set up a protocol handler pmtiles which allows MapLibre GL to load the PMTiles vector map format. We then move on to configuring an object myMap with the various configurations, you specify the container (container) in which to display the map, and you define sources and styles for the map using PMTiles and themes provided by Protomaps. Finally, the maximum limit of the map is set, the zoom is adjusted and the area defined in the PMTiles file is displayed.
