Руководство для новичков по созданию карты с помощью Leaflet.js

ранее определенного. Второй — это то место, где вы хотите, чтобы был центр карты. Последнее — это уровень масштабирования. Я установил масштаб на 3,5, но вы можете установить все, что захотите.

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

const map = L.map('map', {
  center: [-29.50, 145],
  zoom: 3.5
});

Добавьте базовый слой

Затем я добавил слой тайлов, который будет базовым слоем для карты Leaflet. Слой листов — это набор листов, доступ к которым осуществляется через сервер с помощью прямого запроса URL. Этот слой листов добавляет на карту географические границы.

Обязательно укажите для этого текст атрибуции, так как большинство разработчиков это забывают:

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);

Добавьте маркеры по умолчанию

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

const marker1 = L.marker([-37.699450, 176.279420]).addTo(map);
const marker2 = L.marker([-27.643310, 153.305140]).addTo(map);
const marker3 = L.marker([-33.956330, 122.150270]).addTo(map);
const marker4 = L.marker([-34.962390, 117.391220]).addTo(map);
const marker5 = L.marker([-17.961210, 122.214820]).addTo(map);
const marker6 = L.marker([-16.505960, 151.751520]).addTo(map);
const marker7 = L.marker([-22.594400, 167.484440]).addTo(map);
const marker8 = L.marker([-37.977000, 177.057000]).addTo(map);
const marker9 = L.marker([-41.037600, 173.017000]).addTo(map);
const marker10 = L.marker([-37.670300, 176.212000]).addTo(map);

Вуаля! Совершенно красивая и функциональная карта Leaflet настроена и готова. Разве эта разработка Leaflet не была легкой?

На изображении ниже показано, как все это выглядит на данный момент.

Настройка карты листовок

Одной из полезных функций библиотеки Leaflet JavaScript является возможность быстрого создания базовых карт, а также наличие множества опций для настройки карт. Итак, позвольте мне показать вам четыре способа сделать эту карту Leaflet более информативной и более эстетичной.

1. Отключить масштабирование с помощью прокрутки мыши

Одна из основных проблем рабочего стола — это случайная прокрутка карты при попытке перемещения по странице. Чтобы справиться с этим, я изменяю код, в котором я объявил карту на этапе настройки. Я добавлю scrollWheelZoomатрибут и установлю для него значение false, чтобы масштабировать карту можно было только с помощью кнопок масштабирования. Я также использую другой способ установки центра и уровня масштабирования, который работает эффективно и более читабелен:

const map = L.map('map', {scrollWheelZoom:false}).setView([-29.50, 145], 3.5);

2. Добавьте слои на карту.

Еще одна интересная и полезная функция Leaflet — это возможность добавлять несколько векторных слоев. Сохраняя вид улиц как один из слоев, я добавлю еще два слоя тайлов с сайта, который предоставляет бесплатный сервис веб-карт (WMS). Я добавлю слой топографии и слой мест:

const basemaps = {
  StreetView: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',   {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}),
  Topography: L.tileLayer.wms('http://ows.mundialis.de/services/service?',   {layers: 'TOPO-WMS'}),
  Places: L.tileLayer.wms('http://ows.mundialis.de/services/service?', {layers: 'OSM-Overlay-WMS'})
};

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

L.control.layers(basemaps).addTo(map);

Наконец, я установлю слой Topography в качестве слоя по умолчанию для рендеринга. В финальной версии я вернусь к просмотру улиц по умолчанию:

basemaps.Topography.addTo(map);

3. Настройте маркеры

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

Чтобы определить значок, мне нужно указать URL-адрес и размер значка. Я скачаю бесплатный значок SVG и размещу его в своей учетной записи GitHub, где указан URL-адрес. Я установил размер 40, но вы можете оставить его более-менее.

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

const basicBeachIcon = L.icon({
  iconUrl: 'https://raw.githubusercontent.com/shacheeswadia/leaflet-map/main/beach-icon-chair.svg',
  iconSize: [40, 40],
});

