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/france_departments.js"></script>
<div class="container">
	<h1>Trigger an 'update' event for refreshing elements</h1>
		<div class="mapcontainer">
           <input type="button" value="Update elements" id="refresh" />
            <input type="button" value="Update elements2" id="refresh2" />
			<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;
		}

		.zoomIn, .zoomOut {
			background-color:#fff;
			border:1px solid #ccc;
			color:#000;
			width:15px;
			height:15px;
			line-height: 15px;
			text-align:center;
			border-radius:3px;
			cursor:pointer;
			position:absolute;
			top : 10px;
			font-weight:bold;
			left : 10px;
			
			-webkit-user-select: none; // For Webkit
			-khtml-user-select: none;
			-moz-user-select: none; // For Mozilla
			-o-user-select: none;
			user-select: none; // Default
		}
		
		.zoomOut {
			top:30px;
		}

        .map {
            background-color:#cddee0;
            margin:10px;
            position:relative;
        }

        .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"
		}
	});
	
	$('#refresh').on('click', function() {
	
		// Update some plots and areas attributes ...
		var updatedOptions = {'areas' : {}, 'plots' : {}};
		
		// add some new plots ...
		var newPlots = {
			"Dijon" : {
				latitude : 47.323056,
				longitude : 5.041944
			}
		}
        
		$(".mapcontainer").trigger('update', [updatedOptions, newPlots, [], {animDuration : 1000}]);
	});

	$('#refresh2').on('click', function() {
	
		// Update some plots and areas attributes ...
		var updatedOptions = {'areas' : {}, 'plots' : {}};

		updatedOptions.plots["Dijon"] = {
			size:60,
			attrs : {fill : "red"}
		};
        
		$(".mapcontainer").trigger('update', [updatedOptions, {}, [], {animDuration : 1000}]);
	});
});