Leaflet JS

by Wolly

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<div id="service_radius"></div>

CSS

body,html{
	width:100%;
	height:100%;
	margin:0px;
}

#service_radius{
	width:100%;
	height:100%;
}

JavaScript

var mymap = L.map('service_radius').setView([48.33213300297194, 11.006853646301373], 9.5);

L.tileLayer(
  'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png', 
	'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
	{
		maxZoom: 15,
		minZoom: 8,
		center: [48.349279398877435, 10.974532591012913],
		attribution: 'Map data &copy;'
			+'OpenStreetMap contributors, '
  }
).addTo(mymap);

L.circle([48.349279398877435, 10.974532591012913], {radius: 45000}).addTo(mymap);

L.marker([48.349279398877435, 10.974532591012913]).addTo(mymap).bindPopup('Braumüller Wohnungsauflösung');