Custom tilesets allow you to overlay your own map imagery or data on top of your map. For example, you can convert drone aerial imagery, floor plans, or scanned maps into a tileset and display it directly on your interactive map.
What’s the difference between custom map styles and custom tilesets?
Custom map styles are used to change the appearance of an existing basemap, such as adjusting colors, fonts, or showing/hiding specific map layers (roads, labels, etc.).
Custom tilesets, on the other hand, are used to add new visual layers to your map. They are typically used for smaller, focused areas such as campuses, buildings, parks, or event spaces, and are displayed on top of a basemap.
How to create a custom tileset?
To create a tileset, you first need to convert an image into map tiles. This process is called georeferencing.
You can use tools like QGIS to georeference your image and prepare it as a tileset. Once your tileset is ready, you can host it using services such as Mapbox or MapTiler, which will provide you with a tileset URL.
How to add a custom tileset to your map
In the Mapme editor, go to: Settings > Basemap > Custom Tilesets Then:
- Enter a name for your tileset
- Paste your tileset URL
- Select a base layer (if applicable)
You can add multiple tilesets and reorder them. The order determines how layers are stacked on top of each other in your map.
Tileset URL format
The tileset URL format depends on your hosting provider. Below are common examples:
Tilesets hosted with Mapbox
https://api.mapbox.com/v4/{tileset_id}/{z}/{x}/{y}.png?access_token={token}
Tilesets hosted with MapTiler
https://api.maptiler.com/tiles/{tileset_id}/{z}/{x}/{y}.pbf?key={token}
Where:
- {tileset_id} is the ID of your tileset
- {token} is your API access token
Base layer behavior
If you are using a custom map style as your base layer, you can control how your tilesets are layered.
By default, custom tilesets added in Mapme are displayed below the base layer.
Using a custom tileset without a basemap
In some cases, you may want to display only your custom tileset without a standard basemap. This is common for indoor maps, event maps, or floor plans. To do this, select the “Blank” basemap in the basemap settings.
You can also customize the background color of the map using custom CSS:
/* Change the map background color */
.maplibregl-canvas-container > canvas {
background: blue;
}