TfgMap + protomaps

July 28Jul 28

Просто оставлю это здесь, мало ли, вдруг добавите поддержку в FGX, потому что выглядит вполне себе перспективно, а главное подключается чрезвычайно просто (но что там у неё под капотом, я без понятия, предупреждаю сразу). Возможно, все уже в курсе и один я опять отстал от жизни, но на всякий случай — теперь карту, оказывается, можно хостить одним файлом:

Ну, т.е. буквально в корне сайта только индексный файл + сама карта — и больше ничего.

Карта векторная, поддерживает всякие навороты (я пока подключил обе темы, светлую и тёмную, но вроде как можно кастомизировать и POI, и UI), у себя развернул так:

https://protomaps.com

1️⃣ wget https://github.com/protomaps/go-pmtiles/releases/download/v1.31.2/go-pmtiles_1.31.2_Linux_x86_64.tar.gz

2️⃣ tar -xzf go-pmtiles_1.31.2_Linux_x86_64.tar.gz

3️⃣ wget -O kazakhstan.geojson https://raw.githubusercontent.com/glynnbird/countriesgeojson/master/kazakhstan.geojson

4️⃣ ./pmtiles extract https://build.protomaps.com/20260726.pmtiles kazakhstan.pmtiles --region=kazakhstan.geojson

Все версии/даты/названия, разумеется, актуальны на сегодня-завтра, поэтому их лучше брать в первоисточнике:

✅ Загрузчик: https://github.com/protomaps/PMTiles

✅ Карты: https://maps.protomaps.com/builds

Пример рабочего индексного файла:

<!DOCTYPE html>
<html lang="ru">

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Карта Казахстана</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@latest/dist/maplibre-gl.css" />
	<style>
		:root {
			color-scheme: light dark;
		}

		*,
		*::before,
		*::after {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		html,
		body {
			width: 100%;
			height: 100%;
			overflow: hidden;
			background-color: light-dark(#fff, #000);
		}

		#map {
			position: fixed;
			inset: 0;
			width: 100%;
			height: 100dvh;
		}

		.maplibregl-canvas,
		.maplibregl-canvas-container,
		#map canvas {
			outline: none !important;
			border: none !important;
			box-shadow: none !important;
		}
	</style>
</head>

<body>
	<div id="map"></div>
	<script type="module">
		import {
			Map,
			NavigationControl,
			addProtocol
		} from 'https://cdn.jsdelivr.net/npm/maplibre-gl@latest/+esm';
		import {
			Protocol
		} from 'https://cdn.jsdelivr.net/npm/pmtiles@latest/+esm';
		import layers from 'https://cdn.jsdelivr.net/npm/protomaps-themes-base@latest/+esm';
		addProtocol('pmtiles', new Protocol().tile);
		const createMapStyle = (themeName) => ({
			version: 8,
			glyphs: 'https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf',
			sprite: `https://protomaps.github.io/basemaps-assets/sprites/v4/${themeName}`,
			sources: {
				'kazakhstan_source': {
					type: 'vector',
					url: 'pmtiles://kazakhstan.pmtiles'
				}
			},
			layers: layers('kazakhstan_source', themeName)
		});
		const themeQuery = window.matchMedia('(prefers-color-scheme: dark)');
		const getCurrentTheme = () => themeQuery.matches ? 'dark' : 'light';
		const map = new Map({
			container: 'map',
			style: createMapStyle(getCurrentTheme()),
			center: [71.430411, 51.128201],
			zoom: 12
		});
		map.addControl(new NavigationControl());
		themeQuery.addEventListener('change', (e) => {
			const newTheme = e.matches ? 'dark' : 'light';
			map.setStyle(createMapStyle(newTheme));
		});
	</script>
</body>

</html>

Если открыть эту карту на 1080p в 100%, то объём сетевого трафика составит ~300 kB:

В целом всё выглядит и работает как самая обычная карта:

Возможно, кому-нибудь пригодится, если вдруг потребуется хостить у себя и никому не платить за доступ к карте.

Edited July 28Jul 28 by gorodoro

TfgMap + protomaps

Featured Replies

Create an account or sign in to comment

Similar Content

Recently Browsing 0

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)