Задать вопрос
@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>
  • Вопрос задан
  • 1550 просмотров
Комментировать
Подписаться 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>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Системный Аналитик 1С
Wanted. • Москва
До 260 000 ₽
Ведущий программист 1С
Автомакон
от 250 000 до 400 000 ₽
Системный аналитик
HR Prime
от 200 000 до 300 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Поправить сайт (мобильная версия) на WordPress
24 нояб. 2024, в 04:16
5000 руб./за проект
Необходимо поменять пароль в WINDOWS
24 нояб. 2024, в 03:11
500 руб./за проект
Требуется консультация по UX-дизайну казино
24 нояб. 2024, в 01:35
5000 руб./за проект
Ещё заказы