Skip to content

Instantly share code, notes, and snippets.

@Kamapcuc

Kamapcuc/raphael test

Last active January 3, 2016 11:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Kamapcuc/8457693 to your computer and use it in GitHub Desktop.
Save Kamapcuc/8457693 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
raphael test
<html>
<head>
<script src="http://api-maps.yandex.ru/2.1.4/?lang=ru-RU" type="text/javascript"> </script>
<script type="text/javascript" src="raphael-min.js"></script>
</head>
<body>
<div id="map" style="width:400px; height:400px"></div>
<div id="svgContainer" style="width:25px; height:31px; position: absolute; z-index:2; left:410px; top:200px"></div>
</body>
</html>
<script type="text/javascript">
var raphaelSvg = Raphael(document.getElementById('svgContainer'), 26, 31);
raphaelSvg.path('M 12.5 31 L 16.2 24.5 C 25.4 21.6 28.1 9.9 21 3.4 C 14 -3.2 2.5 0.3 0.3 9.7 C -1.2 16.1 2.6 22.5 8.9 24.5').attr({'fill':'#005baa','stroke-width':'0','stroke':'none','stroke-opacity':'1'});
raphaelSvg.path('M 21.5 12.5 C 21.5 19.4 14 23.8 8 20.3 C 2 16.8 2 8.2 8 4.7 C 13.9 1.3 21.4 5.5 21.5 12.3').attr({'fill':'white','stroke-width':'0','stroke':'none','stroke-opacity':'1'});
raphaelSvg.path('M 13.6 12.7 L 16.6 9.3 L 13.2 10.6 L 7.1 9.3 L 13.6 12.7').attr({'fill':'#ed1c24','stroke-width':'0','stroke':'none','stroke-opacity':'1'});
raphaelSvg.path('M 11.1 12 L 18.9 16 L 11.5 14.5 L 7.6 16 L 11.1 12').attr({'fill':'#005baa','stroke-width':'0','stroke':'none','stroke-opacity':'1'});
raphaelSvg.path('M 14.3 9.1 C 14.3 9.9 13.4 10.4 12.7 10 C 11.9 9.6 11.9 8.6 12.7 8.1 C 13.4 7.7 14.2 8.2 14.2 9').attr({'fill':'#005baa','stroke-width':'0','stroke':'none','stroke-opacity':'1'});
var stringSvg = '<svg id="icon" style="position: absolute; z-index:2000; left:-12.5px; top:-31px; width:25px; height:31px"><g style="stroke-width:0; fill-opacity:$[options.opacity]" transform="scale(0.25)">' +
'<path d="M 50 124 l 14.6 -26.2 A 50 50 0 1 0 35.4 97.8" fill="#005baa"/><circle cx="50" cy="50" r="36" fill="white"/>' +
'<polygon points="54.5,50.75,66.25,37,52.75,42.5,28.5,37.25" fill="#ed1c24" /><polygon points="44.25,48,75.5,63.75,46,57.75,30.5,64" fill="#005baa"/>' +
'<circle cx="52.75" cy="36.25" r="4.25" fill="#005baa"/></g></svg>';
ymaps.ready(init);
function init () {
var map = new ymaps.Map('map', {
center: [56.8734428213519, 53.2776383043983],
zoom: 10
});
placemark = new ymaps.Placemark( [ 56.8734428213519, 53.2776383043983 ] , {}, {
iconLayout : ymaps.templateLayoutFactory.createClass(stringSvg, {})
// iconLayout : ymaps.templateLayoutFactory.createClass(raphaelSvg, {})
});
map.geoObjects.add(placemark);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment