JSFiddle - React, Tailwind, and code Playground

by Eduard Dyckman

HTML

<script src="http://api-maps.yandex.ru/2.1/?load=package.full&lang=ru&mode=debug" type="text/javascript"></script>
<div id="map"></div>

CSS

#map {
    width: 500px;
    height: 500px;
}
.map-marker {
    width: 28px;
    height: 40px;
    background-color: red;
}

CoffeeScript

ymap = null
currentRegion = null
map_el = $("#map")
setupRegions = ->
    ymaps.regions.load('RU',
      lang: 'ru',
      quality: 1
    ).then (result) =>
      containerSize = [map_el.width(), map_el.height()]
      options = {fill: false, strokeColor: "aaaaaaff", strokeWidth: 1, zIndex: 1, zIndexHover: 1}
      regions = result.geoObjects
      regions.options.set options

      #hovering
      regions.events.add 'mouseenter', (event) ->
        target = event.get 'target'
        if target isnt currentRegion
          target.options.set {fill: true, fillColor: "eeeeee60", strokeColor: "ccccccff"}
        true
      regions.events.add 'mouseleave', (event) ->
        target = event.get 'target'
        if target isnt currentRegion
          target.options.set options
        true
        
      ymap.geoObjects.add regions
    , ->
      console.error 'Regions failed', arguments


timeout = null
addPoints = ->
    temp_field = "<div class='map-marker'/>"
    layoutField = ymaps.templateLayoutFactory.createClass temp_field
    balloonField = "<div class='map-balloon'>I am balloon</div>"
    balloonLayout = ymaps.templateLayoutFactory.createClass balloonField
    points = new ymaps.GeoObjectCollection {},
        balloonContentLayout: balloonLayout
        hideIconOnBalloonOpen: false
        openBalloonOnClick: false
        iconLayout: layoutField
        iconShape:
            type: 'Rectangle'
            coordinates: [ [-30, -30], [30, 30] ]
    points.events.add "mouseenter", (event) ->
        console.log "mouse entered!"
        clearTimeout timeout
        geoObject = event.get "target"
        balloon = geoObject.balloon
        balloon.open()
        balloon.autoPan()
        ymap.behaviors.disable( "scrollZoom" )
        ymap.behaviors.disable( "dblClickZoom" )
     points.events.add "mouseleave", (event) ->
        console.log "mouse left!"
        clearTimeout timeout
        setTimeout ->
            geoObject = event.get "target"
           ...