Dash Leaflet Example for Creating Maps for Video Games

Just wanted to share this quick project I created, I’ve seen many users create maps of the world with dash leaflet but I haven’t seen many people create other types of maps with the component. For this use case, I decided to use dash leaflet to map the largest MMORPG, Runescape to show its possible:
You can check out the demo: Dash Leaflet Map of Old Scool Runescape

the code I used to build the map:

from dash import *
import dash_leaflet as dl

layout = html.Div(
    [
        dcc.Store(id='osrs_map_store', storage_type='session', data=0),
        dl.Map(center=[-79, -137], zoom=7, children=[
            dl.TileLayer(id='osrs_tile_layer', url='https://raw.githubusercontent.com/Explv/osrs_map_tiles/master/0/{z}/{x}/{y}.png', minZoom=4, maxZoom=11, tms=True),
            dl.TileLayer(id='osrs_tile_layer_second',
                         url='https://raw.githubusercontent.com/Explv/osrs_map_tiles/master/0/{z}/{x}/{y}.png',
                         minZoom=4, maxZoom=11, tms=True, opacity=0.2),

            dl.EasyButton(
                            icon="fa-search",
                            title="Search OSRS Map",
                            id="search_osrs_map_display_btn",
                            n_clicks=1,
                        ),
            dl.EasyButton(
                            icon="fa-arrow-circle-up",
                            title="Up a Layer",
                            id="osrs_up_btn",
                            n_clicks=1,
            ),
            dl.EasyButton(
                            icon="fa fa-arrow-circle-down",
                            title="Down a Layer",
                            id="osrs_down_btn",
                            n_clicks=1,
            ),

        ], id='osrs_map', style={'width': '100%', 'height': '95vh'})
    ]
)

@callback(
    Output('osrs_tile_layer', 'url'),
    Output('osrs_map_store', 'data'),
    Input('osrs_up_btn', 'n_clicks'),
    Input('osrs_down_btn', 'n_clicks'),
    State('osrs_map_store', 'data')
)
def update_osrs_map(n_clicks_up, n_clicks_down, map_store):
    ctx = callback_context
    if not ctx.triggered:
        return 'https://raw.githubusercontent.com/Explv/osrs_map_tiles/master/0/{z}/{x}/{y}.png', no_update
    else:
        button_id = ctx.triggered[0]['prop_id'].split('.')[0]
        if button_id == 'osrs_up_btn' and map_store < 3:
            map_store += 1
        elif button_id == 'osrs_down_btn' and map_store > 0:
            map_store -= 1
        z = '{z}'
        x = '{x}'
        y = '{y}'
        return f'https://raw.githubusercontent.com/Explv/osrs_map_tiles/master/{map_store}/{z}/{x}/{y}.png', map_store
1 Like

You cut off the wilderness…

So much shame on you!

Anyways, looks really cool.

1 Like

Looks amazing. One can do so much with Dash Leaflet.