JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->

<div id="map" style="width: 600px; height: 400px"></div><br>
<div id="narrative"></div>

<script src="http://leafletjs.com/dist/leaflet.js"></script>
<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
<script src="https://raw.github.com/dynmeth/RaphaelLayer/master/dist/rlayer.js"></script>

<script>
    var map = L.map('map').setView([51.505, -0.09], 13);
    narrativeDiv = document.getElementById('narrative');

    L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png').addTo(map);

    L.marker([51.5, -0.09]).addTo(map);
    L.circle([51.508, -0.11], 500).addTo(map);
    L.polygon([ [51.509, -0.08], [51.503, -0.06], [51.51, -0.047] ]).addTo(map);
    new L.CircleMarker([51.509437, -0.091757]).setRadius(10).addTo(map);

    setTimeout(function() {
        narrativeDiv.innerHTML = 'L.marker, L.circle, L.polygon, and L.circleMarker render fine.<br>Panning/zooming work as expected.';
        panAndZoomMap();
    }, 1000);

    setTimeout(function() {
        narrativeDiv.innerHTML = 'Now we add an R.Marker.<br>Now everything but the L.marker remains in a static position when panning/zooming.';
        map.addLayer(new R.Marker([51.50909, -0.086843]));
        panAndZoomMap();
    }, 7000);


    function panAndZoomMap() {
        map.zoomOut(1);
        setTimeout(function() {
            map.panTo([51.50909, -0.086843]);
        }, 1000);
        setTimeout(function() {
            map.zoomIn(1);
        }, 2000);
        setTimeout(function() {
            map.panTo([51.5, -0.09]);
        }, 3000);
    }
</script>