<script src='leaflet/external/leaflet.js' type='text/javascript'></script>
<script src='leaflet/external/leaflet-providers.js' type='text/javascript'></script>
<script src='leaflet/external/Control.FullScreen.js' type='text/javascript'></script>

<style>
.rChart {
  display: block;
  margin-left: auto; 
  margin-right: auto;
  width: 800px;
  height: 400px;
}  
</style>

<div id = 'chart435104ff948' class = 'rChart leaflet'></div>    
<script>

var spec = { "dom": "chart435104ff948", "width": 800, "height": 400, "urlTemplate": "http://{s}.tile.osm.org/{z}/{x}/{y}.png", "layerOpts": { "attribution": "Map dataOpenStreetMap\n contributors, ImageryMapBox" }, "center": [ 51.505, -0.09 ], "zoom": 13, "id": "chart435104ff948" }

var map = L.map(spec.dom, spec.mapOpts)

map.setView(spec.center, spec.zoom);

if (spec.provider){
  L.tileLayer.provider(spec.provider).addTo(map)    
} else {
      L.tileLayer(spec.urlTemplate, spec.layerOpts).addTo(map)
}
 
L

.marker([ 51.5, -0.09 ]) .addTo( map ) .bindPopup("

Hi. I am a popup

Hi. I am another popup

if (spec.circle2){
  for (var c in spec.circle2){
    var circle = L.circle(c.center, c.radius, c.opts)
     .addTo(map);
  }
}

<script></script>