.q2w-basemap

Basemap

Production-ready basemap picker with real tile previews, source labels, and a live stage that changes when users switch styles.

Preview

Basemap

Southeast Asia preview

OSM Streets

Source: OpenStreetMap

Usage

<div class="q2w-basemap-panel">
  <div class="q2w-basemap-panel__head">
    <div>
      <div class="q2w-basemap-panel__title">Basemap</div>
      <div class="q2w-basemap-panel__sub">Southeast Asia preview</div>
    </div>
    <span class="q2w-basemap-panel__active">OSM Streets</span>
  </div>
  <div class="q2w-basemap-grid q2w-basemap-grid--tiles">
    <button class="q2w-basemap q2w-basemap--preview q2w-basemap--active">
      <div class="q2w-basemap__thumb q2w-bm-osm"></div>
      <div class="q2w-basemap__meta">...</div>
    </button>
  </div>
</div>

Free tile sources used in this demo

Style	URL template
OSM Streets	`https://tile.openstreetmap.org/{z}/{x}/{y}.png`
Carto Light	`https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png`
Esri Terrain	`https://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x}`
Esri Imagery	`https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}`

← Measure Compass →