API Спутник/КартыJavaScript API Спутник/Карты

JavaScript API Спутник/Карты

Добавить маркер

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

<div id="map1"></div>

<script>
var map1 = L.sm.map('map1'); // создаем карту

var myMarker1 = L.sm.marker([55.55, 37.6167]); // создаем маркер с координатами
map1.addLayer(myMarker1); // первый способ: карта добавляет маркер 

var myMarker2 = L.sm.marker([55.65, 37.6167], {type: 'location-firebrick'});
myMarker2.addTo(map1); //  второй способ: маркер добавляет себя на карту 
</script>

Используя параметр type, можно выбрать один из следующих видов маркера:

type маркер type маркер
default alt1
alt2 alt3
location-cfblue target-cfblue
location-chocolate target-chocolate
location-coral target-coral
location-darkcyan target-darkcyan
location-darkorange target-darkorange
location-firebrick target-firebrick
location-lawngreen target-lawngreen
location-mediumblue target-mediumblue
location-seagreen target-seagreen
location-skyblue target-skyblue
location-steelblue target-steelblue
location-tomato target-tomato

URL иконки маркера

iconUrl = ‘path/to/image.png’

Размер иконки

При необходимости можно указать размеры иконки в пикселах:
iconSize = [<ширина>, <высота>],

либо имя CSS-класса для иконки:
iconClassName = ‘icon-w25h41’.

<style>
.icon-w25h41 {
    width: 25px;
    height: 41px;
}
</style>
<div id="map2"></div> 
<script>
var map2 = L.sm.map('map2'); // создаем карту

var myMarker21 = L.sm.marker([55.85, 37.61], {
    iconUrl: '//maps-js.apissputnik.ru/v0.3/images/marker-icon.png',
    iconSize: [38, 61] // размер иконки
});
myMarker21.addTo(map2);

var myMarker22 = L.sm.marker([55.65, 37.67], {
    iconUrl: '//maps-js.apissputnik.ru/v0.3/images/marker-icon-2x.png',
    iconClassName: 'icon-w25h41' // CSS-класс иконки
});
myMarker22.addTo(map2);
</script>

Класс маркера

  • className – атрибут class DOM-элемента маркера

Полный список параметров иконки в документации Leaflet.

Полный контроль над иконками

Описанный выше способ работы с иконками подходит для простых задач. В случаях, когда нужна ссылка на объект иконки, используйте конструктор иконок L.icon(), такой объект можно передать маркеру в параметре icon.

<div id="map3"></div> 
<script>
var map3 = L.sm.map('map3'); // создаем карту

var myIcon3 = L.icon({ // создаем иконку
    iconUrl: '//maps-js.apissputnik.ru/v0.3/images/marker-icon.png'
});

var myMarker30 = L.sm.marker([55.85, 37.61], {
    icon: myIcon3 // передаем иконку маркеру
});

myMarker30.addTo(map3); // добавляем маркер на карту

</script>

Пример на отдельной странице

Дополнительная информация