manutheblacker/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
<style id="jsbin-css">
#map { height: 180px; }
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
  <div id="map"></div>

  <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
   integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
   crossorigin=""></script>
<script id="jsbin-javascript">
$(document).ready(function(){
  var map, marker, controls, lat, lon, zoom;

  // set up the map
  map = L.map('map');

  // create the tile layer with correct attribution
  var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
  var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
  var osmLayer = new L.TileLayer(osmUrl, {
    minZoom: 4,
    maxZoom: 19,
    attribution: osmAttrib
  });

  L.control.zoom({
    position: 'topleft'
  }).addTo(map);

  // start the map in East Anglia
  /*Starting Location 52.2742, -0.0068758*/
  lat = 6.36124;
  lon = 2.43405;
  zoom = 16;

  map.setView(new L.LatLng(lat, lon), zoom);
  map.addLayer(osmLayer);

 marker = L.marker([lat, lon]).addTo(map);

});
</script>


<script id="jsbin-source-css" type="text/css">#map { height: 180px; }</script>

<script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function(){
  var map, marker, controls, lat, lon, zoom;

  // set up the map
  map = L.map('map');

  // create the tile layer with correct attribution
  var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
  var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
  var osmLayer = new L.TileLayer(osmUrl, {
    minZoom: 4,
    maxZoom: 19,
    attribution: osmAttrib
  });

  L.control.zoom({
    position: 'topleft'
  }).addTo(map);

  // start the map in East Anglia
  /*Starting Location 52.2742, -0.0068758*/
  lat = 6.36124;
  lon = 2.43405;
  zoom = 16;

  map.setView(new L.LatLng(lat, lon), zoom);
  map.addLayer(osmLayer);

 marker = L.marker([lat, lon]).addTo(map);

});</script></body>
</html>

## jsbin.ruzimub.css
#map { height: 180px; }

## jsbin.ruzimub.js
$(document).ready(function(){
  var map, marker, controls, lat, lon, zoom;

  // set up the map
  map = L.map('map');

  // create the tile layer with correct attribution
  var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
  var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
  var osmLayer = new L.TileLayer(osmUrl, {
    minZoom: 4,
    maxZoom: 19,
    attribution: osmAttrib
  });

  L.control.zoom({
    position: 'topleft'
  }).addTo(map);

  // start the map in East Anglia
  /*Starting Location 52.2742, -0.0068758*/
  lat = 6.36124;
  lon = 2.43405;
  zoom = 16;

  map.setView(new L.LatLng(lat, lon), zoom);
  map.addLayer(osmLayer);

 marker = L.marker([lat, lon]).addTo(map);

});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
	integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
	crossorigin=""/>
	<style id="jsbin-css">
	#map { height: 180px; }
	</style>
	</head>
	<body>
	<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
	<div id="map"></div>

	<!-- Make sure you put this AFTER Leaflet's CSS -->
	<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
	integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
	crossorigin=""></script>
	<script id="jsbin-javascript">
	$(document).ready(function(){
	var map, marker, controls, lat, lon, zoom;

	// set up the map
	map = L.map('map');

	// create the tile layer with correct attribution
	var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
	var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
	var osmLayer = new L.TileLayer(osmUrl, {
	minZoom: 4,
	maxZoom: 19,
	attribution: osmAttrib
	});

	L.control.zoom({
	position: 'topleft'
	}).addTo(map);

	// start the map in East Anglia
	/Starting Location 52.2742, -0.0068758/
	lat = 6.36124;
	lon = 2.43405;
	zoom = 16;

	map.setView(new L.LatLng(lat, lon), zoom);
	map.addLayer(osmLayer);

	marker = L.marker([lat, lon]).addTo(map);

	});
	</script>


	<script id="jsbin-source-css" type="text/css">#map { height: 180px; }</script>

	<script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function(){
	var map, marker, controls, lat, lon, zoom;

	// set up the map
	map = L.map('map');

	// create the tile layer with correct attribution
	var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
	var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
	var osmLayer = new L.TileLayer(osmUrl, {
	minZoom: 4,
	maxZoom: 19,
	attribution: osmAttrib
	});

	L.control.zoom({
	position: 'topleft'
	}).addTo(map);

	// start the map in East Anglia
	/Starting Location 52.2742, -0.0068758/
	lat = 6.36124;
	lon = 2.43405;
	zoom = 16;

	map.setView(new L.LatLng(lat, lon), zoom);
	map.addLayer(osmLayer);

	marker = L.marker([lat, lon]).addTo(map);

	});</script></body>
	</html>