Пример использования сервера плиток

Использование сервера плиток от OpenProvinceMap на примере JavaScript библиотеки Leaflet

Создаем файл map.html и вставляем в него следующий код: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Заголовок страницы -->
        <title>OpenProvinceMap – Карта MTA Province</title>
        
        <!-- Импорт необходимых стилей -->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css">
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            #map{
                width:100%;
                height: 100%;
                position:absolute
            }
        </style>
        
        <!-- Импорт необходимых библиотек -->
        <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
    </head>
    <body>
        <!-- Контейнер с картой -->
        <div id="map"></div>
        <script>
            // Перечисляем список используемых плиток(тайлов)
            // Стандартный стиль
            var Standart = L.tileLayer('https://{s}.fantastic-game.ru/tileserver.php?/map/{z}/{x}/{y}.png', {
                                subdomains: ['tiles'],
                                // Указание аттрибуции (c) OpenProvinceMap в соответствии с Условиями использования
                                // после | указывается ссылка на Условия использования
                                attribution: '© <a href="https://fantastic-game.ru/openprovincemap/map.html">OpenProvinceMap</a> | <a href="https://fantastic-game.ru/blog/?page_id=105">Условия использования</a>',
                                maxZoom: 18, // максимальный зум
                            });
                            
            // Светлый стиль
            var Bright = L.tileLayer('https://{s}.fantastic-game.ru/vip/?tileset=bright&z={z}&x={x}&y={y}', {
                                subdomains: ['tiles'],
                                // Указание аттрибуции (c) OpenProvinceMap в соответствии с Условиями использования
                                // и ссылки на Условия использования.
                                // Указание даты актуальности данных OpenProvinceMap
                                // (дата указывается при необходимости)
                                //
                                // Если используются тайлы, созданные с использованием данных OpenProvinceMap,
                                // но не принадлежащие OpenProvinceMap, в аттрибуции указывается:
                                // (c) [Автор тайлов] | (c) Данные OpenProvinceMap, (дата при необходимости)
                                attribution: '© <a href="https://fantastic-game.ru/openprovincemap/map.html">OpenProvinceMap</a> | <a href="https://fantastic-game.ru/blog/?page_id=105">Условия использования</a> | Данные: 2021',
                                maxZoom: 18,
                            });
                            
            // Тайлы из файла radar_t.jpg
            var JST = L.tileLayer('https://tiles.fantastic-game.ru/province/{z}/{x}/{y}.png', {
                                // Указание аттрибуции (c) JSt Project
                                // т.к. тайлы созданы на основе файла radar_t.jpg
                                // 
                                // Указание аттрибуции (c) OpenProvinceMap в соответствии с Условиями использования
                                // как провайдера тайлов
                                attribution: '© JSt Project | © <a href="https://fantastic-game.ru/openprovincemap/map.html">OpenProvinceMap</a> | <a href="https://fantastic-game.ru/blog/?page_id=105">Условия использования</a> ',
                                maxZoom: 18,
                                minZoom: 11, // минимальный зум
                            });
            // Координаты центра карты
            var coords = [[72.14, 1.39], 14];
            
            // Создание карты
            var map = L.map('map', {
                                        minZoom: 8,             // минимальный зум карты
                                        maxZoom: 18,            // максимальный зум карты
                                        layers: [Standart],        // слой(стиль) по-умолчанию
                                    });
            
            // Установка позиции карты на наших координатах
            map.setView(coords[0], coords[1]);
            
            // Добавление кнопки выбора стиля
            var layers = {"Стандартный": Standart, "MTA Province Demo": JST, "Светлый": Bright};
            L.control.layers(layers).addTo(map);
        </script>
    </body>
</html>

Результат:

Просмотры: 122