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/usa_states.js"></script>
	<div class="container">
		<h2>Map with multiple plotted cities legends that handle different criteria</h2>
		<div class="mapcontainer">
			<div style="margin:auto;">
				<div class="population" style="float:left;margin-right:40px;">
					<span>Alternative content for the legend</span>
				</div>
				<div class="density" style="float:left;">
					<span>Alternative content for the legend2</span>
				</div>
				<div style="clear:both;"></div>
			</div>
			<div class="map">
				<span>Alternative content for the map</span>
			</div>

		</div>
		
	</div>

CSS

.map {
        margin-bottom:10px;
        }

        /* CSS for the tooltip displayed on mousehover on elements */
        .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;
		}

        h1, h2 {
            color: #f4f4e8;
        }

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

        body {
            background-color:#00a1fe;
			font-family:Helvetica,Arial,sans-serif;
		}

JavaScript

$(function(){

 	$(".mapcontainer").mapael({
		map : {
			name : "usa_states"
            , defaultArea: {
				attrs : {
					fill : "#f4f4e8"
					, stroke: "#00a1fe"
				}
				, attrsHover : {
					fill: "#a4e100"
				}
            }
		},
        legend: {
            plot: [
				{
                    labelAttrs:{
                        fill : "#f4f4e8"
                    },
                    titleAttrs:{
                        fill : "#f4f4e8"
                    },
					cssClass: 'population',
					mode: 'horizontal',
					title: "Population",
					marginBottomTitle:5,
					slices: [{
						size:15,
						legendSpecificAttrs: {
							fill:'#00a1fe',
							stroke:'#f4f4e8',
							"stroke-width" : 2
						},
						label: "< 10 000",
						max: "10000"
					}, {
						size:30,
						legendSpecificAttrs: {
							fill:'#00a1fe',
							stroke:'#f4f4e8',
							"stroke-width" : 2
						},
						label: "> 10 000 and < 100 000",
						min: "10000",
						max: "100000"
					}, {
						size:50,
						legendSpecificAttrs: {
							fill:'#00a1fe',
							stroke:'#f4f4e8',
							"stroke-width" : 2
						},
						label: "> 100 000",
						min: "100000"
					}]
				}
				, {
                   labelAttrs:{
                        fill : "#f4f4e8"
                    },
                    titleAttrs:{
                        fill : "#f4f4e8"
                    },
					cssClass: 'density',
					mode: 'horizontal',
					title: "Density",
					marginBottomTitle:5,
					slices: [{
						label: "< 50",
						max: "50",
						attrs: {
							fill: "#fef500"
						},
						legendSpecificAttrs: {
							r: 25
						}
					}, {
						label: "> 50 and < 500",
						min: "50",
						max: "500",
						attrs: {
							fill: "#fe6c00"
						},
						legendSpecificAttrs: {
							r: 25
						}
					}, {
						label: "> 500",
						min: "500",
						attrs: {
							fill: "#dc0000"
						},
						legendSpecificAttrs: {
							r: 25
						}
					}]
				}
            ]
       ...