EN · DE · FR
  • Produits
  • Tarifs
  • Documentation
  • Se connecter Essayer gratuitement

Aide

Ajouter des tuiles à une application web

  • Applications web
  • Applications de bureau
  • Tuiles vectorielles
  • API
  • Impression de cartes
  • FAQ

Ajouter des tuiles à une application web

Vous pouvez utiliser le service sous forme de tuiles ou d’une image unique.

URL du service cartographique
https://maps.omniscale.net/v2/your-api-key/style.default/map
URL du service cartographique en niveaux de gris
https://maps.omniscale.net/v2/your-api-key/style.grayscale/map
URL du style plein air
https://maps.omniscale.net/v2/your-api-key/style.outdoor/map

Exemples avec Leaflet

Leaflet Voir la démonstration 
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script type='text/javascript'>
      function initMap() {
        const host = 'https://maps.omniscale.net/v2/{id}/style.default/{z}/{x}/{y}.png';

        const attribution = '&copy; 2026 &middot; <a href="https://maps.omniscale.com/">Omniscale</a> ' +
            '&middot; Map data: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap (Lizenz: ODbL)</a>';

        let map = L.map('map').setView([53.14, 8.22], 13);
          L.tileLayer(host, {
            id: 'your-api-key',
            attribution: attribution
          }).addTo(map);
        map.attributionControl.setPrefix(false);
      }
    </script>
  </head>
  <body onload='initMap()'>
    <div id='map' style='height: 400px; width: 400px;'></div>
  </body>
</html>
Leaflet avec une carte en niveaux de gris Voir la démonstration 
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script type='text/javascript'>
      function initMap() {
        const host = 'https://maps.omniscale.net/v2/{id}/style.grayscale/{z}/{x}/{y}.png';

        const attribution = '&copy; 2026 &middot; <a href="https://maps.omniscale.com/">Omniscale</a> ' +
            '&middot; Map data: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap  (Lizenz: ODbL)</a>';

        let map = L.map('map').setView([53.14, 8.22], 13);
          L.tileLayer(host, {
            id: 'your-api-key',
            attribution: attribution
          }).addTo(map);

        map.attributionControl.setPrefix(false);
      }
    </script>
  </head>
  <body onload='initMap()'>
    <div id='map' style='height: 400px; width: 400px;'></div>
  </body>
</html>
Leaflet avec des tuiles haute résolution/Retina Voir la démonstration 
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script type='text/javascript'>
      function initMap() {
        const host = 'https://maps.omniscale.net/v2/{id}/style.default/{z}/{x}/{y}.png?hq={hq}';

        const attribution = '&copy; 2026 &middot; <a href="https://maps.omniscale.com/">Omniscale</a> ' +
            '&middot; Map data: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap  (Lizenz: ODbL)</a>';

        let map = L.map('map').setView([53.14, 8.22], 13);
          L.tileLayer(host, {
            id: 'your-api-key',
            hq: L.Browser.retina,
            attribution: attribution
          }).addTo(map);
        map.attributionControl.setPrefix(false);
      }
    </script>
  </head>
  <body onload='initMap()'>
    <div id='map' style='height: 400px; width: 400px;'></div>
  </body>
</html>

Exemples avec MapLibre

Vous pouvez déjà intégrer et tester nos cartes vectorielles dans votre application web avec MapLibre GL JS. Le service est actuellement en phase bêta. Consultez la page des tuiles vectorielles en bêta pour connaître les modalités d’accès, les styles disponibles et les limites de la bêta.

MapLibre avec des tuiles raster Voir la démonstration 
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.css" />
    <script type="module">
        import * as maplibregl from 'https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.mjs';
        
        const host = 'https://maps.omniscale.net/v2/your-api-key/style.default/{z}/{x}/{y}.png';

        const attribution = '&copy; 2026 &middot; <a href="https://maps.omniscale.com/">Omniscale</a> ' +
            '&middot; Map data: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap (Lizenz: ODbL)</a>';

        const map = new maplibregl.Map({
          container: 'map',
          center: [8.22, 53.14], // [lng, lat]
          zoom: 13,
          style: {
              version: 8,
              sources: {
                  omniscale: {
                      type: 'raster',
                      tiles: [host],
                      tileSize: 256,
                      attribution: attribution
                  }
              },
              layers: [
                  {
                      id: 'omniscale',
                      type: 'raster',
                      source: 'omniscale'
                  }
              ]
          }
      });
    
    </script>

  </head>
  <body>
    <div id='map' style='height: 400px; width: 400px;'></div>
  </body>
