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/france_departments.js"></script>
<div class="container">
	<h1>Map with some custom plotted cities and areas</h1>
		<div class="mapcontainer">
			<div class="map">
				<span>Alternative content for the map</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 : "france_departments"
			
			// Set default plots and areas style
			, defaultPlot : {
				attrs : {
					fill: "#004a9b"
					, opacity : 0.6
				}
				, attrsHover : {
					opacity : 1
				}
				, text : {
					attrs : {
						fill : "#505444"
					}
					, attrsHover : {
						fill : "#000"
					}
				}
			}
			, defaultArea: {
				attrs : {
					fill : "#f4f4e8"
					, stroke: "#ced8d0"
				}
				, attrsHover : {
					fill: "#a4e100"
				}
				, text : {
					attrs : {
						fill : "#505444"
					}
					, attrsHover : {
						fill : "#000"
					}
				}
			}
		},
		
		// Customize some areas of the map
		areas: {
			"department-56" : {
				text : {content : "Morbihan", attrs : {"font-size" : 10}}, 
				tooltip: {content : "<b>Morbihan</b> <br /> Bretagne"}
			},
			"department-21" : {
				attrs : {
					fill : "#488402"
				}
				, attrsHover : {
					fill: "#a4e100"
				}
			}
		},
		
		// Add some plots on the map
		plots : {
			// Image plot
			'paris' : {
				type : "image",
				url: "http://www.neveldo.fr/mapael/assets/img/marker.png",
				width: 12,
				height: 40,
				latitude : 48.86, 
				longitude: 2.3444,
				attrs : {
					opacity : 1
				},
				attrsHover: {
					transform : "s1.5"
				}
			},
            // SVG plot
			'Limoge' : {
				type : "svg",
				path: "M 24.267286,27.102843 15.08644,22.838269 6.3686216,27.983579 7.5874348,17.934248 0,11.2331 9.9341158,9.2868473 13.962641,0 l 4.920808,8.8464793 10.077199,0.961561 -6.892889,7.4136777 z",
				width: 30,
				height: 30,
				latitude : 45.8188276, 
				longitude: 1.1060351,
				attrs : {
					opacity : 1
				}
			},
			// Circle plot
			'lyon' : {
				type: "circle",
				size:50,
				latitude :45.758888888889, 
				longitude: 4.8413888888889, 
				tooltip: {content : "<span style=\"font-weight:bold;\">City :</span> Lyon <br /> RhĂ´ne-Alpes"},
				text : {content : "Lyon"}
			},
			// Square plot
			'rennes' : {
				type...