JSFiddle - React, Tailwind, and code Playground

by neveldo

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">
	<h1>Map of USA with some plotted cities</h1>
		<div class="maparea7">
			<div class="map">
				<span>Alternative content for the map</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;
		}

JavaScript

$(function(){
 	$(".maparea7").mapael({
		map : {
			name : "usa_states"
		},
		plots: {
			'ny' : {
				latitude: 40.717079,
				longitude: -74.00116,
				tooltip: {content : "New York"}
			},
			'an' : {
				latitude: 61.2108398, 
				longitude: -149.9019557,
				tooltip: {content : "Anchorage"}
			},
			'sf' : {
				latitude: 37.792032,
				longitude: -122.394613,
				tooltip: {content : "San Francisco"}
			},
			'pa' : {
				latitude: 19.493204,
				longitude: -154.8199569,
				tooltip: {content : "Pahoa"}
			}
		}
	});
});