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/france_departments.js"></script>
<div class="container">
	<h1>Map with a legend for 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>
</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 : "france_departments",
			defaultArea: {
				attrs : {
					stroke : "#fff", 
					"stroke-width" : 1
				},
				attrsHover : {
					"stroke-width" : 2
				}
			}
		},
		legend : {
			area : {
				title :"Population of France by department", 
				slices : [
					{
						max :300000, 
						attrs : {
							fill : "#97e766"
						},
						label :"Less than de 300 000 inhabitants"
					},
					{
						min :300000, 
						max :500000, 
						attrs : {
							fill : "#7fd34d"
						},
						label :"Between 100 000 and 500 000 inhabitants"
					},
					{
						min :500000, 
						max :1000000, 
						attrs : {
							fill : "#5faa32"
						},
						label :"Between 500 000 and 1 000 000 inhabitants"
					},
					{
						min :1000000, 
						attrs : {
							fill : "#3f7d1a"
						},
						label :"More than 1 million inhabitants"
					}
				]
			}
		},
		areas: {
			"department-59": {
				value: "2617939",
				href : "#",
				tooltip: {content : "<span style=\"font-weight:bold;\">Nord (59)</span><br />Population : 2617939"}
			},
			"department-75": {
				value: "2268265",
				href : "#",
				tooltip: {content : "<span style=\"font-weight:bold;\">Paris (75)</span><br />Population : 2268265"}
			},
			"department-13": {
				value: "2000550",
				href : "#",
				tooltip: {content : "<span style=\"font-weight:bold;\">Bouches-du-Rhône (13)</span><br />Population : 2000550"}
			},
			"department-69": {
				value: "1756069",
				href : "#",
				tooltip: {content : "<span style=\"font-weight:bold;\">Rhône (69)</span><br />Population : 1756069"}
			},
			"department-92": {
				value: "1590749",
				href : "#",
				tooltip: {content : "<span style=\"font-weight:bold;\">Hauts-de-Seine (92)</span><br />Population : 1590749"}
			},
			"department-93": {
				value: "1534895",
				href : "#",
				tooltip: {content : "<span style=\"font-weight:bold;\">Seine-Saint-Denis (93)</span><br />Population :...