svgIcon is an preset to show custom GeoObject markers based on user's SVG path string.
-
Put module source code (
ymap-svg-icon.min.js) on your CDN. -
Load both Yandex Maps JS API 2.1 and module source code by adding following code
<script src="http:https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<script src="ymap-svg-icon.min.js"></script>- Get access to module functions by using ymaps.modules.require method
ymaps.modules.require(['svgIcon'], function () {
var placemark = new ym.Placemark(
map.getCenter(),
null,
{
preset: 'custom#svgIcon',
iconPath: 'M22-48h-44v43h16l6 5 6-5h16z'
});
map.geoObjects.add(placemark);
});| Parameter | Default value | Decription |
|---|---|---|
iconPath |
SQUARE_PIN | string describing SVG path |
iconPathFill |
#555555 | fill color |
iconLabel |
- | classname, if want to show icon inside marker (for example it might be icon classes from FontAwesome or Glyphicons) |
iconScale |
1 | scale factor |
To use require module svgIcon.pathCollection. Path names: SHIELD, ROUTE, SQUARE_PIN, SQUARE, SQUARE_ROUNDED
http:https://effrenus.github.io/ymap-svg-icons/
- Displaying geoObjects with different icons
ymaps.ready(function () {
var myMap = new ymaps.Map('YMapsID', {
center: [55.7517318022522, 37.61691485505143],
zoom: 10
});
ymaps.modules.require(['svgIcon'], function () {
var p1 = new ym.Placemark(
map.getCenter(), null,
{
preset: 'custom#svgIcon',
iconPath: 'M22-48h-44v43h16l6 5 6-5h16z'
}),
p2 = new ym.Placemark(
map.getCenter(), null,
{
preset: 'custom#svgIcon',
iconPath: 'M24-28.3c-.2-13.3-7.9-18.5-8.3-18.7l-1.2-.8-1.2.8c-2 1.4-4.1 2-6.1 2-3.4 0-5.8-1.9-5.9-1.9l-1.3-1.1-1.3 1.1c-.1.1-2.5 1.9-5.9 1.9-2.1 0-4.1-.7-6.1-2l-1.2-.8-1.2.8c-.8.6-8 5.9-8.2 18.7-.2 1.1 2.9 22.2 23.9 28.3 22.9-6.7 24.1-26.9 24-28.3z',
iconPathFill: '#AAAAAA',
iconLabel: 'fa fa-fort-awesome' // icon inside marker
});
myMap.geoObjects.add([p1, p2]);
});
});Use ymb if re-build is needed.