JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<div id="map-wrapper">
    <div id="main-map" class="map" style="width:600px"></div>
</div>

JavaScript

jQuery(document).ready(function(){

	var div = jQuery('#main-map');
	var owidth = 1250;
	var oheight = 1228.75;
	var ratio = oheight/owidth;
	var width = div.width();
	var scale = width/owidth;
	var height = width*ratio;

	// creates a raphael paper
	paper = Raphael('main-map', width, height);
	paper.safari();

	// set default attributes for the paths
	attr = { fill:'#E1E1E1', stroke:'#D2D2D2', 'stroke-width':1, 'stroke-linejoin':'round'};
	arr = new Array();
	var on = false;
	var objcol = '';
	
	//-------------------------------------------------------------------------------------------------------------------- drawing
	// loops through each region (in fr_regions_paths.js) and draw the map
	for(var region in paths){		
		// create a path set some data and attributes, rescale it
		var rpath = paper.path(paths[region].path);		

		rpath.data("rname", paths[region].rname); 
		rpath.data("rid",paths[region].rid);
		rpath.attr(attr).scale(scale, scale, 0, 0);
		
	} // EO for region in paths

	// iterate over every city and create a corresponding marker on the map 
	for(var town in cities){		
		var cityname = cities[town].cname;
		console.log(cityname);
		var xy = get_xy(cities[town].lat,cities[town].lng);
		console.log(cityname+ ' x:'+xy.x+' y'+xy.y);

		//console.log(cityname+' '+xy.x+' -- '+xy.y);	
		var city_mark = paper.circle(xy.x, xy.y, 10).attr({fill: 'red', stroke: 'black', 'stroke-width': 1}).scale(scale, scale, 0, 0);
		city_mark.x = xy.x;
		city_mark.y = xy.y;
	} // EO for city in cites

//----------------------------------------------------------------------------------------------------------------------------------------------------
	// coordinates conversion function
	// SEE http://stackoverflow.com/questions/2103924/mercator-longitude-and-latitude-calculations-to-x-and-y-on-a-cropped-map-of-the

	// most west point on the map(lat,lng): 48.037692,-4.729042
	// most east point on the map without corse(lat,lng): 48.967597,8.222809
	// most east point on...