Skip to content

Commit c80917b

Browse files
answerquestanswerquest
committed
kms-radius
1 parent d7fdc84 commit c80917b

2 files changed

Lines changed: 166 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ Ubuntu: `for f in *.csv; do cat "$f" >> all.txt; echo "">> all.txt; done`
5050

5151
[Draw](draw.html) : Draw shapes on a map, and then export your work in geojson shapefile format.
5252

53+
[Kms-radius](map-kms-radius.html) : A simple map with a circle of given kms radius rendered over the map. You can adjust the kms value and copy the url for permalink. Useful if you want to share what a given kms radius over a certain region will look like.
54+
5355
[leaflet-painting](https://server.nikhilvj.co.in/tilemaker/leaflet-painting.html) : Using leaflet tech to make zoomable maps of large images. Can be used for curating, digital tours of art pieces or any image which is large in size but has intricate details. See other images also tiled: [babel](https://server.nikhilvj.co.in/tilemaker/leaflet-painting.html?p=babel), [egnazio](https://server.nikhilvj.co.in/tilemaker/leaflet-painting.html?p=egnazio), [ajantacave](https://server.nikhilvj.co.in/tilemaker/leaflet-painting.html?p=ajantaCave26#3/75.78/-87.10), [amirHamza](https://server.nikhilvj.co.in/tilemaker/leaflet-painting.html?p=amirHamza), [benares](https://server.nikhilvj.co.in/tilemaker/leaflet-painting.html?p=benares), [hydcarpet](https://server.nikhilvj.co.in/tilemaker/leaflet-painting.html?p=hydcarpet#4/82.60/-91.45), [nasaxdf](https://server.nikhilvj.co.in/tilemaker/leaflet-painting.html?p=nasaxdf&z=4#2/63.2/-44.5), [qutub minar](https://server.nikhilvj.co.in/tilemaker/leaflet-painting.html?p=qutub1&z=4), [taj mahal](https://server.nikhilvj.co.in/tilemaker/leaflet-painting.html?p=tajMahal&z=6#1/0/0), [peshwai](https://server.nikhilvj.co.in/tilemaker/leaflet-painting.html?p=templePeshwai&z=5)
5456

5557
[Openstreetmap.in](osm-in.html) : Leaflet map with background map tiles created by folks at openstreetmap.in, having Indian national boundaries as accepted by govt of India

‎map-kms-radius.html‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<title>Radius Map</title>
6+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
7+
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
8+
<style>
9+
html, body { margin: 0; padding: 0; height: 100%; }
10+
#map { width: 100%; height: 100%; }
11+
#controls {
12+
position: absolute;
13+
top: 10px;
14+
left: 50%;
15+
transform: translateX(-50%);
16+
z-index: 1000;
17+
background: white;
18+
padding: 8px 12px;
19+
border-radius: 6px;
20+
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
21+
display: flex;
22+
align-items: center;
23+
gap: 12px;
24+
font-family: sans-serif;
25+
font-size: 14px;
26+
white-space: nowrap;
27+
}
28+
.ctrl-group {
29+
display: flex;
30+
align-items: center;
31+
gap: 6px;
32+
}
33+
.ctrl-group label { margin: 0; color: #444; }
34+
input[type="text"], input[type="number"] {
35+
padding: 4px 6px;
36+
font-size: 14px;
37+
border: 1px solid #ccc;
38+
border-radius: 4px;
39+
}
40+
#latlng-input { width: 170px; }
41+
#latlng-input.error {
42+
border-color: red;
43+
background: #fff0f0;
44+
}
45+
#radius-input { width: 70px; }
46+
#error-msg {
47+
color: red;
48+
font-size: 12px;
49+
display: none;
50+
}
51+
</style>
52+
</head>
53+
<body>
54+
<div id="controls">
55+
<div class="ctrl-group">
56+
<label for="latlng-input">Lat, Lon:</label>
57+
<input id="latlng-input" type="text" placeholder="12.9688, 77.5760"/>
58+
<span id="error-msg">Invalid lat,lon</span>
59+
</div>
60+
<div class="ctrl-group">
61+
<label for="radius-input">Radius (km):</label>
62+
<input id="radius-input" type="number" min="1" value="100"/>
63+
</div>
64+
</div>
65+
<div id="map"></div>
66+
<script>
67+
var params = new URLSearchParams(window.location.search);
68+
var initLat = parseFloat(params.get('lat')) || 18.547487;
69+
var initLon = parseFloat(params.get('lon')) || 73.862801;
70+
var initZoom = parseInt(params.get('zoom')) || 11;
71+
var initRadius = parseFloat(params.get('radius')) || 25;
72+
73+
document.getElementById('radius-input').value = initRadius;
74+
75+
var map = L.map('map').setView([initLat, initLon], initZoom);
76+
77+
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
78+
attribution: '© OpenStreetMap contributors'
79+
}).addTo(map);
80+
81+
var circle = L.circle([initLat, initLon], {
82+
radius: initRadius * 1000,
83+
color: 'blue',
84+
fillColor: 'blue',
85+
fillOpacity: 0.1
86+
}).addTo(map);
87+
88+
// -- Helpers --
89+
90+
function formatLatLng(lat, lon) {
91+
return lat.toFixed(6) + ',' + lon.toFixed(6);
92+
}
93+
94+
function updateLatLngField() {
95+
var c = map.getCenter();
96+
document.getElementById('latlng-input').value = formatLatLng(c.lat, c.lng);
97+
document.getElementById('latlng-input').classList.remove('error');
98+
document.getElementById('error-msg').style.display = 'none';
99+
}
100+
101+
function updateURL() {
102+
var c = map.getCenter();
103+
var p = new URLSearchParams({
104+
lat: c.lat.toFixed(6),
105+
lon: c.lng.toFixed(6),
106+
zoom: map.getZoom(),
107+
radius: document.getElementById('radius-input').value
108+
});
109+
history.replaceState(null, '', '?' + p.toString());
110+
}
111+
112+
function redrawCircle() {
113+
var c = map.getCenter();
114+
var r = parseFloat(document.getElementById('radius-input').value) || 1;
115+
circle.setLatLng(c);
116+
circle.setRadius(r * 1000);
117+
}
118+
119+
function parseLatLon(raw) {
120+
// Strip all spaces, then split on comma
121+
var clean = raw.replace(/\s+/g, '');
122+
var parts = clean.split(',');
123+
if (parts.length !== 2) return null;
124+
var lat = parseFloat(parts[0]);
125+
var lon = parseFloat(parts[1]);
126+
if (isNaN(lat) || isNaN(lon)) return null;
127+
if (lat < -90 || lat > 90) return null;
128+
if (lon < -180 || lon > 180) return null;
129+
return { lat: lat, lon: lon };
130+
}
131+
132+
// -- Event handlers --
133+
134+
map.on('moveend', function() {
135+
updateLatLngField();
136+
redrawCircle();
137+
updateURL();
138+
});
139+
140+
map.on('zoomend', updateURL);
141+
142+
document.getElementById('radius-input').addEventListener('input', function() {
143+
redrawCircle();
144+
updateURL();
145+
});
146+
147+
document.getElementById('latlng-input').addEventListener('keydown', function(e) {
148+
if (e.key !== 'Enter') return;
149+
var result = parseLatLon(this.value);
150+
if (!result) {
151+
this.classList.add('error');
152+
document.getElementById('error-msg').style.display = 'inline';
153+
return;
154+
}
155+
this.classList.remove('error');
156+
document.getElementById('error-msg').style.display = 'none';
157+
map.setView([result.lat, result.lon], map.getZoom());
158+
});
159+
160+
// -- Init --
161+
updateLatLngField();
162+
</script>
163+
</body>
164+
</html>

0 commit comments

Comments
 (0)