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>