У меня есть ♥ обычные библиотеки — с физическими книгами и фильмами и угрюмыми старушками, которые знают все обо всем (и моими дорогими друзьями-библиотекарями, которые не являются ни угрюмыми, ни старыми, ни вообще дамами). Но нет! Я говорю о библиотеках кода, ниспосланных Богом коллекциях инструментов, которые кто-то создал и раздает бесплатно.

Это не новый роман, но у меня есть пример, которым я могу поделиться. Здесь, в Craft Academy, мы работаем над проектом для нашего отдела лабораторий (где мы на самом деле собираем кое-что). Наши клиенты попросили нас создать платформу социальных сетей для любителей активного отдыха. Мы создали большую часть серверной части и усердно работаем над более сложными функциями для мобильного клиента. Сегодня я работал над большой картой и геолокацией пользователя — двумя отдельными новыми для меня инструментами.

Я запустил эту функцию около 15:00, и вот я работаю над записью в блоге для нее в 16:15. Вот: сила библиотек.

Карта

Наш клиент попросил нас использовать Leaflet (и Mapbox) для карт в мобильном клиенте. Я использовал GMaps для предыдущих проектов, поэтому для меня это была новая библиотека карт.

Я начал следовать их документам «Быстрый старт» и за считанные минуты на экране появилась карта:

// Create a map, center it on Gothenburg.
const mymap = L.map('mapContainer')
  .setView([57.7, 11.97], 10);

// The map "tile layer"
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
  attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
  maxZoom: 18,
  id: 'mapbox.outdoors',
  accessToken: 'super.secret.access.token'
}).addTo(mymap);

(Следуйте документам «Быстрый старт» для всех небольших включений и вещей.)

Единственной сложной частью здесь было выяснить токен доступа, который по какой-то причине не сработал с первой попытки, и мне пришлось его сбросить. Другая часть заключается в том, что id ищет стиль для карты. По умолчанию это не то, что можно использовать, и он просто возвращает 404. Вы можете увидеть параметры стиля здесь.

Еще две вещи: я хотел, чтобы элементы управления были внизу (чтобы вы случайно не перепутали меню), и я хотел убедиться, что маркеры могут быть размещены для каждого из элементов, основанных на местоположении, в нашей базе данных.

Вот код для обоих:

// Add zoom controls
L.control.zoom({ position: 'bottomleft' })
  .addTo(mymap);

// A marker example
L.marker([57.6, 11.97])
  .addTo(mymap);

И это все! Как видите, если у нас есть элементы с локациями, то совсем недалеко до location in locations, а затем перебираем и расставляем все маркеры. Хорошие времена!

Геолокация пользователя

Итак, с картами было легко, а как насчет геолокации? Небольшое гугление привело меня к плагину Cordova, $cordovaGeolocation. Немного установки: cordova plugin add cordova-plugin-geolocation, затем, конечно же, ссылаемся на него на index.html и внедряем в наш контроллер, и мы можем использовать:

let posOptions = {timeout: 10000, enableHighAccuracy: false};
$cordovaGeolocation
  .getCurrentPosition(posOptions)
  .then(function (position) {
    let lat  = position.coords.latitude;
    let long = position.coords.longitude;
    // Center the map on user's geolocation after it loads.    
    mymap.setView([lat, long], 10); 
  }, function(err) {
    // error
  });

Посмотрите на это — getCurrentPosition() и у нас есть геолокация пользователя. Мы просто центрируем карту на этом месте и — бум — функция готова. Черт возьми, библиотеки такие классные.