Листовка карты маркер силы
Правильный выбор маркеров для ваших карт позволит выжать максимум возможностей визуализации из ваших данных и порадовать вашу аудиторию.
Leaflet - это совершенно бесплатное, легкое, молниеносное решение с открытым исходным кодом для карт JavaScript, которые работают так же плавно, как и нативные приложения.
Эта статья дает несколько советов для тех, кто хочет вывести стандартные карты и маркеры Leaflet на новый уровень.
Карты - это сильные визуальные элементы, а маркеры на карте могут нести много информации. Вы можете делать увлекательные вещи с помощью движущихся и вращающихся маркеров и маркеров с добавленными индикаторами, отражающими состояние местоположения.
Каждый пример в этой статье содержит ссылку на автономный исходный код в виде файла gist GitHub, который вы можете изучить. Как вариант, скачать весь набор из этого репозитория GitHub. После загрузки двойной щелчок по любому из файлов .html откроет интерактивную карту, соответствующую статье, в вашем браузере.
1 Основные сведения
Посмотрите, сможете ли вы получить эту первую супер-простую карту Leaflet из набора, чтобы открыть на своем ноутбуке (суть 1). Должно получиться так:
С точки зрения JavaScript для достижения вышеуказанного вы создаете объект карты с помощью L.map, центрируете и масштабируете до желаемого уровня (например, 9) с помощью setView, добавляете маркер с помощью L.marker и выберите набор листов, который вы хотите использовать с addLayer. В этом примере мы перешли к слою плитки Викимедиа, который создает ощущение чистой лаконичности:
const markerOptions = { draggable: true } // allow mouse-dragging
const myMap = L.map('map-placeholder').setView([-37.75, 145], 9)
const myMarker = L.marker([-37.8, 145], markerOptions).addTo(myMap)
myMap.addLayer(L.tileLayer(
'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png',
{ attribution: '© OpenStreetMap contr.' }
))
Приведенный выше код использует сопроводительный HTML-код для отображения элемента div с идентификатором «map-placeholder», куда будет вставлена карта. Важно, чтобы высота этого div была установлена либо через CSS, либо в HTML. Вот так, например:
<div id="map-placeholder" style=”height: 400px”></div>
Ширина карты автоматически расширяется до контейнера, в котором находится карта.
Маркер листовки по умолчанию - это синий значок, показанный выше. Вы можете заменить стандартную синюю булавку чем-то более привлекательным, используя альтернативное изображение, предоставленное файлом .png или .svg (с прозрачностью), значком шрифта, эмодзи или встроенным SVG.
2 маркера, созданные из смайликов, иконок шрифтов или встроенных SVG (по сути 2a, 2b, 2c)
Огромным преимуществом использования смайлов, иконок шрифтов или встроенных SVG является то, что они бесконечно масштабируются . Эти изображения очень четкие при любом размере рендеринга. Кроме того, они не требуют HTTP-запросов для каждого изображения / значка. Хотя значки шрифтов требуют одноразового запроса на загрузку всего набора, частью которого они являются.
У всех трех вариантов есть свои плюсы и минусы, особенно в отношении доступности. За подробностями обратитесь к Интернету.
А пока, чтобы использовать что-либо из вышеперечисленного в Leaflet, мы воспользуемся атрибутом icon L.marker. См. Суть 2а.
const markerOptions = {
icon: L.divIcon(iconOptions)
}
Используя приведенный выше код, HTML-код маркера будет ‹div›, а не элементом ‹img›. С помощью iconOptions вы можете указать размеры div, а также его внутренний HTML. Здесь мы можем вставить что-то более привлекательное, чем синяя булавка, например, смайлик.
На выбор уже есть тысячи смайликов, и каждый год их становится все больше. Смайлы не требуют дополнительных файлов и имеют сверхнизкую пропускную способность, так как смайлы занимают всего 3 байта (да, байта, а не килобайты) памяти. Еще несколько байтов требуется, когда вы применяете модификаторы, такие как оттенок кожи и пол, или когда вы объединяете вместе базовые смайлы, например создать единый образ семьи, состоящей из мамы, папы и дочери.
const iconOptions = {
iconSize : [size, size],
iconAnchor: [size/2, size + 9],
className : 'mymarker',
//A runner emoji, medium skin tone, Zero-Width-Joiner, female:
html: '🏃🏽♀' // or: '🏃🏽‍♀'
}
Чтобы вышеуказанный iconOptions работал правильно, вы хотите установить размер div, равный размеру шрифта.
Вот почему в коде JavaScript const size = 50 и HTML ‹head› имеет ‹style› .mymarker {font-size: 50px; } ‹/style›
Если вы не можете найти смайлик, соответствующий вашим потребностям, значок шрифта может сработать за вас (суть 2b).
Продолжая работу над примером файла смайлика, вам нужно добавить только две строки кода .
Сначала импортируйте набор иконок шрифтов, который вы хотите использовать. Например, Bootstrap 3 можно загрузить следующим образом (примечание: Bootstrap 4 не имеет встроенных значков шрифтов, но есть множество других поставщиков, которые вы можете использовать):
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
а затем укажите значок, который вы хотите использовать для атрибута iconOptions, html:
html: '<span class="glyphicon glyphicon-home"></span>'
Иконки шрифтов монохромные. Но они не обязательно должны быть черными. Вы можете установить цвет и размер значка шрифта следующим образом:
.mymarker {
color: purple;
font-size: 50px;
}
Следует помнить, что хотя значки шрифтов похожи на смайлики в том смысле, что они занимают всего пару байтов, они обычно входят в состав более крупного набора, который ваша страница должна загрузить полностью, даже если вы только используйте пару иконок из набора.
Например, приведенный выше CSS-файл Bootstrap3 размером 20 Кбайт под оберткой втягивает файл глификонов еще на 18 Кбайт.
Если посмотреть на это с этой точки зрения, этот единственный маркер имеет отпечаток размером 38 КБ, что, вероятно, немного больше, чем ваш средний файл изображения маркера (по умолчанию маркер Leaflet имеет размер .png размером 2,5 КБ).
Вот почему встроенный SVG (gist 2c) может быть отличной альтернативой значкам шрифтов. Благодаря встроенному SVG, встроенному в ваш код так же, как и эмодзи, и отсутствию необходимости в другом сетевом запросе для получения дополнительных файлов, встроенный SVG является экономичным и быстро загружается. Простые иконки SVG без большого количества деталей могут добавить к размеру вашего html файла всего 1 КБ. Значок SVG для кемпинга ниже был взят из Line Awesome. Он добавляет к файлу примера 1550 байт по сравнению с эмодзи.
В этом случае нет необходимости устанавливать размер шрифта, потому что SVG не является шрифтом. Вы можете установить цвет встроенного SVG следующим образом:
.mymarker svg path {
fill: limegreen;
}
3 маркера с индикаторами
Чтобы добавить информацию о местоположениях к вашим маркерам, не занимая место, которое занимает всплывающее окно маркера, вы можете легко добавить изображения и числа индикаторов. Цифры могут представлять такие вещи, как цена за ночлег, температура воды на пляже для купания, скорость движущегося транспортного средства и т. Д.
Индикаторы действуют как предупреждения на приборной панели, говоря что-то о состоянии местоположения, например «В настоящее время закрыто», «есть туалеты» и т. Д.
Gist 3 имеет полный код. Существенным изменением iconOptions является его атрибут html:
html: '🏛️<div class="indicator">🍽️ 🍷 🔓</div>'
В то время как CSS для размещения и размера индикаторов выглядит так:
.mymarker {
font-size: 50px;
}
.mymarker .indicator {
font-size: 28px;
position: relative;
left: -26px;
bottom: 15px;
white-space: nowrap;
}
4 повернутых маркера и указателя
Маркеры также отлично подходят для указания направления. Например, когда ваша карта показывает транспортные средства с GPS-отслеживанием, стрелка-маркер отлично показывает, в каком направлении движется автомобиль, возможно, с дополнительным числом, указывающим скорость. Или, если ваша карта показывает погодные условия, вращающаяся стрелка может указывать как направление ветра, так и скорость ветра (размер стрелки).
После добавления 20 строк кода JavaScript (подробности см. Суть 4a) вы можете указать поворот, который будет применяться к маркеру, следующим образом:
const markerOptions = {
icon: L.divIcon(iconOptions),
rotation: 70
}
Естественно, когда маркер представляет отслеживаемый объект, положение маркера (широта, долгота) и угол поворота будут непрерывно изменяться по мере перемещения объекта по карте.
Этот подход вращения работает для изображений (.png, .svg), эмодзи, значков шрифтов и встроенного SVG.
В предыдущем примере с индикатором индикаторы были «встроены» в маркер, например:
'🏛️ <div class="indicator">🍽️ 🍷 🔓</div>'
Это означает, что когда маркер вращается, индикаторы вращаются вместе с ним. На изображении ниже (суть 4а) показано, что с этим не так. На этом изображении показаны позиции пары лодок и курс по компасу, по которому они плывут. Один индикатор-маркер выглядит отлично, другой… не очень.
В большинстве случаев, когда маркер вращается, необходимо, чтобы связанные индикаторы не вращались и оставались горизонтальными в том же положении относительно маркера, например, немного выше и правее это.
Чтобы индикаторы не вращались, нам нужно реорганизовать нашу реализацию маркеров так, чтобы индикаторы действовали больше как «боковые панели». Вращение основной пластины (маркера) не должно влиять на ориентацию боковых пластин (индикаторов).
Однако, когда маркер и индикаторы «разъединены», мы должны убедиться, что при перемещении основной пластины ( переводит), боковая пластина следует. Точно так же нам также нужно будет фиксировать события масштабирования карты и реагировать соответствующим образом.
Дополнительные десять строк JavaScript реализуют желаемое поведение (суть 4b).
Gist 4b - это интерактивная демонстрация: щелкая по маркеру, вы можете повернуть его и посмотреть, как обновляется направление компаса.
В нашем приложении wemapshare (wemapshare.com) мы также используем индикаторы в дополнение к вращающимся маркерам транспортных средств. Например, отображается пара глазных шариков, чтобы указать водителю, что его в настоящее время просматривает подписчик, с которым он поделился своей поездкой на карте.
