index.html
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
<head>
<link rel='stylesheet' href='//cdn.leafletjs.com/leaflet-0.5.1/leaflet.css'>
<script src='//cdn.leafletjs.com/leaflet-0.5.1/leaflet.js' type='text/javascript'></script>
<script src='https://rawgithub.com/leaflet-extras/leaflet-providers/gh-pages/leaflet-providers.js' type='text/javascript'></script>
<script src='//harrywood.co.uk/maps/examples/leaflet/leaflet-plugins/layer/vector/KML.js' type='text/javascript'></script>
<style>
.rChart {
display: block;
margin-left: auto;
margin-right: auto;
width: 800px;
height: 400px;
}
</style>
</head>
<body >
<div id = 'charta4323c5efe66' class = 'rChart leaflet'></div>
<script>
var spec = {
"dom": "charta4323c5efe66",
"width": 800,
"height": 400,
"urlTemplate": "//{s}.tile.osm.org/{z}/{x}/{y}.png",
"layerOpts": {
"attribution": "Map data<a href=\"//openstreetmap.org\">OpenStreetMap</a>\n contributors, Imagery<a href=\"//mapbox.com\">MapBox</a>"
},
"center": [ 51.505, -0.09 ],
"zoom": 13,
"provider": "Stamen.Watercolor",
"id": "charta4323c5efe66"
}
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")
if (spec.circle2){
for (var c in spec.circle2){
var circle = L.circle(c.center, c.radius, c.opts)
.addTo(map);
}
}
</script>
<script></script>
</body>
</html>