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>Use the 'eventHandlers' option to display information about plotted cities in a div on mouseover</h1>
    <div class="myText"><span>Move your cursor over the plots on the map in order to show information in this div.</span></div>
		<div class="mapcontainer">
			<div class="map">
				<span>Alternative content for the map</span>
			</div>
		</div>
</div>

CSS

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

        .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;
        }

        .myText {
            background-color:#343434;
            height:100px;
            padding:10px;
            color:#fff;
            overflow:auto;
            margin:10px;
        }

JavaScript

$(function(){
 	$(".mapcontainer").mapael({
		map : {
			name : "usa_states",
            defaultPlot: {
                size:30,
                eventHandlers: {
                    mouseover: function (e, id, mapElem, textElem, elemOptions) {
                        if (typeof elemOptions.myText != 'undefined') {
                            $('.myText span').html(elemOptions.myText).css({display:'none'}).fadeIn('slow');
                        }
                    }
                }
            }
		},
		plots: {
			'ny' : {
				latitude: 40.717079,
				longitude: -74.00116,
				tooltip: {content : "New York"},
                myText: "Curabitur imperdiet velit eu urna aliquet, vitae aliquam nisi molestie. Etiam in eleifend lectus. Ut id velit dignissim, tristique urna at, sodales massa. Ut ultrices mi at varius elementum. Integer id mi sagittis, congue orci a, tristique neque. Maecenas varius rutrum dui eget lacinia. Suspendisse rutrum, enim auctor ullamcorper vestibulum, enim justo suscipit velit, in pretium dui elit et nisi. Vivamus hendrerit ex tempus, consectetur est eu, maximus quam. Sed congue nunc sed dapibus sagittis. "
			},
			'an' : {
				latitude: 61.2108398, 
				longitude: -149.9019557,
				tooltip: {content : "Anchorage"},
                myText: "Nulla facilisi. Morbi eu tempor purus, ut pretium ante. Ut hendrerit auctor nisl a vehicula. Sed bibendum mattis magna, ut molestie libero imperdiet ac. Donec ac turpis facilisis, faucibus lorem feugiat, tincidunt lacus. Donec euismod, sem euismod sagittis elementum, nulla augue mattis mauris, tincidunt vestibulum purus libero vel tellus. Suspendisse id condimentum dolor, a interdum odio. Donec luctus sed mi at lacinia. "
			},
			'sf' : {
				latitude: 37.792032,
				longitude: -122.394613,
				tooltip: {content : "San Francisco"},
                myText: "Duis id sapien a lorem varius fringilla. Pellentesque leo mauris, pharetra in scelerisque ut, lacinia vitae libero. Quisque eleifend sagittis...