</html>
MapLibre avec des cartes vectorielles Voir la démonstration 
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.css" />
    <script type="module">
        import * as maplibregl from 'https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.mjs';
        
        const map = new maplibregl.Map({
            container: 'map',
            center: [8.22, 53.14],
            zoom: 13,
            style: 'https://maps.omniscale.net/v2/your-api-key/style.default/style.json'
        });
    
    </script>

  </head>
  <body>
    <div id='map' style='height: 400px; width: 400px;'></div>
  </body>
</html>

Exemples avec OpenLayers

OpenLayers avec la projection EPSG:3857 Voir la démonstration 
<!DOCTYPE html>
<html>
  <head>
    
    <script src="https://cdn.jsdelivr.net/npm/ol@v10.3.1/dist/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.3.1/ol.css">
         
    <script type='text/javascript'>
      function initMap() {
        const apiKey = 'your-api-key';

        const hq = ol.has.DEVICE_PIXEL_RATIO > 1;
        const tilePixelRatio = hq ? 2 : 1;
        let host = 'https://maps.omniscale.net/v2/' + apiKey + '/style.default/{z}/{x}/{y}.png';
        if (hq) {
          host += '?hq=true';
        }
  
        const attribution = '&copy; 2026 &middot; <a href="https://maps.omniscale.com/">Omniscale</a>'+
            '&middot; Map data: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap  (Lizenz: ODbL)</a>';

        const layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: host,
                attributions: attribution,
                tilePixelRatio: tilePixelRatio,
            }),
        });

        new ol.Map({
            target: 'map',
            layers: [layer],
            view: new ol.View({
                center: ol.proj.fromLonLat([8.22, 53.14]), 
                zoom: 13,
            }),
        });
      };
    </script>
  </head>
  <body onload='initMap()'>
    <div id='map' style='height: 400px; width: 400px;'></div>
  </body>
</html>
OpenLayers avec la projection EPSG:3857 et une carte en niveaux de gris Voir la démonstration 
<!DOCTYPE html>
<html>
  <head>
    
    <script src="https://cdn.jsdelivr.net/npm/ol@v10.3.1/dist/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.3.1/ol.css">
      
    <script type='text/javascript'>
      function initMap() {
        const apiKey = 'your-api-key';

        const hq = ol.has.DEVICE_PIXEL_RATIO > 1;
        const tilePixelRatio = hq ? 2 : 1;
        let host = 'https://maps.omniscale.net/v2/' + apiKey + '/style.grayscale/{z}/{x}/{y}.png';
        if (hq) {
          host += '?hq=true';
        }

        const attribution = '&copy; 2026 &middot; <a href="https://maps.omniscale.com/">Omniscale</a>'+
            '&middot; Map data: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap  (Lizenz: ODbL)</a>';

        const layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: host,
                attributions: attribution,
                tilePixelRatio: tilePixelRatio,
            }),
        });
        new ol.Map({
            target: 'map',
            layers: [layer],
            view: new ol.View({
                center: ol.proj.fromLonLat([8.22, 53.14]), 
                zoom: 13,
            }),
        });
      };
    </script>
  </head>
  <body onload='initMap()'>
    <div id='map' style='height: 400px; width: 400px;'></div>
  </body>
</html>
OpenLayers avec la projection UTM 32 (EPSG:25832) Voir la démonstration 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/proj4@2.15.0/dist/proj4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol@v10.3.1/dist/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.3.1/ol.css">
      
    <script type='text/javascript'>
      function initMap() {
        // Proj4js für die UTM-Projektion einrichten
        const projectionName = "EPSG:25832";
        proj4.defs(projectionName, "+proj=utm +zone=32 +datum=WGS84 +units=m +no_defs");
        ol.proj.proj4.register(proj4);

        const apiKey = 'your-api-key';
        const host = 'https://maps.omniscale.net/v2/' + apiKey + '/style.default/map';

        const attribution = '&copy; 2026 &middot; <a href="https://maps.omniscale.com/">Omniscale</a>'+
            '&middot; Map data: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap  (Lizenz: ODbL)</a>';

        const layer = new ol.layer.Image({
            source: new ol.source.ImageWMS({
                url: host,
                params: {
                  'SRS': 'EPSG:25832',
                  'LAYERS': 'osm',
                  'hq': true,
                },
                ratio: 1,
                projection: 'EPSG:25832',
            }),
        });
        new ol.Map({
            target: 'map',
            layers: [layer],
            view: new ol.View({
                center: ol.proj.transform([8.22, 53.15], 'EPSG:4326', projectionName),
                zoom: 13,
                projection: projectionName,
                extent: ol.proj.transformExtent([4, 46, 16, 56], 'EPSG:4326', projectionName)
            }),
        });
      };
    </script>
  </head>
  <body onload='initMap()'>
    <div id='map' style='height: 400px; width: 400px;'></div>
  </body>
