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/usa_states.js"></script>
<div class="container">
	<h1>Map with a legend for images</h1>
		<div class="mapcontainer">
			<div class="map">
				<span>Alternative content for the map</span>
			</div>
            <div class="plotLegend">	<span>Alternative content for the legend</span>
    
            </div>
            
		</div>
</div>

CSS

.map {
            background-color:#cddee0;
        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;
		}

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

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

JavaScript

$(function(){
 	$(".mapcontainer").mapael({
		map : {
			name : "usa_states"
            , defaultArea: {
				attrs : {
					fill : "#f4f4e8"
					, stroke: "#ced8d0"
				}
				, attrsHover : {
					fill: "#a4e100"
				}
            }
		},
        legend: {
            plot: {
                title: "American cities",
                slices: [{
                    label: "Value 1",
                    sliceValue: "Value 1",
                    type: "image",
					url: "http://www.neveldo.fr/mapael/assets/img/marker.png",
                    width:18,
                    height:60,
                    attrsHover :{
                        transform : "s1.5"
					}
                }, {
                    label: "Value 2",
                    sliceValue: "Value 2",
                    type: "image",
					url: "http://www.neveldo.fr/mapael/assets/img/marker1.png",
                    width:18,
                    height:60,
                    attrsHover :{
                        transform : "s1.5"
					}
                }]
            }
        },
		plots: {
			'ny' : {
				latitude: 40.717079,
				longitude: -74.00116,
				tooltip: {content : "New York"},
                value: "Value 1"
			},
			'an' : {
				latitude: 61.2108398, 
				longitude: -149.9019557,
				tooltip: {content : "Anchorage"},
                value: "Value 2"
			},
			'sf' : {
				latitude: 37.792032,
				longitude: -122.394613,
				tooltip: {content : "San Francisco"},
                value: "Value 1"
			},
			'pa' : {
				latitude: 19.493204,
				longitude: -154.8199569,
				tooltip: {content : "Pahoa"},
                value: "Value 2"
			},
            'la' : {
				latitude: 34.025052,
				longitude: -118.192006,
				tooltip: {content : "Los Angeles"},
                value: "Value 1"
			},
            'dallas' : {
				latitude: 32.784881,
				longitude: -96.808244,
				tooltip: {content : "Dallas"},
                value: "Value 2"
			},
            'miami' : {
				latitude:...