Skip to content

Instantly share code, notes, and snippets.

@janit
Last active August 29, 2015 14:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save janit/a4218aaf7a4415cbd88c to your computer and use it in GitHub Desktop.
Save janit/a4218aaf7a4415cbd88c to your computer and use it in GitHub Desktop.
Riot.js Yandex Map Component
<!doctype html>
<html>
<head>
<title>Riot.js Yandex Map Component</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.0.5/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script>html5.addElements('ymap')</script>
<![endif]-->
</head>
<body>
<ymap mapid="map1" zoom="5" center="0,40" height="240px" width="480px"></ymap>
<ymap mapid="map2" zoom="4" center="-30,-55"></ymap>
<script src="js/tags/ymap.tag" type="riot/tag"></script>
<script src="https://cdn.jsdelivr.net/g/riot@2.0.14(riot.min.js+compiler.min.js)"></script>
<script src="http://api-maps.yandex.ru/2.0-stable/?load=package.full&lang=en-US" type="text/javascript"></script>
<script>
riot.mount('*');
</script>
</body>
</html>
<ymap>
<div id="ymap{{ opts.mapid }}"></div>
<style scoped>
div {
width: 320px;
height: 240px;
}
</style>
<script>
// Define maps state, defaults
var mapReady = false;
var containerId = 'ymap';
var center = [0,0];
var zoom = 3;
if(typeof opts.mapid != 'undefined') {
containerId += opts.mapid;
}
if(typeof opts.center != 'undefined') {
center = opts.center.split(',');
}
if(typeof opts.zoom != 'undefined') {
zoom = opts.zoom;
}
this.on('mount', function() {
if(typeof opts.width != 'undefined') {
foo = document.getElementById(containerId).style.width=opts.width;
}
if(typeof opts.height != 'undefined') {
foo = document.getElementById(containerId).style.height=opts.height;
}
ymaps.ready(initMap);
})
function initMap(){
myMap = new ymaps.Map (containerId, {
center: center,
zoom: zoom
});
}
</script>
</ymap>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment