Карты

import maplibregl from 'maplibre-gl';

const baseUrl = 'https://promaps.online';
const lightKey = import.meta.env.VITE_PROMAPS_API_KEY;
const darkKey = import.meta.env.VITE_PROMAPS_API_KEY_DARK;
const isDark = false;
const apiKey = isDark ? darkKey || lightKey : lightKey;
const styleName = isDark ? 'dark-ru-pmtiles' : 'color-ru-pmtiles';

const map = new maplibregl.Map({
  container: 'map',
  style: `${baseUrl}/api/styles/${styleName}.json?key=${encodeURIComponent(apiKey)}`,
  center: [37.6176, 55.7558],
  zoom: 10,
  transformRequest: (url) => {
    if (url.startsWith(baseUrl) && !url.includes('key=')) {
      const separator = url.includes('?') ? '&' : '?';
      return { url: `${url}${separator}key=${encodeURIComponent(apiKey)}` };
    }

    return { url };
  }
});

<iframe
  src="https://promaps.online/embed?key=YOUR_API_KEY&center=[37.6176,55.7558]&zoom=10&style=color"
  width="100%"
  height="520"
  loading="lazy"
  style="border:0;border-radius:0;">
</iframe>

fetch('https://promaps.online/api/route', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'Bearer YOUR_ROUTING_KEY'
  },
  body: JSON.stringify({
    costing: 'driving',
    locations: [
      { lat: 42.9849, lon: 47.5047 },
      { lat: 42.9731, lon: 47.4910 }
    ],
    routeSession: {
      stopIds: ['delivery-1024']
    }
  })
}).then((response) => response.json());