JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.neveldo.fr/mapael/source/js/raphael/raphael-min.js"></script>
<script src="http://www.neveldo.fr/mapael/source/js/jquery.mapael.js"></script>
<script src="http://startupmedia.net/clients/new_maps/L1/js/maps/world_countries.js"></script>
<div class="container">
<h2>Map LG1</h2>
<div class="maparea6">
<div class="map" style="margin: 0px 0 0;width: 75%;float: left;background-color: #ddd;">
<span>Alternative content for the map</span>
</div>
<div class="cityFrance">
<span>Alternative content for the menu</span>
</div>
<div class="areatit">Areas</div>
<div class="areaLegend">
<span>Alternative content for the legend</span>
</div>
</div>
</div>
CSS
<style type="text/css">
.mapTooltip {
position:fixed;
background:#777;
moz-opacity:1;
opacity: 1;
filter:alpha(opacity=70);
border-radius:5px;
padding : 1px;
z-index: 1000;
width: 225px;
display:none;
color:#343434;
-webkit-box-shadow: 3px 3px 3px 0px rgba(50, 50, 50, 0.3);
-moz-box-shadow: 3px 3px 3px 0px rgba(50, 50, 50, 0.3);
box-shadow: 3px 3px 3px 0px rgba(50, 50, 50, 0.3);
}
.cityFrance {
background-color:#343434;
border-radius:10px;
width:20%;
float:left;margin-left: 10px;
}
.areaLegend{
border-radius:10px;
width:20%;
float:left;overflow:scroll;height:180px;margin-left: 10px;}
.areatit{
border-radius:10px;
width:20%;float:left;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 18px;
line-height: normal;
font-family: Arial;;margin-left: 10px;margin-top:10px;
}
.mapLegend {
}
h1 {
font-size:30px;
color:#3d3d3d;
margin:auto;
margin-top:50px;
}
h2 {
font-size:22px;
color:#3d3d3d;
margin-top:50px;
}
.container {
margin:auto;
width:80%;
}
.zoomIn, .zoomOut {
background-color:#fff;
border:1px solid #ccc;
color:#000;
width:15px;
height:15px;
line-height: 15px;
text-align:center;
border-radius:3px;
cursor:pointer;
position:absolute;
top : 10px;
font-weight:bold;
left : 10px;
-webkit-user-select: none; // For Webkit
-khtml-user-select: none;
-moz-user-select: none; // For Mozilla
-o-user-select: none;
user-select: none; // Default
}
.zoomOut {
top:30px;
}
.map {
position:relative;
}
JavaScript
$(function(){
$(".maparea6").mapael({
map : {
name : "world_countries",
zoom: {
enabled: true,
maxLevel : 10
},
defaultPlot: {
size: 10
},
defaultArea: {
attrs : {
stroke : "#000",
"stroke-width" : 0.5
}
}
},
legend : {
area : {
display : true,
title :"",
slices : [
{
max :63,
min :61,
attrs : {
fill : "#f0eeb5"
},
label :"AZUL by moussy"
}
,
{
max :11,
min :9,
attrs : {
fill : "#f0eeb5"
},
label :"艾度"
}
,
{
max :105,
min :103,
attrs : {
fill : "#97d0a7"
},
label :"必品阁"
}
,
{
max :2,
attrs : {
fill : "#f0eeb5"
},
label :"bread in butter"
}
,
{
max :111,
min :109,
attrs : {
fill : "#97d0a7"
},
label :"茶国"
}
,
{
max :144,
min :142,
attrs : {
fill : "#f0eeb5"
},
label :"Calvin Klein Jeans"
}
,
{
max :90,
min :88,
attrs : {
fill : "#f0eeb5"
},
label :"Charles & Keith"
}
,
{
max :75,
min :73,
attrs : {
fill : "#f0eeb5"
},
label :"CHOCOOLATE"
}
,
{
max :33,
min :31,
attrs : {
fill : "#f0eeb5"
},
label :"Calvin Klein Performance"
}
,
{
max :126,
min :124,
attrs : {
fill : "#f0eeb5"
},
label :"DAZZLE"
}
,
{
max :135,
min :133,
attrs : {
fill : "#f0eeb5"
},
label :"DKNY JEANS"
}
,
{
max :99,
min :91,
attrs : {
fill : "#97d0a7"
},
label :"歌帝梵"
}
,
{
max :153,
min :151,...