Создайте интерактивную карту с помощью Leaflet JS

  1. Что такое Leaflet JS?
  2. Настройка проекта
  3. Почему я не вижу карту?
  4. Зарегистрируйтесь для получения ключа API
  5. Выбрать и подготовить данные
  6. Тип данных, который требуется Leaflet
  7. Где найти geoJSON
  8. Построение данных на карте
  9. Добавить всплывающее окно для каждого маркера
  10. Стилизация всплывающего контента
  11. Окончательный результат
  12. Пожалуйста, свяжитесь с нами

В этом уроке я собираюсь продемонстрировать, как создать простую полноэкранную карту, используя библиотеку JavaScript под названием Leaflet JS, и заполнить ее интерактивными значками, используя данные из Открытые данные Бристоль , Я объясню, как собирать и форматировать данные, чтобы они стали интерактивными. Наконец, я объясню, как настроить стиль листов карты и как можно улучшить карту.

Что такое Leaflet JS?

Leaflet JS, как следует из названия, - это библиотека Javascript для создания интерактивных карт, удобных для мобильных устройств. Он с открытым исходным кодом и имеет крошечный размер всего 38 КБ, который может включать в себя большую часть картографии функции тебе может понадобиться

С их сайта Leaflet это:

… Разработан с учетом простоты , производительности и удобства использования . Он эффективно работает на всех основных настольных и мобильных платформах, может быть расширен за счет множества плагинов, имеет красивый, простой в использовании и хорошо документированный API и простой, читаемый исходный код, в который приятно вносить вклад.

Я думаю, что эта библиотека идеально подходит для всех, кто хочет научиться создавать пользовательские карты, поскольку ее, как правило, проще понять, чем библиотеки Google Maps, и каждая функциональность, такая как нанесение маркера на карту, достижима с помощью 1-2 строк код!

Настройка проекта

Чтобы начать проект, вам нужно создать структуру проекта, с которой вы будете работать. Для этого создайте папку с именем Leaflet Map и добавьте еще три папки с именами «css», «js» и images. Внутри 'css /' создайте файл с именем style.css и map.js внутри 'js /'. Также создайте файл с именем index.html. Ваша структура должна напоминать это:

index.htmlcss

/ style.css js / main.js markers.js images /

Откройте index.html в редакторе кода и введите следующий код:

<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <meta http-эквивалент = "x-ua-совместимый" content = "ie = edge"> <title> Интерактивная карта - Leaflet JS </ title> <meta name = "viewport" content = "ширина = ширина устройства, начальный масштаб = 1,0, максимальный масштаб = 1,0, масштабируемый пользователем = нет" /> <! - Включите базовые стили CSS для Leaflet ->> "" /> <! - Включить JS-библиотеку Leaflet GhZmYgACEe0x35K7YzW1zJ7XyJV / TT1MrdXvMcA == "crossorigin =" "> </ script> <! - Включить наши стили -> <link rel =" stylesheet "href =" css / style.css "> </ head> <body> < div id = "map"> </ div> <script src = "js / markers.js"> </ script> <script src = "js / main.js"> </ script> </ body> </ html >

В заголовок HTML-документа я включаю необходимые листовки JS и CSS-файлы, выделенные в их Инструкция по началу работы , Затем у меня есть div с идентификатором 'map', к которому я прикреплю код инициализации листовки. Контейнер карты должен иметь определенную ширину и высоту, чтобы он отображался на странице. Добавьте следующий код в css / style.css:

html, body {padding: 0; поле: 0; низ: 0; высота: 100vh; переполнение: скрытое; } #map {position: absolute; низ: 0; высота: 100vh; ширина: 100 кВт; }

Теперь давайте инициализируем карту, добавив некоторые опции и установив карту, чтобы показать центр Бристоля. Карты используют координаты широты и долготы (известные как широта / долгота). Чтобы получить это для Бристоля, посетите http://www.latlong.net/ и введите Bristol UK в название места.

Добавьте следующий код в js / main.js:

var mymap = L.map ('map', {center: [51.454513, -2.587910], zoom: 16});

