JSFiddle - React, Tailwind, and code Playground

by neveldo

HTML

<script src="https://cdn.rawgit.com/DmitryBaranovskiy/raphael/v2.1.4/raphael-min.js"></script>
<script src="https://cdn.rawgit.com/neveldo/jQuery-Mapael/1.1.0/js/jquery.mapael.js"></script>
<script src="https://cdn.rawgit.com/neveldo/jQuery-Mapael/1.1.0/js/maps/world_countries.js"></script>
<div class="container">
	<h1>Map with a legend for plotted cities and areas</h1>
		<div class="mapcontainer">
			<div class="map">
				<span>Alternative content for the map</span>
			</div>
			<div class="areaLegend">
				<span>Alternative content for the legend</span>
			</div>
			<div class="plotLegend">
				<span>Alternative content for the legend</span>
			</div>
		</div>
</div>

CSS

.mapTooltip {
			position : fixed;
			background-color : #fff;
			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:#343434;
		}

        .container {
            max-width: 800px;
            margin:auto;
        }

		body {
			font-family:Helvetica,Arial,sans-serif;
		}
	
		h1 {
			color:#5d5d5d;
			font-size:30px;
		}

JavaScript

$(function(){
	$(".mapcontainer").mapael({
		map : {
			name : "world_countries",
			defaultArea: {
				attrs : {
					stroke : "#fff", 
					"stroke-width" : 1
				}
			}
		},
		legend : {
			area : {
				title :"Countries population", 
				slices : [
					{
						max :5000000, 
						attrs : {
							fill : "#6aafe1"
						},
						label :"Less than 5 millions inhabitants"
					},
					{
						min :5000000, 
						max :10000000, 
						attrs : {
							fill : "#459bd9"
						},
						label :"Between 5 millions and 10 millions inhabitants"
					},
					{
						min :10000000, 
						max :50000000, 
						attrs : {
							fill : "#2579b5"
						},
						label :"Between 10 millions and 50 millions inhabitants"
					},
					{
						min :50000000, 
						attrs : {
							fill : "#1a527b"
						},
						label :"More than 50 millions inhabitants"
					}
				]
			},
			plot :{
				title: "Cities population"
				, slices : [
					{
						max :500000, 
						attrs : {
							fill : "#f99200"
						},
						attrsHover :{
							transform : "s1.5",
							"stroke-width" : 1
						}, 
						label :"less than 500 000 inhabitants", 
						size : 10
					},
					{
						min :500000, 
						max :1000000, 
						attrs : {
							fill : "#f99200"
						},
						attrsHover :{
							transform : "s1.5",
							"stroke-width" : 1
						}, 
						label :"Between 500 000 and 1 million inhabitants", 
						size : 20
					},
					{
						min :1000000, 
						attrs : {
							fill : "#f99200"
						},
						attrsHover :{
							transform : "s1.5",
							"stroke-width" : 1
						}, 
						label :"More than 1 million inhabitants", 
						size : 30
					}
				]
			}
		},
		plots : {
			'paris' : {
				latitude :48.86, 
				longitude :2.3444, 
				value : 500000000, 
				tooltip: {content : "Paris<br />Population: 500000000"}
			},
			'newyork' : {
				latitude :40.667, 
				longitude :-73.833, 
				value : 200001, 
				tooltip: {content : "New york<br />Population:...