Build a Web Component with Riot.js and Yandex Maps
Riot is deployed to unknown environments to support comment and forum widgets - it needs to be light and not interfere with other client libraries used on any given site. Learn more from the Riot.js Developer Guide.
For testing Riot I decided to create a reusable Map component. At the time of the test Yandex released a new version of it's mapping API. This was a major release which rewritten code and much improved developer documentation.
Sensible people would've gone with a Facebook & Google powered map component, but I decided to give Riot.js & Yandex Maps a try.
Bootstrap a Riot.js custom tag and Yandex Maps
In the HTML snippet above, I import three script files:
- My custom tag (js/tags/ymap.tag)
- Riot.js + Compiler (the tag will be compiled on the fly)
- Yandex Maps API (the map api)
In addition to the script files I need to mount the tag (on line 6), using the asterisk will mount all of your custom tags - more on this when I return with the RiotControl article on communicating between tags.
Once the tag is mounted we can start using it. The ymap tag comes with default values for zoom, coordinates, width and height. You can set them in the tag call as you do here.
Riot.js custom tag internals
In the markup we've got a root tag ymap which contains the whole component markup, logic and styling:
- On line 3 we create a div element for our container. In addition we append the id option
- On lines 6-9 we set default styles for the component. NOTE: Scoped is optional
- On lines 14-30 we set some defaults and override them if they're specified
- On lines 32-43 we call more initialization that can be done once the individual tag is mounted and ready for use - this includes the map initialization itself
- On lines 45-52 we initialize the map component with container, center point coordinates and zoom level