Каталог решений - Определение вхождения координат в заданную область на карте OSM. Взаимодействие JavaScript и 1С

Здравствуйте! 

Хочу поделиться способом интерактивного определения вхождения указанных координат в область с заданным радиусом охвата.

Данный способ реализован с помощью карт OpenStreetMap и библиотеки Leaflet. На инфостарте встречаются десятки статей, описывающих взаимодействие данной карты с 1С. Но т.к. подобных тем я не встречал, делюсь с форумчанами.

Итак, для начала необходимо создать текстовый макет "Карта", где будет храниться выполняемы JS код. Код с комментариями привожу ниже:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="/redirect.php?url=aHR0cHM6Ly91bnBrZy5jb20vbGVhZmxldEAxLjcuMS9kaXN0L2xlYWZsZXQuY3Nz"
		integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
		crossorigin="" />
	<link rel="stylesheet" href="/redirect.php?url=aHR0cHM6Ly91bnBrZy5jb20vbGVhZmxldC1yb3V0aW5nLW1hY2hpbmVAbGF0ZXN0L2Rpc3QvbGVhZmxldC1yb3V0aW5nLW1hY2hpbmUuY3Nz" />
	<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
		integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
		crossorigin=""></script>
	<script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
</head>

<body>
	<div id="map" class="map" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;"></div>

	<script type="text/javascript">

		//Установка начальных координат (широта и долгота и (13 - это зум))
		var map = L.map('map').setView([53.2030600, 50.1594980], 13); // Координаты г. Самара
		var markers = L.layerGroup().addTo(map);
		var circles = L.layerGroup().addTo(map);
		
		L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
			attribution: '&copy; <a href="/redirect.php?url=aHR0cHM6Ly93d3cub3BlbnN0cmVldG1hcC5vcmcvY29weXJpZ2h0">OpenStreetMap</a> contributors'
		}).addTo(map);

		map.on("click", onClick)
		//map.on("dblclick", onClickduble)

		let lat = 0;
		let lng = 0;
		let title = "";

		//Выбор точки на карте
		function onClick(e = e) {
			lat = e.latlng.lat;
			lng = e.latlng.lng;
			refreshMap();
			newMarker(lat, lng)
		}
        
        //Создает новый слой окружности на карте. Вызывается из 1С. 
		function createRadius(latitude, longitude, rad) {
			circles.clearLayers();
			let circle = new L.circle([latitude, longitude], {radius: rad});/**/
			circle.addTo(circles);
			SetViewOffice(latitude, longitude)
		} 
		
        //Отрисовка нового маркера при нажатии на карту 
		function newMarker(latitude, longitude, title) {
			lat = latitude;
			lng = longitude;
			refreshMap()
			SetViewOffice(lat, lng)
			let marker = new L.Marker([lat, lng]);/**/
			marker.bindPopup(title).openPopup();
			marker.addTo(markers);
		}

        //Функция вызывается из 1С. Возвращает координаты установленного маркера
		function returnLatLng() {
			coordinate = {
				lat,
				lng,
				title
			}

			jsonString = JSON.stringify(coordinate)
			return jsonString;
		}

		//function onClickduble(e) {
		//}

		//Очищаем карту
		function refreshMap() {
			markers.clearLayers();
		}

		//Установка отображение на текущем адресе
		function SetViewOffice(latitude, longitude) {
			map.setView([latitude, longitude], 15);
		}
	</script>
</body>
</html>