Задать вопрос
@serNevajno
openstreetmap

Как на карте mapbox gl сделать стиль карты как стандартый на openstreetmap?

Здравствуйте, ув. сообщество. Подскажите, пожалуйста, как на карте mapbox gl сделать стиль карты как стандартый на openstreetmap?
Так на mapbox gl:
5d78f9383c6f7923477777.jpeg
Надо:
5d78f9754525f254331213.jpeg
Код:
<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title>Locate the user</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.css' rel='stylesheet' />
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>

<div id='map'></div>
<script>
  mapboxgl.accessToken = 'pk.eyJ1IjoicnRrbWFwIiwiYSI6ImNqejJvbjloczA0dGczZG1uamRxNHNrM24ifQ.oJBnsuU9ILbPW7Ehz2cyPA';
  var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-96, 37.8], // starting position
    zoom: 3 // starting zoom
  });

  // Add geolocate control to the map.
  map.addControl(new mapboxgl.GeolocateControl({
    positionOptions: {
      enableHighAccuracy: true
    },
    trackUserLocation: true
  }));
</script>

</body>
</html>
  • Вопрос задан
  • 1560 просмотров
Комментировать
Подписаться 2 Простой Комментировать
Решения вопроса 1
freeExec
@freeExec
Участник OpenStreetMap
Не использовать стиль mapbox, а подключить напрямую те же тайлы, что и на osm.org, с соответствующими условиями.
var map = new mapboxgl.Map({
container: 'map', // container id
style: {
"version": 8,
"sources": {
"raster-tiles": {
"type": "raster",
"tiles": ["https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"],
"tileSize": 256,
"attribution": 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
}
},
"layers": [{
"id": "simple-tiles",
"type": "raster",
"source": "raster-tiles",
"minzoom": 0,
"maxzoom": 22
}]
},
center: [-74.50, 40], // starting position
zoom: 2 // starting zoom
});

Возможно {s} в адресе на сработает, надо экспериментировать, но как-то так.
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 1
@EmelyanovKonstantin
GIS архитектура, аналитика, разработка
Поменять стиль. Вот так:
<html>
<head>
  <meta charset='utf-8' />
  <title>Locate the user</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.css' rel='stylesheet' />
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>

<div id='map'></div>
<script>
  mapboxgl.accessToken = 'pk.eyJ1IjoicnRrbWFwIiwiYSI6ImNqejJvbjloczA0dGczZG1uamRxNHNrM24ifQ.oJBnsuU9ILbPW7Ehz2cyPA';
  var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'https://maputnik.github.io/osm-liberty/style.json',
    center: [-96, 37.8], // starting position
    zoom: 3 // starting zoom
  });

  // Add geolocate control to the map.
  map.addControl(new mapboxgl.GeolocateControl({
    positionOptions: {
      enableHighAccuracy: true
    },
    trackUserLocation: true
  }));
</script>

</body>
</html>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Менеджер по маркетингу
Finandy
от 2 500 $
Fullstack-разработчик (Vue 3, TypeScript, Firebase)
Onemoney
от 180 000 до 180 000 ₽
Devops (Персона)
Сбер • Москва
от 230 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Исправить ошибки в консольном интерфейсе с применением C# и NET
28 дек. 2024, в 22:21
500 руб./за проект
Сделать бота
28 дек. 2024, в 21:56
25000 руб./за проект
Доработка Битрикс
28 дек. 2024, в 18:50
1200 руб./в час
Ещё заказы