JSFiddle - React, Tailwind, and code Playground

by neveldo

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>
<div class="container">
	<h1>Setting an image as a plot - jQuery Mapael example</h1>
		<div class="maparea4">
			<div class="map">
				<span>Alternative content for the map</span>
			</div>
		</div>
</div>

JavaScript

$(function(){

	$(".maparea4").mapael({

		map : {
			name : "france_departments",
			defaultArea : {
				attrs : {
					fill : "#1b1b1b",
					stroke : "#000000"
				}
			},
			afterInit : function($self, paper, areas, plots, options) {
				var mapConf = $.fn.mapael.maps[this.name]
					, coords = {};
				
				for (var id in options.images) {
					coords = mapConf.getCoords(options.images[id].latitude, options.images[id].longitude);
					paper.image(options.images[id].src, coords.x - options.images[id].width / 2, coords.y - options.images[id].height / 2, options.images[id].width, options.images[id].height);
				}
			}
		},
        'images' : {
            'image1' : {
                'src' : 'http://www.neveldo.fr/mapael/cross-icon.png',
                'latitude' : '47.995833',
                'longitude' : '-4.097778',
                'width':17,
                'height':15
            },
            'image2' : {
                'src' : 'http://www.neveldo.fr/mapael/cross-icon.png',
                'latitude' : '48.86',
                'longitude' : '2.344444',
                'width':17,
                'height':15
            }
        }
	});
});