shinroo/leafletLocationSelect.html

## leafletLocationSelect.html
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
   integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
   crossorigin=""></script>
</head>

<body>
  <div id="map" style="height:350px; width:480px;"></div>
  <text-area id = "lat"></text-area>
  <text-area id = "lng"></text-area>
  <script>
    let map = L.map('map').setView([-1.2921, 36.8219], 13);
    let my_divicon = L.divIcon({
        className: 'arrow_box'
    });
    let marker = L.marker([-1.2921, 36.8219], {
        draggable:true
    });

    L.tileLayer(
      'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        'attribution': 'Map data, copyright <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
      }
    ).addTo(map);

    function addToTextBox(lt,ln){
        document.getElementById('lat').innerHTML = lt;
        document.getElementById('lng').innerHTML = ln;
    }

    // adds listener for drag end event
    marker.on('dragend', function(event){
        let marker = event.target;
        let location = marker.getLatLng();
        let lat = location.lat;
        let lon = location.lng;
        addToTextBox(lat,lon);
    });

    marker.addTo(map);
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
	integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
	crossorigin=""/>
	<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
	integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
	crossorigin=""></script>
	</head>

	<body>
	<div id="map" style="height:350px; width:480px;"></div>
	<text-area id = "lat"></text-area>
	<text-area id = "lng"></text-area>
	<script>
	let map = L.map('map').setView([-1.2921, 36.8219], 13);
	let my_divicon = L.divIcon({
	className: 'arrow_box'
	});
	let marker = L.marker([-1.2921, 36.8219], {
	draggable:true
	});

	L.tileLayer(
	'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	'attribution': 'Map data, copyright <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
	}
	).addTo(map);

	function addToTextBox(lt,ln){
	document.getElementById('lat').innerHTML = lt;
	document.getElementById('lng').innerHTML = ln;
	}

	// adds listener for drag end event
	marker.on('dragend', function(event){
	let marker = event.target;
	let location = marker.getLatLng();
	let lat = location.lat;
	let lon = location.lng;
	addToTextBox(lat,lon);
	});

	marker.addTo(map);
	</script>
	</body>

	</html>