Откройте index.html в браузере, и вы увидите элементы управления масштабированием в левом верхнем углу, но на самом деле карты там нет, как показано ниже:

Почему я не вижу карту?

Причина, по которой вы не видите узнаваемую карту, заключается в том, что на карте еще нет набора тайлов. Tilesets - это, по сути, картины мира, разбитые на квадраты разных размеров. Размер квадратов соответствует уровню масштабирования, увеличиваясь или уменьшаясь в деталях. Leaflet JS может использовать любой набор плиток и Mapbox, а картографическая платформа с открытым исходным кодом для специально разработанных карт - это ресурс, который я буду использовать. Mapbox предлагает полную настройку и управление картами, а также размещение обширных API и библиотек для 3D-карт, разработки игр и многое другое.

Mapbox предлагает полную настройку и управление картами, а также размещение обширных API и библиотек для 3D-карт, разработки игр и многое другое

Пример настройки набора карт Mapbox

Зарегистрируйтесь для получения ключа API

Листовка требует, чтобы вы создали API-ключ для использования набора мозаики Mapbox. Это позволяет им отслеживать количество запросов к их ресурсам в месяц. Текущий максимум составляет 50000 запросов в месяц, после чего они предлагают платить, как вы используете модель ,

  1. Зарегистрировать аккаунт Вот
  2. Нажмите Токены доступа API
  3. Нажмите «Создать новый токен»
  4. Скопируйте сгенерированный ключ и отредактируйте js / main.js
  5. Введите свой ключ API в значение для accessToken: 'your.mapbox.access.token'

var mymap = L.map ('map', {center: [51.454513, -2.587910], zoom: 15}); L.tileLayer ('https://api.tiles.mapbox.com/v4/ {id} / {z} / {x} / {y} .png? Access_token = {accessToken}', {авторство: 'Картографические данные & copy; <a href="http://openstreetmap.org"> участники OpenStreetMap </a>, <a href="http://creativecommons.org/licenses/by-sa/2.0/"> CC-BY- SA </a>, Изображения © <a href="http://mapbox.com"> Mapbox </a> ', maxZoom: 18, id:' mapbox.streets ', accessToken:' your.mapbox.access. token '}). addTo (mymap);

В приведенном выше коде вы видите заглавную букву L, за которой следует .tileLayer; L является Название класса листовки. Сохраните код main.js и обновите страницу, вы должны увидеть карту, централизованную в Бристоле. Теперь вы можете использовать карту, как если бы вы использовали масштабирование, панорамирование и т. Д. Я считаю, что карта отображается более детально, особенно вокруг зданий, и если вы удалите или увеличите значение maxZoom, вы сможете увидеть более детально.

Карта Центрального Бристоля с использованием набора тайлов Mapbox

Выбрать и подготовить данные

Карты работают лучше всего, когда у них есть некоторый объем данных, с которыми вы можете взаимодействовать и находить больше географической информации. Карты Google - пример, который использует очень обширную информацию, такую ​​как их Направления и Библиотека Мест.

Функции в библиотеке JavaScript Google Places позволяют вашему приложению искать места (определенные в этом API как заведения, географические местоположения или известные достопримечательности), содержащиеся в определенной области, например в границах карты или вокруг фиксированной точка.

Mapbox предоставляет несколько своих собственных библиотек для таких вещей, как места, направления и интеграции в реальном времени. В этом примере не используются никакие другие библиотеки, но их можно добавить в Leaflet, следуя инструкциям Вот.

Тип данных, который требуется Leaflet

Листовка может наносить на карту маркеры, полилинии, всплывающие окна, фигуры, многоугольники и круги, предоставляя вам широту и долготу и некоторые основные параметры. Вот как можно добавить круг и маркер на карту:

var circle = L.circle ([51.45055, -2.59455], {color: '# 9416b7', fillColor: '# 9416b7', fillOpacity: 0.5, radius: 100}). addTo (mymap); var marker = L.marker ([51.4508553, -2.593530]). addTo (mymap);

