JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://lully.snv.jussieu.fr/gbif/wordpress_pere/tests/leaflet.js"></script>
<script src="http://lully.snv.jussieu.fr/gbif/wordpress_pere/tests/geojson-sample.js"></script>
<script src="http://lully.snv.jussieu.fr/gbif/wordpress_pere/tests/raphael.js"></script>
<html>
<head>
<title>Leaflet debug page</title>
</head>
<body>
<div id="main">
<div id="map2" style="width: 600px; height: 600px;position:relative"></div>
<div id="map" style="width: 600px; height: 600px; border: 1px solid #ccc;position:absolute; top:0;left:0px;z-index: 999;">
</div>
</div>
<button id="populate">Populate with 10 markers</button>
<script type="text/javascript" src="http://lully.snv.jussieu.fr/gbif/wordpress_pere/tests/geojson-sample.js"></script>
</body>
</html>
JavaScript
$(document).ready(function () {
var map = new L.Map('map2', {
center: new L.LatLng(0.78, 102.37),
zoom: 7
});
var geojson = new L.GeoJSON();
geojson.on('featureparse', function(e) {
// you can style features depending on their properties, etc.
var popupText = 'geometry type: ' + e.geometryType + '<br/>';
if (e.layer instanceof L.Path) {
e.layer.setStyle({color: e.properties.color});
popupText += 'color: ' + e.properties.color;
}
e.layer.bindPopup(popupText);
});
geojson.addGeoJSON(geojsonSample);
map.addLayer(geojson);
var paper = Raphael($("#map")[0], 600, 600);
var c = paper.circle(50, 50, 40);
c.attr({fill: '#9cf', stroke: '#ddd', 'stroke-width': 5})
c.node.id='my_circle';
// $c=$(c);
// $c.attr('id','my_circle').css('stroke-width',10)
$('#my_circle').css( {'stroke-width': 10, 'z-index' : 20000})
// $('#map').appendTo($('svg')[0])
})