Example
Here are simples example for Leaflet and OpenLayers. To try it out, simply save the file in the typo3 webroot and open it in the browser. (The endpoint "/tile-proxy" must of course be defined).
OpenLayers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quick Start - OpenLayer</title>
<script src="https://cdn.jsdelivr.net/npm/ol@v7.2.2/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.2.2/ol.css">
<style>
html,
body {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
let osmSource = new ol.source.XYZ({
attributions: '© ' +
'<a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> ' +
'contributors.',
crossOrigin: 'anonymous',
urls: [
'/tile-proxy/?provider=osm&z={z}&x={x}&y={y}&s=a',
'/tile-proxy/?provider=osm&z={z}&x={x}&y={y}&s=b',
'/tile-proxy/?provider=osm&z={z}&x={x}&y={y}&s=c',
]
});
let extent = ol.proj.transformExtent([11.86, 51.41, 12.07, 51.55], 'EPSG:4326', 'EPSG:3857')
let center = ol.proj.fromLonLat([11.940057754516602, 51.4974250793457]);
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: osmSource
})
],
target: 'map',
view: new ol.View({
center: center,
zoom: 12,
minZoom: 14
})
});
</script>
</body>
</html>
Copied!
Leaflet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quick Start - Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<style>
html,
body {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
let markerLocation = [51.4974250793457, 11.940057754516602];
const map = L.map('map').setView(markerLocation, 13);
let southWest = L.latLng(51.41, 11.86),
northEast = L.latLng(51.55, 12.07),
bounds = L.latLngBounds(southWest, northEast);
map.setMaxBounds(bounds);
const tiles = L.tileLayer('/tile-proxy/?provider=osm&z={z}&x={x}&y={y}&s={s}', {
minZoom: 13,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
const marker = L.marker(markerLocation).addTo(map)
.bindPopup('<b>Hello world!</b><br />I am a popup.').openPopup();
</script>
</body>
</html>
Copied!