Map of Tunisia with OpenLayers

TMaps raster tiles in OpenLayers with an XYZ source. The current view (zoom, latitude, longitude) is kept in the URL, so you can share a link to the exact same place.

Current view

#12,36.800200,10.181500

How it works

An ol.source.XYZ source loads the TMaps tiles from https://tiles.tmaps.tn/r-tile/{z}/{x}/{y}?api_key=….
The view is created with ol.proj.fromLonLat, because OpenLayers uses Web Mercator (EPSG:3857) by default.
On every moveend, the page writes #zoom,lat,lng in the URL with history.replaceState, and reads it back on load.

The code

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=YOUR_API_KEY',
      maxZoom: 18,
    }),
  })],
  view: new ol.View({ center: ol.proj.fromLonLat([10.1815, 36.8002]), zoom: 12 }),
});

Raster tiles docs · Source on GitHub