[leaflet] Map 지도 + leaflet // 반경계산 (4)

1. 파일

이건 내가 draw 파일을 보고 직접 응용하여 만든거라서
나중에 git 링크를 올려두도록 하겠다

leaflet.radius.js
leaflet.radius.css

2. 코드

map.jsp

<!-- 반경 --> 
<script src="plugins/draw/sample/leaflet.radius.js"></script>
<link rel="stylesheet" href="plugins/draw/sample/leaflet.radius.css"/>
<script> // navigator.geolocation.getCurrentPosition(function(pos) { 여기 넣기 });
	// 반경계산
	L.Control.circleControl().addTo(mymap);
</script>

leaflet.radius.js

_fireCreatedEvent: function () {
			this._area = L.GeometryUtil.geodesicArea(this._startLatLng);

			if (!this._shape._areaMarker) {
				this._shape._areaMarker = L.marker(this._startLatLng, {
					icon: L.divIcon({
						className: 'leaflet-mouse-marker',
						iconAnchor: [20, 20],
						iconSize: [1, 1]
					}),
					opacity: 0,
					zIndexOffset: this.options.zIndexOffset
				});
				
				this._map.addLayer(this._shape._areaMarker);
				
			}
			
			// 여기부터 (수정부분)
			
			var txt = '반경: '+ L.GeometryUtil.readableDistance(this._radius, this.options.metric, this.options.feet, this.options.nautic);
			this._shape._areaMarker.bindTooltip(txt, {permanent: true, className: "my-label-distance", offset: [10, 0]}).openPopup();
			
			var circle = new L.Circle(this._startLatLng, this._shape.getRadius(), this.options.shapeOptions);
			
			var mMap = this._map;
			var shapeMarker = this._shape._areaMarker;
			
			circle.on('click', function(){
				
				var txt2 = '<div class="img-box"><button type="button" class="remove">'
				txt2 += '<img class="img" src="plugins/draw/sample/images/spritesheet-remove.png" alt="삭제" width="50%;">';
				txt2 += '<img class="img-hover" src="plugins/draw/sample/images/spritesheet-remove2.png" alt="삭제2" width="40%;" style="margin-left: 8px;">';
				txt2 += '</button></div>';
				shapeMarker.bindPopup(txt2 ,{className:"button"}).openPopup();
				
				$('.remove').on('click', function(){
					mMap.removeLayer(circle);
					mMap.removeLayer(shapeMarker);
				})
			})
  
			// 여기까지 (수정부분)
	
			L.Draw.SimpleShape.prototype._fireCreatedEvent.call(this, circle);
		},