🗺️ Leaflet -> Custom Ai Tileset

[PipInstallPython]

Hey!

Lets start with a quick vibe check, could you please enlighten me on your preferred map?

Default Satellite Tileset:

or Custom Plotly.pro tileset:

Default Leaflet Tileset:

or Custom Plotly.pro Tileset

Okay - was this not enough vibes? lets combine multiple custom tileset layers, build out a remote control plane and design out a flight simulator to showcase the new tilesets:

---

How do I Connect a Tileset?

Visit Plotly.pro - Premium Python Dash Tutorials & Components

From this page, you’ll be able to view Public Tilesets published and if you click on the Explore World you’ll see the tileset map, Review tab, and if you click on the Stats tab you’ll see the amount of views a tileset has recieved and you’ll be given an easy link to use within your own leaflet software to easily connect the same tileset within your own dl.Tileset src

From that you have some clear instructions on how to set this up within a separate leaflet project, for example, if I wanted to create a fresh dash-leaflet application from scratch

Step 1: Create an Account on Plotly.pro

Step 2: Go to Plotly.pro - Premium Python Dash Tutorials & Components

Step 3: Find and Set Your API KEY

Step 4 (BEST Practices) : Create a .env file within your project PLOTLY_PRO_API_KEY= and paste the API KEY Generated within that .env file.

Step 5 - Connect to your Application of leaflet map directly, have a handful of starting points for reference within the tileset viewer page but this is a dash application limited working example:

Limited Working Example

"""
Custom Plotly Pro Tileset Demo

This page demonstrates using a custom tileset from Plotly Pro with API key authentication.
The tileset is authenticated using the API key as a URL query parameter.
"""
import os
import json
import dash
from dash import callback, Output, Input
import dash_mantine_components as dmc
import dash_leaflet as dl

dash.register_page(__name__, path="/custom-plotly-pro-tileset", name="Custom Plotly Pro Tileset")

# Load API key from environment
PLOTLY_PRO_API_KEY = os.getenv('PLOTLY_PRO_API_KEY', 'your_api_key_here')

# Tileset configuration
TILESET_SLUG = "calhoun-county"
TILESET_BASE_URL = f"https://plotly.pro/api/tiles/{TILESET_SLUG}"

# Build authenticated tile URL with API key as query parameter
# Note: For production use with plotly.pro, use https://plotly.pro/api/tiles/{slug}/{z}/{x}/{y}.png
tile_url = f"{TILESET_BASE_URL}/{{z}}/{{x}}/{{y}}.png?api_key={PLOTLY_PRO_API_KEY}"

# Map center (Victoria, TX area - Calhoun County region)
MAP_CENTER = [28.6340, -96.6115]
MAP_ZOOM = 12

layout = dmc.Stack([
    dmc.Title("Custom Plotly Pro Tileset", order=1),
    dmc.Text(
        "Custom tileset from Plotly Pro with API key authentication. "
        "This example uses a locally hosted tileset server.",
        c="dimmed"
    ),

    # Configuration info
    dmc.Paper([
        dmc.Title("Configuration", order=4, mb="sm"),
        dmc.List([
            dmc.ListItem(f"Tileset: {TILESET_SLUG}"),
            dmc.ListItem(f"Center: {MAP_CENTER}"),
            dmc.ListItem(f"Zoom Level: {MAP_ZOOM}"),
            dmc.ListItem(f"API Key: {'✓ Loaded from .env' if PLOTLY_PRO_API_KEY != 'your_api_key_here' else '✗ Not configured'}"),
        ])
    ], shadow="sm", radius="md", p="md", withBorder=True, mb="md"),

    # Map with custom tileset
    dmc.Paper(
        dl.Map([
            dl.TileLayer(
                url=tile_url,
                attribution="Custom tileset from Plotly.pro",
                maxZoom=19
            ),
            # Add a marker at the center
            dl.Marker(
                position=MAP_CENTER,
                children=[
                    dl.Tooltip("Map Center (Victoria, TX area)")
                ],
                id="custom-tileset-marker"
            )
        ],
        center=MAP_CENTER,
        zoom=MAP_ZOOM,
        style={'height': '60vh'},
        id="custom-tileset-map"),
        shadow="sm",
        radius="md",
        withBorder=True,
        style={"overflow": "hidden"}
    ),

    # Map interaction data
    dmc.Paper([
        dmc.Title("Map Interaction", order=4, mb="sm"),
        dmc.Text("Click anywhere on the map to see coordinates", size="sm", c="dimmed", mb="md"),
        dmc.Box(id="custom-tileset-output")
    ], shadow="sm", radius="md", p="md", withBorder=True)
], gap="md")

@callback(
    Output("custom-tileset-output", "children"),
    Input("custom-tileset-map", "clickData"),
    Input("custom-tileset-map", "n_clicks")
)
def display_map_click(click_data, n_clicks):
    """Display map click data"""
    if not click_data:
        return dmc.Text("Click on the map to see coordinates", c="dimmed", fs="italic")

    return dmc.Stack([
        dmc.Code(
            json.dumps(click_data, indent=2),
            block=True
        ),
        dmc.Text(
            f"Total clicks: {n_clicks or 0}",
            size="sm",
            c="dimmed"
        )
    ], gap="xs")

---

How do I Create a Custom Tilesets?

1. Login to your Plotly.pro account
2. go to Plotly.pro - Premium Python Dash Tutorials & Components
3. First Time Creating a Tileset:
   
   

Fill out the information Tileset Name * , Description, City *, State/Country and Authors/Contributors set a visibility of public or private.

Important Be sure to Set Initial View, use the dash-leaflet map to zoom into where you’d like your tileset to start. then click the Set Initial View button to save that as the starting point

Click the Create Tileset Button when you are ready to finish creating a new tilset.

---

How to Generate tiles

1. The Edit / Change Tileset Tab -

2. Adjust leaflet map into a field of view to where you want to start generating tiles.

3. click on the Formula Tab
   

   

4. Scroll down to the Generation Prompt & Custom References accordion, adjust settings as needed.

5. Go back to the controls tab then the Edit / Change Tileset Tab and click the Generate Viewport Tiles when ready.

Then click the Generate Viewport Tiles you’ll start to see the bottom tabs populate with Approve, Regen or Skip buttons

You’ll see the referenced generation and on Approval the tileset will be saved, on regen the tileset will re-create the tileset based on whats selected and the prompt within the formula tab and the skip button will skip over the tileset entirely.

---

Wrapping Up

That’s the basics of creating, connecting, and generating custom tilesets on Plotly.pro! Whether you’re building flight simulators, location-based dashboards, or just want a unique aesthetic for your mapping projects — custom tilesets open up a ton of creative possibilities.

Quick Recap:

• Browse public tilesets at plotly.pro/map/worlds
• Connect any tileset to your dash-leaflet app with your API key
• Create your own tilesets with AI-assisted tile generation
• Mix and match multiple tileset layers for rich, layered maps

---

Get Involved

This is still evolving and I’d love to hear what you build with it! Got ideas for improvements? Run into any issues? Want to share your custom tilesets?

Join the conversation:

• Discord: discord.gg/uwQ2f3KCad — come hang out, ask questions, share your projects
• GitHub: github.com/pip-install-python — check out my open-source Dash components and other projects

Drop a comment below if you have questions or want to show off what you’ve created. Happy mapping!