Round map controls theme
Plugin for Yandex.Maps JS API
Demo
http://yandex.github.io/mapsapi-round-controls/
How to use?
- Download the source code:
build/release/all.js. - Add it to your page below Yandex.Maps JS API
<script>tag. - Create controls with
round#... layout keys.
Available layouts:
Button
| Param | Value |
|---|---|
parameters.options.layout |
round#buttonLayout |
parameters.data.iconType |
List of available icons |
parameters.data.image |
Icon URL |
// Preset icon image.
var button = new ymaps.control.Button({
data: {
iconType: 'loupe',
title: 'Button Text'
},
options: {
layout: 'round#buttonLayout',
maxWidth: 120
}
});
myMap.controls.add(button);// Custom icon image.
var button = new ymaps.control.Button({
data: {
image: 'path_to/image.svg',
title: 'Button Text'
},
options: {
layout: 'round#buttonLayout',
maxWidth: 120
}
});
myMap.controls.add(button);For more info visit https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/control.Button-docpage/
GeolocationControl
| Param | Value |
|---|---|
parameters.options.layout |
round#buttonLayout |
var geolocationControl = new ymaps.control.GeolocationControl({
options: {
layout: 'round#buttonLayout'
}
});
myMap.controls.add(geolocationControl);For more info visit https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/control.GeolocationControl-docpage/
RulerControl
| Param | Value |
|---|---|
parameters.options.layout |
round#rulerLayout |
var rulerControl = new ymaps.control.RulerControl({
options: {
layout: 'round#rulerLayout'
}
});
myMap.controls.add(rulerControl);For more info visit https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/control.RulerControl-docpage/
TypeSelector
| Param | Value |
|---|---|
parameters.options.layout |
round#listBoxLayout |
parameters.options.itemLayout |
round#listBoxItemLayout |
parameters.options.itemSelectableLayout |
round#listBoxItemSelectableLayout |
// TypeSelector on the left side.
var typeSelector = new ymaps.control.TypeSelector({
options: {
layout: 'round#listBoxLayout',
itemLayout: 'round#listBoxItemLayout',
itemSelectableLayout: 'round#listBoxItemSelectableLayout',
float: 'none',
position: {
bottom: '40px',
left: '10px'
}
}
});
myMap.controls.add(typeSelector);// TypeSelector on the right side.
var typeSelector = new ymaps.control.TypeSelector({
options: {
layout: 'round#listBoxLayout',
itemLayout: 'round#listBoxItemLayout',
itemSelectableLayout: 'round#listBoxItemSelectableLayout',
float: 'none',
position: {
bottom: '40px',
right: '10px'
}
}
});
myMap.controls.add(typeSelector);For more info visit https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/control.TypeSelector-docpage/
ZoomControl
| Param | Value |
|---|---|
parameters.options.layout |
round#zoomLayout |
var zoomControl = new ymaps.control.ZoomControl({
options: {
layout: 'round#zoomLayout'
}
});
myMap.controls.add(zoomControl);For more info visit https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/control.ZoomControl-docpage/
Building
Use ymb if re-build is needed.