OpenLayers

OpenLayers is a full-featured web mapping library popular in enterprise and GIS applications. It uses raster tiles from MapRiot (5 units per tile).

More examples: See the mapriot/map-examples repo for full working projects across web and native platforms.

Quick start (CDN)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>MapRiot — OpenLayers</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol/ol.css" />
  <script src="https://cdn.jsdelivr.net/npm/ol/dist/ol.js"></script>
  <style>
    body { margin: 0; }
    #map { width: 100%; height: 100dvh; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    const map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.XYZ({
            url: 'https://api.mapriot.com/styles/outdoor/raster/{z}/{x}/{y}?apiKey=YOUR_API_KEY',
            attributions:
              '<a href="https://mapriot.com/copyright" target="_blank">&copy; MapRiot.com</a> ' +
              '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
          }),
        }),
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([14.42, 50.08]),
        zoom: 13,
      }),
    });
  </script>
</body>
</html>

npm / bundler

npm install ol

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { fromLonLat } from 'ol/proj';
import 'ol/ol.css';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new XYZ({
        url: 'https://api.mapriot.com/styles/outdoor/raster/{z}/{x}/{y}?apiKey=YOUR_API_KEY',
        attributions:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors | ' +
          '&copy; <a href="https://mapriot.com">MapRiot</a>',
      }),
    }),
  ],
  view: new View({
    center: fromLonLat([14.42, 50.08]),
    zoom: 13,
  }),
});

Notes

OpenLayers uses raster tiles — it cannot render the vector outdoor style directly
For vector rendering, interactivity, and 3D terrain use MapLibre GL JS instead
Raster tiles are composited server-side and cost 5 units per tile