</html>
OpenLayers avec la projection UTM 32 (EPSG:25832) en WMS tuilé Voir la démonstration 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/proj4@2.15.0/dist/proj4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol@v10.3.1/dist/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.3.1/ol.css">
      
    <script type='text/javascript'>
      function initMap() {
        // Proj4js für die UTM-Projektion einrichten
        const projectionName = "EPSG:25832";
        proj4.defs(projectionName, "+proj=utm +zone=32 +datum=WGS84 +units=m +no_defs");
        ol.proj.proj4.register(proj4);

        const apiKey = 'your-api-key';
        const host = 'https://maps.omniscale.net/v2/' + apiKey + '/style.default/map';

        const attribution = '&copy; 2026 &middot; <a href="https://maps.omniscale.com/">Omniscale</a>'+
            '&middot; Map data: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap  (Lizenz: ODbL)</a>';

        const layer = new ol.layer.Tile({
            source: new ol.source.TileWMS({
                url: host,
                params: {
                    'LAYERS': 'osm', 
                    'SRS': 'EPSG:25832',
                    'hq': true,
                },
                projection: 'EPSG:25832',
                attributions: attribution,
            }),
        });

        new ol.Map({
            target: 'map',
            layers: [layer],
            view: new ol.View({
                center: ol.proj.transform([8.22, 53.15], 'EPSG:4326', projectionName),
                zoom: 13,
                projection: projectionName,
                extent: ol.proj.transformExtent([4, 46, 16, 56], 'EPSG:4326', projectionName)
            }),
        });
      };
    </script>
  </head>
  <body onload='initMap()'>
    <div id='map' style='height: 400px; width: 400px;'></div>
  </body>
</html>
OpenLayers avec la projection WGS 84 (EPSG:4326) Voir la démonstration 
<!DOCTYPE html>
<html>
  <head>
    
    <script src="https://cdn.jsdelivr.net/npm/ol@v10.3.1/dist/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.3.1/ol.css">
         
    <script type='text/javascript'>
      function initMap() {

        const apiKey = 'your-api-key';
        const host = 'https://maps.omniscale.net/v2/' + apiKey + '/style.default/map';

        // WMS Layer ohne Tiled
        const layer = new ol.layer.Image({
            source: new ol.source.ImageWMS({
                url: host,
                params: {
                    'VERSION': '1.1.1',
                    'LAYERS': 'osm',
                },
                ratio: 1,
                projection: 'EPSG:4326',
            }),
        });

        new ol.Map({
            target: 'map',
            layers: [layer],
            view: new ol.View({
                center: [8.22, 53.14], 
                zoom: 13,
                projection: 'EPSG:4326', // Projektion der Karte
            }),
        });
      };
    </script>
  </head>
  <body onload='initMap()'>
    <div id='map' style='height: 400px; width: 400px;'></div>
  </body>
</html>

Aide et assistance

  • Créer un compte • Se connecter
  • Produits et fonctionnalités
  • Offres et tarifs
  • Carte interactive
  • Aide, Documentation & API
  • Projections disponibles

À propos

  • Mentions légales
  • Conditions générales
  • Politique de confidentialité

Coordonnées

Omniscale GmbH & Co. KG
Moltkestraße 6a
26122 Oldenburg
Allemagne
Accéder au formulaire de contact ↝

Copyright © 2026 • Omniscale, Données cartographiques : OpenStreetMap (licence : ODbL)

* Réservé aux clients professionnels. Nous ne concluons pas de contrats avec des consommateurs au sens de l’article 13 du Code civil allemand (BGB). Tous les prix sont indiqués hors taxes.