Map of Tunisia with OpenLayers and TMaps XYZ 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/ol@10.4.0/ol.css">
<script src="https://cdn.jsdelivr.net/npm/ol@10.4.0/dist/ol.js"></script>

<div id="map"></div>
<div class="panel">
  <b>OpenLayers + TMaps XYZ tiles</b><br>
  Move the map, then share this view:<br>
  <a id="share" target="_blank"></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; }
#share { word-break: break-all; font-family: ui-monospace, monospace; font-size: 12px; }

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 = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: `https://tiles.tmaps.tn/r-tile/{z}/{x}/{y}?api_key=${API_KEY}`,
        maxZoom: 18,
        attributions: '&copy; <a href="https://www.tmaps.tn">TMaps</a>',
      }),
    }),
  ],
  // OpenLayers works in Web Mercator: convert [lng, lat] with fromLonLat
  view: new ol.View({ center: ol.proj.fromLonLat([10.6369, 35.8256]), zoom: 13, maxZoom: 18 }), // Sousse
});

// Build a link to the live demo that reopens exactly this view (#zoom,lat,lng)
const share = document.getElementById('share');
map.on('moveend', () => {
  const view = map.getView();
  const [lng, lat] = ol.proj.toLonLat(view.getCenter());
  share.href = `https://examples.tmaps.tn/02-raster-openlayers/#${view.getZoom().toFixed(2)},${lat.toFixed(5)},${lng.toFixed(5)}`;
  share.textContent = share.href;
});