Vector map of Tunisia with MapLibre GL: 4 TMaps styles

TMaps example: maps and geocoding API for Tunisia. Replace YOUR_API_KEY with your key from https://app.tmaps.tn. More: https://www.tmaps.tn

by Tmaps

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@5.6.0/dist/maplibre-gl.css">
<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@5.6.0/dist/maplibre-gl.js"></script>

<div id="map"></div>
<div class="panel">
  <b>MapLibre GL + TMaps vector styles</b>
  <div id="styles"></div>
  <label><input type="checkbox" id="tilt"> 3D tilt</label>
</div>

CSS

html, body { height: 100%; margin: 0; font-family: system-ui, sans-serif; }
#map { position: absolute; inset: 0; }
.panel {
  position: absolute; z-index: 1000; top: 12px; left: 12px; max-width: 320px;
  background: #fff; border-radius: 8px; padding: 10px 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .2); font-size: 14px;
}
.panel a { color: #0b63f6; }
#styles { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
#styles button { border: 1px solid #ccd; background: #f6f7fb; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
#styles button[aria-pressed="true"] { background: #0b63f6; color: #fff; border-color: #0b63f6; }

JavaScript

// TMaps: maps and geocoding API for Tunisia. https://www.tmaps.tn
// 1. Create a free API key on https://app.tmaps.tn
// 2. Add fiddle.jshell.net to its authorized domains
// 3. Paste it below
const API_KEY = 'YOUR_API_KEY';

const STYLES = ['streets', 'dark', 'terrain', 'sunny'];
const styleUrl = (name) => `https://tiles.tmaps.tn/v-tile/${name}.json?api_key=${API_KEY}`;

const map = new maplibregl.Map({
  container: 'map',
  style: styleUrl('streets'),
  center: [10.1815, 36.8002], // Tunis, as [lng, lat]
  zoom: 12,
  maxZoom: 18,
});
map.addControl(new maplibregl.NavigationControl(), 'top-right');

// setStyle() swaps the style without recreating the map
const bar = document.getElementById('styles');
for (const name of STYLES) {
  const button = document.createElement('button');
  button.textContent = name;
  button.setAttribute('aria-pressed', name === 'streets');
  button.addEventListener('click', () => {
    map.setStyle(styleUrl(name));
    bar.querySelectorAll('button').forEach((b) => b.setAttribute('aria-pressed', b === button));
  });
  bar.append(button);
}

// Tilt over the Medina of Tunis
document.getElementById('tilt').addEventListener('change', (event) => {
  map.easeTo(event.target.checked
    ? { center: [10.179, 36.799], zoom: 15.5, pitch: 60, bearing: -25 }
    : { center: [10.1815, 36.8002], zoom: 12, pitch: 0, bearing: 0 });
});