Это должно произвести это на карте ниже:

Это должно произвести это на карте ниже:

Leaflet JS Маркер и Круг

Если вы хотите нанести несколько маркеров на карту, есть лучший способ, чем индивидуально написать новый L.marker для каждого. Вы можете сгруппировать всю информацию маркера в один большой файл в формате, называемом geoJSON, который является форматом для кодирования различных структур географических данных, включающих в себя координаты (Lat / Lng) и свойства (описание, заголовок).

Помимо координат, вы можете создавать неограниченные свойства и использовать их для воздействия на определенные функции маркера. Например, вы можете создать свойство iconType и установить его значение в redMarker . Затем в коде вы можете автоматически установить изображение значка на основе значения iconType .

Пример geoJSON

Где найти geoJSON

Существует отличный ресурс под названием Open Data Bristol, где вы можете искать свободно доступные наборы данных для огромного количества применений. В этом примере я собираюсь найти все банки переработки для Бристоля из Бристольского городского совета. Для этого перейдите к https://opendata.bristol.gov.uk нажмите «Данные», найдите «утилизацию» и нажмите на появившуюся карту. На вкладке Таблица отображаются все доступные строки данных. Нажмите на вкладку «Экспорт» и выберите geoJSON (весь набор данных).

Построение данных на карте

Откройте recycling-banks.geojson в текстовом редакторе, выберите все, а затем скопируйте и вставьте в проект js / markers.js. Вам нужно будет присвоить весь файл geoJSON переменной, чтобы он был доступен в основном файле js. Должно начинаться как с var markers =

