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>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js"></script>
<div class="container">
    	<h1>Use the 'eventHandlers' option and the 'update' event for refreshing areas when the user click on them</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;
		}
		.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;
		}

        .container {
            max-width: 800px;
            margin:auto;
        }
		
		body {
			font-family:Helvetica,Arial,sans-serif;
		}
	
		h1 {
			color:#5d5d5d;
			font-size:30px;
		}

JavaScript

$(function () {
    $(".mapcontainer").mapael({
        map: {
            name: "france_departments",
            zoom: {
                enabled: true
            },
            defaultArea: {
                attrs: {
                    fill: "#5ba4ff",
                    stroke: "#99c7ff",
                    cursor: "pointer"
                },
                attrsHover: {
                    animDuration: 0
                },
                text: {
                    attrs: {
                        cursor: "pointer",
                            "font-size": 10,
                        fill: "#000"
                    },
                    attrsHover: {
                        animDuration: 0
                    }
                },
                eventHandlers: {
                    click: function (e, id, mapElem, textElem) {
                        var newData = {
                            'areas': {}
                        };
                        if (mapElem.originalAttrs.fill == "#5ba4ff") {
                            newData.areas[id] = {
                                attrs: {
                                    fill: "#0088db"
                                }
                            };
                        } else {
                            newData.areas[id] = {
                                attrs: {
                                    fill: "#5ba4ff"
                                }
                            };
                        }
                        $(".mapcontainer").trigger('update', [newData]);
                    }
                }
            }
        },
        areas: {
            "department-29": {
                text: {
                    content: "dblclick",
                    position: "top"
                },
                attrs: {
                    fill: "#0088db"
                },
                tooltip: {
                    content: "Finistère (29)"
                },
              ...