JSFiddle - React, Tailwind, and code Playground

by Gary Stubbenhagen

HTML

<script src="http://www.vincentbroute.fr/mapael/source/js/raphael/raphael-min.js"></script>
<script src="http://www.vincentbroute.fr/mapael/source/js/jquery.mapael.js?v=201411272303"></script>
<script src="http://www.vincentbroute.fr/mapael/source/js/maps/world_countries.js?v=201411272303"></script>
<script src="http://www.vincentbroute.fr/mapael/usecases/world/jquery.knob.js"></script>
<div class="container">
    <div class="map">Alternative content</div>
</div>

CSS

.mapTooltip {
			position : fixed;
			background-color : #474c4b;
			moz-opacity:0.70;
			opacity: 0.70;
			filter:alpha(opacity=70);
			border-radius:10px;
			padding : 10px;
			z-index: 1000;
			max-width: 200px;
			display:none;
			color:#fff;
		}

JavaScript

$(".container").mapael({
    map : {
        name : "world_countries"
    },
    legend: {
        area: {
            slices: [
                {
                    sliceValue: 1,
                    attrs: {
                        fill : "#97e766"
                    }
                },
                {
                    sliceValue: 2,
                    attrs: {
                        fill: "#10B2F9"
                    }
                }
            ]
        }
    },
    areas: {
        "US": {value: "1",
               tooltip: {content:"Tel: 020 3432 6991"}},
        "GB": {value: "1"},
        "AU": {value: "1"},
        "CN": {value: "1"},
        "JP": {value: "1"},
        "CA": {value: "1"},
        "FR": {value: "1"},
        "PL": {value: "1"},
        "NZ": {value: "2"},
        "NO": {value: "2"},
        "SE": {value: "2"},
        "FI": {value: "2"},
        "ES": {value: "2"},
        "IE": {value: "2"},
        "PT": {value: "2"},
        "DK": {value: "2"},
        "NL": {value: "2"},
        "DE": {value: "2"},
        "IT": {value: "2"},
        "CH": {value: "2"},
        "BE": {value: "2"},
        "AT": {value: "2"},
        "CZ": {value: "2"},
        "GL": {value: "2"},
        "IS": {value: "2"},
        "MX": {value: "2"},
        "ZA": {value: "2"},
        "IN": {value: "2"},
        "BR": {value: "2"}
    }
});