var markers = {"type": "FeatureCollection", "features" ....

Теперь я собираюсь удалить фиолетовый круг и маркер, которые я создал ранее, и нанести на карту все маркеры, которые существуют в переменной markers. Мне нужно построить функцию, которая зацикливается на каждом маркере и берет значения координат внутри геометрического объекта и наносит на карту каждый из них на карте. Я могу сделать это просто с помощью следующего кода:

L.geoJSON (маркеры, {// Опции здесь}). AddTo (mymap);

Теперь, если вы сохраните и загрузите index.html в браузере, вы должны увидеть все нанесенные на карту банки утилизации!

html в браузере, вы должны увидеть все нанесенные на карту банки утилизации

Bristol Open Data банки утилизации нанесены на карту

В приведенном выше коде вы можете видеть, что я написал // Параметры здесь , хорошо, параметры, которые могут быть переданы этой функции, указаны в документации для geoJSON по адресу http://leafletjs.com/reference-1.2.0.html#geojson

Я хочу иметь возможность привязать всплывающее окно к каждому маркеру, которое появляется при нажатии на него. По умолчанию всплывающее окно пустое, поэтому его необходимо заполнить некоторым содержимым HTML. Наиболее очевидная вещь, которую нужно сделать, это передать get site_name из объекта свойств в markers.js. Опция onEachFeature обеспечивает необходимую нам функциональность:

onEachFeature - функция, которая будет вызываться один раз для каждой созданной функции после ее создания и стилизации. Полезно для добавления событий и всплывающих окон к функциям

«Функция» описана на http://geojson.org/ как геометрические объекты с дополнительными свойствами .

onEachFeature требует функцию, которая передает два аргумента через обратный вызов:

Изображение, показывающее спецификацию для метода onEachFeature

Добавление следующего кода дает мне полный доступ к данным маркера:

function queryMarker (функция, слой) {console.log (функция); } L.geoJSON (markers, {onEachFeature: queryMarker}). AddTo (mymap);

Добавить всплывающее окно для каждого маркера

Наконец, я добавлю код для рендеринга некоторого содержимого в каждом всплывающем окне маркера. Внутри папки с изображениями я добавил два изображения emoji PNG:

Внутри папки с изображениями я добавил два изображения emoji PNG:

Маркер всплывающие иконки

Полный код теперь выглядит так:

var mymap = L.map ('map', {center: [51.454513, -2.587910], zoom: 15}); L.tileLayer ('https://api.tiles.mapbox.com/v4/ {id} / {z} / {x} / {y} .png? Access_token = {accessToken}', {авторство: 'Картографические данные & copy; <a href="http://openstreetmap.org"> участники OpenStreetMap </a>, <a href="http://creativecommons.org/licenses/by-sa/2.0/"> CC-BY- SA </a>, Изображения © <a href="http://mapbox.com"> Mapbox </a> ', // maxZoom: 18, id:' mapbox.streets ', accessToken:' your.mapbox. access.token '}). addTo (mymap); / ** * Обработка сохраненного значения для возврата пользовательского значка изображения * @ строковое значение «Да» или «Нет» * @tturn-строка HTML-тег изображения с альтернативным текстом * / function getAvailabilityIcon (value) {var icon = ''; if (value === "Да") {icon = '<img class = "site__availability__icon" src = "images / icon_yes.png" alt = "Да" />'; } else if (value === "No") {icon = '<img class = "site__availability__icon" src = "images / icon_no.png" alt = "No" />'; } значок возврата; } / ** * Эта функция создает html-контент на основе свойств внутри каждого маркера *. * * @param объект имеет особый маркерный объект, переданный через метод geoJSON * onEachFeature * @return string html content для метода bindPopup * / function createPopupContent (feature) {// Инициализирует контейнер для хранения всплывающего содержимого var html = '< div class = "popup__content"> '; // Получить имя сайта if (feature.properties.hasOwnProperty ('site_name')) {html + = '<h2 class = "site__name">' + feature.properties.site_name + '</ h2>'; } // Получить полный адрес if (feature.properties.hasOwnProperty ('full_address')) {html + = '<p class = "site__address">' + feature.properties.full_address + '</ p>'; } / * * Каждый банк утилизации позволяет перерабатывать определенные материалы, они * отмечены свойством, таким как «Стекло», и значением - «Да» * или «Нет». Ниже я покажу некоторые из них в небольшом списке. * / html + = '<div class = "site__availability"> <ul>'; // Пластиковые бутылки if (feature.properties.hasOwnProperty ('plastic_bottles')) {html + = '<li> <span> Пластиковые бутылки: </ span>' + getAvailabilityIcon (feature.properties.plastic_bottles) + '</ li > '; } // Батареи if (feature.properties.hasOwnProperty ('battery')) {html + = '<li> <span> Батареи: </ span>' + getAvailabilityIcon (feature.properties.batteries) + '</ li> «; } // Paper if (feature.properties.hasOwnProperty ('paper')) {html + = '<li> <span> Paper: </ span>' + getAvailabilityIcon (feature.properties.paper) + '</ li> «; } // Картон if (feature.properties.hasOwnProperty ('картон))) {html + =' <li> <span> Картон: </ span> '+ getAvailabilityIcon (feature.properties.cardboard) +' </ li> «; } // Shoes if (feature.properties.hasOwnProperty ('shoes')) {html + = '<li> <span> Shoes: </ span>' + getAvailabilityIcon (feature.properties.shoes) + '</ li> «; } html + = '</ ul> </ div>'; // End .site__availability html + = '</ div>'; // Конец .popup__content return html; } function queryMarker (feature, layer) {/ * * Свяжите новое всплывающее окно с каждым Feature и вызовите пользовательскую * функцию для создания всплывающего содержимого * / layer.bindPopup (createPopupContent (feature)); } L.geoJSON (markers, {onEachFeature: queryMarker}). AddTo (mymap);

Вот результат теперь при нажатии на один из маркеров:

Значок маркера для Asda Bedminster Recycling Наличие

Стилизация всплывающего контента

Как вы можете заметить, стилизация всплывающего содержимого является грязной, и не очень понятно, к чему относятся значки. Я исправлю это с помощью некоторых CSS:

/ * Стиль всплывающего маркера html * / .site__name {margin: 0 0 .8em 0; } .site__address {font-size: 1.3em; } .site__availability {max-width: 16em; } .site__availability ul {padding: 0; маржа: 0 0 1,5em; стиль списка: нет; } .site__availability ul li {margin-bottom: .8em; } / * Имя свойства * / .site__availability ul li span {font-size: 1.4em; вес шрифта: полужирный; высота строки: 1,5; } / * Значение свойства (значок) * / .site__availability__icon {width: 2em; плавать: правильно; }

Окончательный результат

Вуаля! Теперь всплывающее содержимое выглядит намного более читабельным:

Теперь всплывающее содержимое выглядит намного более читабельным:

Карта со стилем CSS

Есть много способов улучшить эту карту, подумайте о любом приложении, основанном на местоположении. Например, эту карту можно расширить, чтобы предоставить систему фильтрации или указания на основе местоположения для ближайшего банка по переработке.

Я надеюсь, что этот урок был полезен, и, пожалуйста, оставьте свои комментарии или предложения ниже.

Пожалуйста, свяжитесь с нами

Поговори с Пирсом сегодня

Связаться с нами

Что такое Leaflet JS?
Что такое Leaflet JS?
Png?
Png?

Новости

Социальные сети в России, зима 2015-2016 Цифры, тренды, прогнозы | Блог Brand Analуtics — все о бренд мониторинге и социальной аналитике
Представляем данные регулярного исследования активной аудитории социальных сетей в России, зима 2015-2016. В исследовании представлены данные по аудитории, возрасту, полу и региональному распределению

SMM маркетинг от А до Я
Развитие социальных сетей породило новую огромную бизнес отрасль — СММ маркетинг. Это когда мы приходим с нашим продуктом в какую-нибудь соцсеть, находим там нашу целевую аудиторию, и предлагаем ей наш

Полезно знать
20.02.2014 Что такое Pinterest. Визуальный PR и маркетинг Pinterest или ПИНТЕРЕСТ – социальная сеть, использующая вместо текстов картинки и изображения, которые можно добавлять в аккаунт,

Фейсбук Моя страница: ВХОД на свою страницу Facebook
Фейсбук (Facebook) Моя страница — это личная страница каждого зарегистрированного пользователя самой большой в мире социальной сети.  Фейсбук даёт возможность людям с разных уголков Земли общаться между

Анализ социальных сетей
АНАЛИЗ СОЦИАЛЬНЫХ СЕТЕЙ (social network analysis) - новое направление структурного подхода, основными целями которого являются исследование взаимодействий между социальными объектами и выявление условий

Социальные сети для продвижения бизнеса: какие выбрать?
  Привет, друзья! Социальные сети занимают львиную часть времени в нашей жизни. Ежедневный просмотр новостей, любимых групп и переписка с друзьями – это любимое дело большинства молодых людей. Вот и

ВРЕДНОЕ ВЛИЯНИЕ СОЦИАЛЬНЫХ СЕТЕЙ НА ЗДОРОВЬЕ ЧЕЛОВЕКА - VI Студенческий научный форум (15 февраля - 31 марта 2014 года)
ВРЕДНОЕ ВЛИЯНИЕ СОЦИАЛЬНЫХ СЕТЕЙ НА ЗДОРОВЬЕ ЧЕЛОВЕКА Гущина Н. В., Люлина Н.В. С распространением всемирной паутины рост социальных сетей по всему миру стал глобальным явлением. С каждым

Влияние социальных сетей на подростков. Пропаганда суицида в сетях
Почему мы любим интернет? Почему молодым людям, подросткам сказать «Привет» стало проще, познакомившись в интернете, чем просто подойти в реальности? Почему все «сидят» в социальных сетях? Социальные сети

Маркетинг в социальных сетях (SMM) для продвижения компании
Деятельность в социальных сетях, на блогах и форумах по повышению лояльности клиентов получила название SMM — от аббревиатуры английского звучания этого термина – Social Media Marketing. Аудитория

Фейсбук (Facebook) - что это за сеть: как пользоваться ФБ
Фейсбук — это самая популярная и большая социальная сеть в мире. Если Вам интересно узнать больше о Facebook, про то как пользоваться сетью и о некоторых «фишках» ФБ — этот материал именно для вас!