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 = data: iconType: 'loupe' title: 'Button Text' options: layout: 'round#buttonLayout' maxWidth: 120 ;myMapcontrols;
// Custom icon image.var button = data: image: 'path_to/image.svg' title: 'Button Text' options: layout: 'round#buttonLayout' maxWidth: 120 ;myMapcontrols;
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 = options: layout: 'round#buttonLayout' ;myMapcontrols;
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 = options: layout: 'round#rulerLayout' ;myMapcontrols;
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 = options: layout: 'round#listBoxLayout' itemLayout: 'round#listBoxItemLayout' itemSelectableLayout: 'round#listBoxItemSelectableLayout' float: 'none' position: bottom: '40px' left: '10px' ;myMapcontrols;
// TypeSelector on the right side.var typeSelector = options: layout: 'round#listBoxLayout' itemLayout: 'round#listBoxItemLayout' itemSelectableLayout: 'round#listBoxItemSelectableLayout' float: 'none' position: bottom: '40px' right: '10px' ;myMapcontrols;
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 = options: layout: 'round#zoomLayout' ;myMapcontrols;
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.