nfreear/leaflet-circle.js.html

## leaflet-circle.js.html
<!doctype html> <title> Leaflet.JS — radius </title>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin="" />

<style> #mapid { height: 180px; } body { font: 1rem sans-serif; color: #333; margin: 0 1rem; } h1 { font-weight: 400; margin: 0; } </style>

<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
  integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
  crossorigin=""></script>

<h1> Leaflet.JS &mdash; radius </h1>


<div id="mapid"> <h2> Loading ... </h2> </div>


<script>

const CFG = {
  title:  param(/t=([\w]+)/, 'Milton Keynes MK7'),
  lat:    param(/lat=(-?\d+)/, 52.025), // London:  51.505, -0.09;
  long:   param(/lng=(-?\d+)/, -0.710),
  zoom:   param(/z=(\d+)/, 7), // 13,
  radius: param(/r=(\d+)/, 265.54), // 281.64), // Kilometres.
  height: param(/h=(\d+)/, 790),    // Pixels
  milesPerKm: 0.62137,
  accessToken: 'your.mapbox.access.token',
  tileUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}',
  MB_tileUrl: 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}'
}

CFG.miles = parseInt(CFG.milesPerKm * CFG.radius);
CFG.desc = `A radius of ${ CFG.radius } km (${ CFG.miles } miles) centred on ${ CFG.lat },${ CFG.long }.`;

document.querySelector('#mapid').style.height = `${ CFG.height }px`;

const mymap = L.map('mapid').setView([ CFG.lat, CFG.long ], CFG.zoom);

L.tileLayer(CFG.tileUrl, {
	attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
	maxZoom: 18,
	id: 'mapbox.streets',
  foo: null,
	accessToken: CFG.accessToken,
}).addTo(mymap);

const marker = L.marker([ CFG.lat, CFG.long ]).addTo(mymap);

const circle = L.circle([ CFG.lat, CFG.long ], {
	color: 'orange',
	fillColor: '#ddd',
	fillOpacity: 0.45,
	radius: CFG.radius * 1000,
}).addTo(mymap);

circle.bindPopup(`<h3>${ CFG.title }</h3> <p>${ CFG.desc }</p>`);

function param (re, def) {
  const M = location.href.match(re);
  return M ? M[ 1 ] : def || null;
}

console.warn('Map config:', CFG)

</script>


<pre>

NDF | 23-Oct-2019 | https://gist.github.com/nfreear/a803438963b1c2babacfaf96621a187b

 * https://leafletjs.com/examples/quick-start/
 * https://freemaptools.com/convert-uk-postcode-to-lat-lng.htm
 * https://google.com/search?q=175+miles+in+km

</pre>
	<!doctype html> <title> Leaflet.JS — radius </title>

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
	integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
	crossorigin="" />

	<style> #mapid { height: 180px; } body { font: 1rem sans-serif; color: #333; margin: 0 1rem; } h1 { font-weight: 400; margin: 0; } </style>

	<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
	integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
	crossorigin=""></script>

	<h1> Leaflet.JS — radius </h1>


	<div id="mapid"> <h2> Loading ... </h2> </div>


	<script>

	const CFG = {
	title: param(/t=([\w]+)/, 'Milton Keynes MK7'),
	lat: param(/lat=(-?\d+)/, 52.025), // London: 51.505, -0.09;
	long: param(/lng=(-?\d+)/, -0.710),
	zoom: param(/z=(\d+)/, 7), // 13,
	radius: param(/r=(\d+)/, 265.54), // 281.64), // Kilometres.
	height: param(/h=(\d+)/, 790), // Pixels
	milesPerKm: 0.62137,
	accessToken: 'your.mapbox.access.token',
	tileUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}',
	MB_tileUrl: 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}'
	}

	CFG.miles = parseInt(CFG.milesPerKm * CFG.radius);
	CFG.desc = `A radius of ${ CFG.radius } km (${ CFG.miles } miles) centred on ${ CFG.lat },${ CFG.long }.`;

	document.querySelector('#mapid').style.height = `${ CFG.height }px`;

	const mymap = L.map('mapid').setView([ CFG.lat, CFG.long ], CFG.zoom);

	L.tileLayer(CFG.tileUrl, {
	attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
	maxZoom: 18,
	id: 'mapbox.streets',
	foo: null,
	accessToken: CFG.accessToken,
	}).addTo(mymap);

	const marker = L.marker([ CFG.lat, CFG.long ]).addTo(mymap);

	const circle = L.circle([ CFG.lat, CFG.long ], {
	color: 'orange',
	fillColor: '#ddd',
	fillOpacity: 0.45,
	radius: CFG.radius * 1000,
	}).addTo(mymap);

	circle.bindPopup(`<h3>${ CFG.title }</h3> <p>${ CFG.desc }</p>`);

	function param (re, def) {
	const M = location.href.match(re);
	return M ? M[ 1 ] : def \|\| null;
	}

	console.warn('Map config:', CFG)

	</script>



	<pre>

	NDF \| 23-Oct-2019 \| https://gist.github.com/nfreear/a803438963b1c2babacfaf96621a187b

	* https://leafletjs.com/examples/quick-start/
	* https://freemaptools.com/convert-uk-postcode-to-lat-lng.htm
	* https://google.com/search?q=175+miles+in+km

	</pre>