Tuiles vectorielles (bêta)

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.

Avec les tuiles vectorielles, votre navigateur dessine la carte à partir des données cartographiques et du style fourni. Le zoom est fluide et les étiquettes et les lignes restent nettes, y compris sur les écrans haute résolution.

Comme pour nos cartes raster, les données OpenStreetMap couvrent le monde entier et sont mises à jour en continu. Nous proposons les cartes avec notre style par défaut en couleur et un style en niveaux de gris.

Accès et coûts

L’utilisation des tuiles vectorielles en bêta est gratuite avec une offre payante active ou pendant votre essai gratuit de 14 jours. Les requêtes de tuiles vectorielles figurent dans vos statistiques de consommation, mais ne sont pas décomptées de votre quota mensuel de tuiles pendant la bêta.

Si vous avez besoin d’un accès après la fin de votre essai gratuit, contactez-nous.

Premiers pas

1. Créez un compte ou connectez-vous à votre compte existant.
2. Ouvrez l’onglet « Vector tiles » dans l’espace client en anglais et confirmez votre participation à la bêta.
3. Créez une clé API pour les tuiles vectorielles et indiquez les domaines de votre application web. Les tuiles vectorielles nécessitent une clé API distincte de vos clés existantes.
4. Copiez l’URL du style et utilisez-la dans votre application comme indiqué ci-dessous.

Utiliser les cartes avec MapLibre GL JS

Nous proposons des styles compatibles avec MapLibre GL JS. Utilisez l’une des URL de style suivantes en remplaçant your-api-key par votre clé API pour les tuiles vectorielles :

<!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>

Questions et retours

Vos retours sur la bêta nous intéressent. Contactez-nous si vous avez des questions ou rencontrez un problème. Pour un problème d’affichage de la carte, indiquez le lieu, le niveau de zoom et le navigateur, et joignez une capture d’écran si possible.