const marker1 = L.marker([-37.699450, 176.279420], {icon: basicBeachIcon}).addTo(map);
const marker2 = L.marker([-27.643310, 153.305140], {icon: basicBeachIcon}).addTo(map);
const marker3 = L.marker([-33.956330, 122.150270], {icon: basicBeachIcon}).addTo(map);
const marker4 = L.marker([-34.962390, 117.391220], {icon: basicBeachIcon}).addTo(map);
const marker5 = L.marker([-17.961210, 122.214820], {icon: basicBeachIcon}).addTo(map);
const marker6 = L.marker([-16.505960, 151.751520], {icon: basicBeachIcon}).addTo(map);
const marker7 = L.marker([-22.594400, 167.484440], {icon: basicBeachIcon}).addTo(map);
const marker8 = L.marker([-37.977000, 177.057000], {icon: basicBeachIcon}).addTo(map);
const marker9 = L.marker([-41.037600, 173.017000], {icon: basicBeachIcon}).addTo(map);
const marker10 = L.marker([-37.670300, 176.212000], {icon: basicBeachIcon}).addTo(map);

Посмотрите, как выглядит эта персонализированная версия, и поиграйте с кодом на CodePen.

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

4. Добавить всплывающие окна

Как и всплывающие подсказки, всплывающие окна могут содержать дополнительную информацию о данных. Всплывающее окно на картах отображается при нажатии и может быть настроено в соответствии с вашими предпочтениями. С помощью Leaflet всплывающее окно можно очень легко добавить с помощью функции, называемой bindPopup.

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

const marker1 = L.marker([-37.699450, 176.279420], {icon: basicBeachIcon})
    .bindPopup('Whitehaven Beach, Whitsunday Island')
    .addTo(map);
const marker2 = L.marker([-27.643310, 153.305140], {icon: basicBeachIcon})
    .bindPopup('Turquoise Bay Exmouth, Australia')
    .addTo(map);
const marker3 = L.marker([-33.956330, 122.150270], {icon: basicBeachIcon})
    .bindPopup('Cape Le Grand National Park Esperance, Australia')
    .addTo(map);
const marker4 = L.marker([-34.962390, 117.391220], {icon: basicBeachIcon})
    .bindPopup('Greens Pool Denmark, Australia')
    .addTo(map);
const marker5 = L.marker([-17.961210, 122.214820], {icon: basicBeachIcon})
    .bindPopup('Cable Beach Broome, Australia')
    .addTo(map);
const marker6 = L.marker([-16.505960, 151.751520], {icon: basicBeachIcon})
    .bindPopup('Matira Beach, Society Islands')
    .addTo(map);
const marker7 = L.marker([-22.594400, 167.484440], {icon: basicBeachIcon})
    .bindPopup('Piscine Naturelle Ile Des Pins, New Caledonia')
    .addTo(map);
const marker8 = L.marker([-37.977000, 177.057000], {icon: basicBeachIcon})
    .bindPopup('Ohope Beach Whakatane, New Zealand')
    .addTo(map);
const marker9 = L.marker([-41.037600, 173.017000], {icon: basicBeachIcon})
    .bindPopup('Kaiteriteri Beach, New Zealand')
    .addTo(map);
const marker10 = L.marker([-37.670300, 176.212000], {icon: basicBeachIcon})
    .bindPopup('Mt Maunganui Main Beach, New Zealand')
    .addTo(map);

Вот и все! Вы можете найти весь код на CodePen.

Другие настройки с картами Leaflet

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

Плагин открывает целую вселенную настроек, а Leaflet, будучи открытым исходным кодом, имеет множество сторонних плагинов, которые обеспечивают расширенную функциональность исходной карты. Вы можете найти любой плагин, разработанный сообществом Листовка здесь. Вы можете добавить дополнительные фрагменты карты, страницы, шаблоны URL, изображения PNG, изображения фрагментов, расширенные параметры масштабирования и улучшенное взаимодействие фрагментов с помощью подключаемых модулей Leaflet. Также есть возможность использовать API Google для определения местоположения и поиска.

Заключение

Как видите, создавать интерактивные карты с помощью библиотеки JS, такой как Leaflet, очень просто и быстро. Установка проста, работает эффективно, код читается, а все сопоставления удобно обрабатываются библиотекой. Это отличный выбор для создания удобных для мобильных устройств интерактивных карт, так как он хорошо работает со всеми мобильными платформами. Наряду с отличным удобством использования Leaflet поддерживает множество параметров настройки. Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы или предложения.

Итак, прогуляйтесь по пляжу или начните строить карты. Оба варианта помогут вам расслабиться и развлечься!