Custom Tile

Load tiles from different providers or your own tile server.

Pass a raster tile URL template to rasterUrl to load tiles from a different provider or your own tile server. Use darkRasterUrl to provide different tiles for dark mode.

import { Map, MapTileLayer } from "@/components/ui/map"
import type { LatLngExpression } from "leaflet"

export function MapWithCustomTiles() {
    const TORONTO_COORDINATES = [43.6532, -79.3832] satisfies LatLngExpression

    return (
        <Map center={TORONTO_COORDINATES} zoom={2}>
            <MapTileLayer
                rasterUrl="https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}"
                rasterAttribution="Tiles &copy; Esri &mdash; National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC"
            />
        </Map>
    )
}

Vector Tiles

Pass a MapLibre style URL to vectorStyleUrl to render vector tiles. Vector tiles require WebGL, so you can also pass a rasterUrl to use as a fallback on devices without WebGL support.

import { Map, MapTileLayer } from "@/components/ui/map"
import type { LatLngExpression } from "leaflet"

export function MapWithCustomVectorTiles() {
    const TORONTO_COORDINATES = [43.6532, -79.3832] satisfies LatLngExpression

    return (
        <Map center={TORONTO_COORDINATES} zoom={13}>
            <MapTileLayer
                vectorStyleUrl="https://tiles.openfreemap.org/styles/liberty"
                rasterUrl="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
                rasterAttribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            />
        </Map>
    )
}

Basic Map Marker

On This Page

Vector Tiles