Map of Tunisia with Leaflet and TMaps raster tiles

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/leaflet@1.9.4/dist/leaflet.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>

<div id="map"></div>
<div class="panel">
  <b>Leaflet + TMaps raster tiles</b><br>
  Medina of Tunis. <a href="https://www.tmaps.tn/en/cartes" target="_blank">TMaps maps</a>
</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; }

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 map = L.map('map').setView([36.7985, 10.1700], 15); // Medina of Tunis

L.tileLayer(`https://tiles.tmaps.tn/r-tile/{z}/{x}/{y}?api_key=${API_KEY}`, {
  maxZoom: 18,
  attribution: '&copy; <a href="https://www.tmaps.tn">TMaps</a>',
}).addTo(map);

L.marker([36.7976, 10.1712])
  .addTo(map)
  .bindPopup('<b>Zitouna Mosque</b><br>Medina of Tunis')
  .openPopup();