Создание сайтов в Счастье, ЛНР. Руководство для начинающих по созданию карты с использованием 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: '© OpenStreetMap 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 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: '© OpenStreetMap 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, будучи открытым исходным кодом, имеет множество сторонних плагинов, которые расширяют функциональность исходной карты. Вы можете найти любой плагин, разработанный сообществом Leaflet, здесь. Вы можете добавить дополнительные фрагменты карты, страницы, шаблоны URL-адресов, изображения PNG, изображения фрагментов, расширенные параметры масштабирования и расширенные возможности взаимодействия фрагментов с помощью подключаемых модулей Leaflet. Также есть возможность использовать Google API для определения местоположения и поиска.

Заключение

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

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