Vulpine Maps для разработчиков

1. Iframe: проще всего

Двигайте карту в превью: код ниже обновляется сам.

Копировать

Параметры URL /embed

Управление из страницы (postMessage)

Копироватьconst frame = document.querySelector('iframe').contentWindow
frame.postMessage({ type: 'vmaps:flyTo', center: [30.3158, 59.9391], zoom: 15 }, '*')
frame.postMessage({ type: 'vmaps:setTheme', theme: 'dark' }, '*')
frame.postMessage({ type: 'vmaps:addMarker', lngLat: [30.3158, 59.9391], title: 'Эрмитаж' }, '*')
frame.postMessage({ type: 'vmaps:clearMarkers' }, '*')

// Карта сообщает о перемещениях и кликах
window.addEventListener('message', (e) => {
    if (e.data?.type === 'vmaps:click') console.log('клик', e.data.lngLat)
    if (e.data?.type === 'vmaps:moveend') console.log('центр', e.data.center, 'зум', e.data.zoom)
})

2. JS SDK

Обёртка над MapLibre GL JS: подключает стили, тему и 3D. Возвращает обычный maplibregl.Map.

Копировать<div id="map" style="height: 480px"></div>
<script src="https://map.vulpine.email/sdk.js"></script>
<script>
  VulpineMaps.createMap('map', {
    theme: 'auto',            // 'light' | 'dark' | 'auto'
    lang: 'auto',             // 'ru' | 'en' | 'auto' (по языку браузера)
    center: [37.6175, 55.752], // [долгота, широта]
    zoom: 15,
    pitch: 55,
  }).then(function (map) {
    VulpineMaps.addMarker(map, [37.6175, 55.752], { popup: 'Красная площадь' })
    // map.setTheme('dark')
  })
</script>

Как ES-модуль

Копировать<script type="module">
  import { createMap, addMarker, maplibregl } from 'https://map.vulpine.email/sdk.mjs'

  const map = createMap('map', { theme: 'dark', center: [30.3158, 59.9391], zoom: 14 })
  addMarker(map, [30.3158, 59.9391], { popup: 'Эрмитаж' })
</script>

3. Свой MapLibre: стили

Если MapLibre у вас уже подключён (веб, React, Vue), достаточно URL стиля.

Копироватьimport maplibregl from 'maplibre-gl'
import 'maplibre-gl/dist/maplibre-gl.css'

const map = new maplibregl.Map({
  container: 'map',
  style: 'https://map.vulpine.email/styles/light.json',
  center: [37.6175, 55.752],
  zoom: 14,
})
// Смена темы без перезагрузки
map.setStyle('https://map.vulpine.email/styles/dark.json', { diff: true })
// Объёмный рельеф
map.setTerrain({ source: 'dem', exaggeration: 1.4 })

4. Мобильные приложения

Стили совместимы с MapLibre Native: Android, iOS, Flutter, React Native. Глобус и небо поддерживаются не во всех версиях Native; без них карта всё равно работает.

Android (Kotlin)

Копировать// build.gradle: implementation("org.maplibre.gl:android-sdk:<версия>")
mapView.getMapAsync { map ->
    map.setStyle("https://map.vulpine.email/styles/light.json")
    map.cameraPosition = CameraPosition.Builder()
        .target(LatLng(55.752, 37.6175)).zoom(14.0).tilt(45.0).build()
}

iOS (Swift)

Копироватьimport MapLibre

let mapView = MLNMapView(frame: view.bounds,
    styleURL: URL(string: "https://map.vulpine.email/styles/dark.json"))
mapView.setCenter(CLLocationCoordinate2D(latitude: 55.752, longitude: 37.6175),
                  zoomLevel: 14, animated: false)
view.addSubview(mapView)

Flutter / React Native

Копировать// Flutter (maplibre_gl)
MapLibreMap(styleString: 'https://map.vulpine.email/styles/light.json', initialCameraPosition: ...)

// React Native (@maplibre/maplibre-react-native)
<MapView mapStyle="https://map.vulpine.email/styles/light.json" />

Для WebView проще всего iframe-страница: https://map.vulpine.email/embed?lat=55.752&lon=37.6175&z=14.

5. Прямой доступ к данным

Тайлы и стили отдаются с CORS *. Поиск ограничен 5 запросами в секунду с одного IP.

Данные и лицензии

Всё построено на открытых данных и открытом ПО. При встраивании оставляйте атрибуцию на карте: iframe и SDK показывают её сами.