JSFiddle - React, Tailwind, and code Playground

by Ahmad Sharif

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/maps/world_countries.js"></script>
<div class="container">
	<h1>Map with links between the plotted cities</h1>
		<div class="mapcontainer">
			<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;
		}

        .container {
            max-width: 1000px;
            margin:auto;
        }

        .map {
            background-color:#cddee0;
            padding:5px;
            position:relative;
            width:1000px;
        }
		body {
			font-family:Helvetica,Arial,sans-serif;
		}
	
		h1 {
			color:#5d5d5d;
			font-size:30px;
		}

JavaScript

$(function(){
	$(".mapcontainer").mapael({
		map : {
			name : "world_countries",
			defaultArea: {
				attrs : {
					fill : "#f4f4e8"
					, stroke: "#ced8d0"
				}
			}
            // Default attributes can be set for all links
            , defaultLink: {
                factor : 0.4
                , attrsHover : {
                    stroke: "#a4e100"
                }
            }
            , defaultPlot : {
                text : {
                    attrs : {
                        fill:"#000"
                    }, 
                    attrsHover : {
                        fill:"#000"
                    }
                }
            }
		},
		plots : {
			'paris' : {
				latitude :48.86, 
				longitude :2.3444, 
				tooltip: {content : "Paris<br />Population: 500000000"}
			},
			'newyork' : {
				latitude :40.667, 
				longitude :-73.833, 
				tooltip: {content : "New york<br />Population: 200001"}
			},
            'sanfrancisco' : {
				latitude: 37.792032,
				longitude: -122.394613,
				tooltip: {content : "San Francisco"}
			},
			'brasilia' : {
				latitude :-15.781682, 
				longitude :-47.924195, 
				tooltip: {content : "Brasilia<br />Population: 200000001"}
			},
			'roma': {
				latitude :41.827637, 
				longitude :12.462732, 
				tooltip: {content : "Roma"}
			},
            'miami' : {
				latitude: 25.789125,
				longitude:  -80.205674,
				tooltip: {content : "Miami"}
			},
            
            // Size=0 in order to make plots invisible
			'tokyo': {
				latitude :35.687418, 
				longitude :139.692306, 
				size:0,
                text : {content : 'Tokyo'}
			},
			'sydney' : {
				latitude :-33.917, 
				longitude :151.167,
                size:0,
                text : {content : 'Sydney'}
			},
			'plot1': {
                latitude :22.906561, 
				longitude :86.840170, 
                size:0,
                text : {content : 'Plot1', position : 'left', margin:5}
			},
			'plot2': {
                latitude :-0.390553,...