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>Use 'afterInit' option to extend the Raphael paper</h1>
		<div class="mapcontainer">
			<div class="map">
				<span>Alternative content for the map</span>
			</div>
		</div>
</div>

CSS

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",
			defaultArea : {
				attrs : {
					fill : "#1b1b1b",
					stroke : "#000000"
				}
			},
			afterInit : function($self, paper, areas, plots, options) {
				// You are free to call all Raphael.js functions on paper object
				paper.ellipse(100, 200, 100, 60).attr({stroke:"#0067bf", fill:"#63a2d7",opacity:0.4});
				paper.ellipse(300, 150, 80, 100).attr({stroke:"#4aa23c", fill:"#74d763",opacity:0.4});
				paper.path("m 198.57144,240 c 0,0 23.57142,163.57143 143.57142,136.42857").attr({stroke:"#4aa23c", "stroke-width":4});
			}
		},
		plots : {
			'p1' : {
				size:30,
				x:198,
				y:240,
				attrs: {
					fill:"#4aa23c"
				}
			},
			'p2' : {
				size:30,
				x:340,
				y:380,
				attrs: {
					fill:"#4aa23c"
				}
			}
		}
	});
});