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>
<script src="http://www.neveldo.fr/mapael/source/js/mousewheel/jquery.mousewheel.js" charset="utf-8" ></script>

<div class="container">
	<h1>Playing with the zoom features : focus on areas, zoom on scroll - jQuery Mapael example</h1>
		<div class="maparea2">
           <input type="button" value="Focus on Paris area" id="gotoparis" />
		   <input type="button" value="Focus on Lyon area" id="gotolyon" />
		   <input type="button" value="Clear zoom" id="clearzoom" />
			<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 {
			position:relative;
		}

JavaScript

$(function(){
	$maparea2 = $(".maparea2");
	$maparea2.mapael({
		map : {
			name : "france_departments"
			, zoom: {
				enabled: true,
				maxLevel : 10
			}
			, defaultPlot : {
				attrs : {
					opacity : 0.6
				}
			}
		},
		areas: {
			"department-56" : {
				text : {content : "56"}, 
				tooltip: {content : "Morbihan (56)"}
			}
		},
		plots : {
			'paris' : {
				latitude : 48.86, 
				longitude: 2.3444
			},
			'lyon' : {
				type: "circle",
				size:50,
				latitude :45.758888888889, 
				longitude: 4.8413888888889, 
				value : 700000, 
				href : "http://fr.wikipedia.org/wiki/Lyon",
				tooltip: {content : "<span style=\"font-weight:bold;\">City :</span> Lyon"},
				text : {content : "Lyon"}
			},
			'rennes' : {
				type :"square",
				size :20,
				latitude : 48.114166666667, 
				longitude: -1.6808333333333, 
				tooltip: {content : "<span style=\"font-weight:bold;\">City :</span> Rennes"},
				text : {content : "Rennes"},
				href : "http://fr.wikipedia.org/wiki/Rennes"
			}
		}
	});
	
	// Zoom on mousewheel with mousewheel jQuery plugin
	$maparea2.on("mousewheel", function(e) {
		if (e.deltaY > 0)
			$maparea2.trigger("zoom", $maparea2.data("zoomLevel") + 1);
		else
			$maparea2.trigger("zoom", $maparea2.data("zoomLevel") - 1);
			
		return false;
	});
	
	$('#gotolyon').on('click', function() {
		// Translate latitude,longitude of Lyon to x,y coordinates
		var coords = $.fn.mapael.maps["france_departments"].getCoords(45.758888888889, 4.8413888888889);
		$maparea2.trigger('zoom', [5, coords.x, coords.y]);
	});
	
	$('#gotoparis').on('click', function() {
		// Translate latitude,longitude of Paris to x,y coordinates
		var coords = $.fn.mapael.maps["france_departments"].getCoords(48.114167, 2.3444);
		$maparea2.trigger('zoom', [10, coords.x, coords.y]);
	});
	
	$('#clearzoom').on('click', function() {
		$maparea2.trigger('zoom', [0]);
	});
});