riot svg map

by jpeter06

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.6.0/riot+compiler.min.js"></script>
<riot-map>
</riot-map>

<script type="riot/tag">
<riot-map>
	<svg
  	version="1.1" viewBox="0 0 580 500" 
        preserveAspectRatio="xMidYMid slice" 
        class="svg-content">
        
   <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:white;stop-opacity:1" />
      <stop offset="100%" style={'stop-color:'+color+';stop-opacity:1'} />
    </linearGradient>
  </defs>
     
    <circle fill="#F7941E" stroke="#231F20" 
    each={ this.datos }
    riot-cx={cx} riot-cy={cy} r="20" opacity="0.6"
    onclick={click}  onmouseover={mouseover}
    stroke-width="3" stroke-miterlimit="10"  />
    
    <path each={ zona in this.zonas }  id={this._riot_id+''+zona.id} d={zona.path}  
    transform={zona.transform} 
    fill={fillColor(zona.id)}  onmouseover={mouseover}
    onmouseout={mouseout}/>
  
  	<polyline points="350,350 400,260 570,260"
  	style="fill:none;stroke:#CCCCCC;stroke-width:1" />
  
  	<polygon points="40,430 240,430 240,450 40,450" fill="url(#grad1)"
  	style="stroke:gray;stroke-width:1" />
  	<text x="250" y="445" fill="white">{this.maxValue} Kwh</text>
  	<use xlink:href={pathId} />
  </svg>
  
  <div if={provincia} class="info">
  	<h4 >{provincia}</h4>
    <span >Kwh: {this.valores[this.idProv]}</span>
  </div>
  
  <style>
  	riot-map polyline{
       vector-effect:non-scaling-stroke;
    }
  	riot-map path{
 			 stroke:transparent;
       stroke-width:1;
       vector-effect:non-scaling-stroke;
		}
  	riot-map path:hover{
 			 stroke:#555;
		}
  	riot-map	.info {
    	position: absolute;
    	right:5px;
    	top:5px;
    	z-index: 1000;
			padding: 6px 8px;
			font: 14px/16px Arial, Helvetica, sans-serif;
			background: white;
			background: rgba(255,255,255,0.8);
			box-shadow: 0 0 15px rgba(0,0,0,0.2);
			border-radius: 5px;
		}
		riot-map	.info h4 {
			margin: 0 0 5px;
		}
  </style>
  
...

CSS

html,body,riot-map{
  width:100%;
  height:100%;
  padding:0px;
  margin:0px;
  background:#888
}

JavaScript

riot.mount("riot-map");