JSFiddle - React, Tailwind, and code Playground

by Igor Lilliputten

HTML

<link rel="stylesheet" href="https://yastatic.net/bem-components/latest/desktop/bem-components.css">
<script src="https://yastatic.net/bem-components/latest/desktop/bem-components.dev.no-autoinit.js+bemhtml.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol-debug.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol-debug.css">
<div class="container i-bem" data-bem='{"container":{}}'>
  <div id="map" class="container__map map"></div>
</div>

JavaScript

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM(),
    }),
  ],
  target: 'map',
  view: new ol.View({
    center: [685242, 5329434],
    zoom: 10,
  })
});

// container: test button click
modules.define('container', [
    'i-bem-dom',
    'BEMHTML',
    'button',
  ],
  function(provide,
    BEMDOM,
    BEMHTML,
    Button,
    __) {

    var container_proto = {

      onSetMod: {

        js: {

          inited: function() {

            this.__base.apply(this, arguments);

            var
              // Create buttons
              bemjson = {
                elem: 'overlay',
                content: [
                  // Normal button
                  {
                    block: 'button',
                    mods: {
                      id: 'normal',
                      theme: 'islands',
                      size: 'm',
                    },
                    text: 'Normal (not clickable)',
                  },
                  // Button with altClick
                  {
                    block: 'button',
                    mods: {
                      altClick: true,
                      id: 'altClick',
                      theme: 'islands',
                      size: 'm',
                    },
                    text: 'altClick (clickable)',
                  },
                ],
              },
              dom = BEMDOM.append(this._elem('map').domElem, BEMHTML.apply(bemjson)),
              overlay = new ol.Overlay({
                element: dom[0],
                offset: [0, -15],
                positioning: 'bottom-center',
                // stopEvent : false,
              });

            // Add overlay to map
            map.addOverlay(overlay);

            // Set overlay position (and show)
            overlay.setPosition([685242, 5329434]);

          },

        },

      },

    };

    provide(BEMDOM.declBlock(this.name, container_proto, {

      onInit: function() {
				//...