JSFiddle - React, Tailwind, and code Playground

by Cam Gould

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://www.neveldo.fr/mapael/source/js/maps/france_departments.js"></script>
<div class="container">
    	<h1>Map with a legend for plotted cities</h1>

    <div class="mapcontainer">
        <div class="map">	<span>Alternative content for the map</span>

        </div>
        <div class="myLegend">	<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;
		}
		.myLegend {
		    width:400px;
            border:1px solid #bebeb4;
            background-color:#f4f4e8;
            width:600px;
            padding:10px;
		}
        .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: {
                attrsHover: {
                    fill: "#343434",
                    stroke: "#5d5d5d",
                        "stroke-width": 1,
                        "stroke-linejoin": "round"
                }
            }
        },
        legend: {
            plot: {
                cssClass: 'myLegend',
                labelAttrs: {
                    fill: "#4a4a4a"
                },
                titleAttrs: {
                    fill: "#4a4a4a"
                },
                marginBottom: 20,
                marginLeft: 30,
                hideElemsOnClick: {
                    opacity: 0
                },
                title: "French cities population",
                slices: [{
                    size: 4,
                    type: "circle",
                    max: 20000,
                    attrs: {
                        fill: "#89ff72"
                    },
                    label: "Less than 20000 inhabitants"
                }, {
                    size: 6,
                    type: "circle",
                    min: 20000,
                    max: 100000,
                    attrs: {
                        fill: "#fffd72"
                    },
                    label: "Between 20000 and 100000 inhabitants"
                }, {
                    size: 20,
                    type: "circle",
                    min: 100000,
                    max: 200000,
                    attrs: {
                        fill: "#ffbd54"
                    },
                    label: "Between 100000 et  200000 inhabitants"
                }, {
                    size: 40,
                    type: "circle",
                    min: 200000,
                    attrs: {
                        fill: "#ff5454"
                    },
                    label: "More than 200000 inhabitants"
           ...