1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="utf-8" /> 5<title>Map Radius Calculator</title> 6<meta name="description" content="Draw a Radius around a map location. Draw a radius circle around a location in Google Maps to show a distance from that point in all directions." /> 7<meta name="keywords" content="map, tool, free, tools, maps, google, measure, area, distance" /> 8<meta name="apple-touch-fullscreen" content="YES" /> 9<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 10<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 11<meta name="google-site-verification" content="S2oL4rBBPmFBahLniBoZKkJlCmaYcnrLxGOIK-6RZBM" /> 12 13<meta name="robots" content="index,follow" /> 14<meta name="googlebot" content="index,follow" /><link rel="alternate" hreflang="x-default" href="https://www.calcmaps.com/map-radius/"/> 15 <link rel="alternate" hreflang="en" href="https://www.calcmaps.com/map-radius/"/> 16 <link rel="alternate" hreflang="de" href="https://www.calcmaps.com/de/map-radius/"/> 17 <link rel="alternate" hreflang="fr" href="https://www.calcmaps.com/fr/map-radius/"/> 18 <link rel="alternate" hreflang="es" href="https://www.calcmaps.com/es/map-radius/"/> 19 <link rel="alternate" hreflang="pt" href="https://www.calcmaps.com/pt/map-radius/"/> 20 <link rel="alternate" hreflang="it" href="https://www.calcmaps.com/it/map-radius/"/> 21 <link rel="alternate" hreflang="nl" href="https://www.calcmaps.com/nl/map-radius/"/> 22 <link rel="alternate" hreflang="sv" href="https://www.calcmaps.com/sv/map-radius/"/> 23 <link rel="alternate" hreflang="ro" href="https://www.calcmaps.com/ro/map-radius/"/> 24 <link rel="alternate" hreflang="pl" href="https://www.calcmaps.com/pl/map-radius/"/> 25 <link rel="alternate" hreflang="ru" href="https://www.calcmaps.com/ru/map-radius/"/> 26 <link rel="alternate" hreflang="tr" href="https://www.calcmaps.com/tr/map-radius/"/> 27 <!-- OPEN GRAPH --> 28<meta property="og:title" content="Map Radius Calculator"/> 29<meta property="og:type" content="website"/> 30<meta property="og:url" content="https://www.calcmaps.com/map-radius/"/> 31<meta property="og:image" content="https://www.calcmaps.com/css/i/map-radius.jpg"/> 32<meta property="og:site_name" content="CalcMaps"/> 33<meta property="og:description" content="Draw a Radius around a map location. Draw a radius circle around a location in Google Maps to show a distance from that point in all directions."/> 34<meta property="twitter:card" content="summary_large_image"/> 35<meta property="twitter:image:src" content="https://www.calcmaps.com/css/i/map-radius.jpg"/> 36<meta property="twitter:url" content="https://www.calcmaps.com/map-radius/"/> 37<meta property="twitter:title" content="Map Radius Calculator"/> 38<meta property="twitter:description" content="Draw a Radius around a map location. Draw a radius circle around a location in Google Maps to show a distance from that point in all directions."/> 39<meta name="msapplication-TileColor" content="#ffffff"> 40<meta name="msapplication-TileImage" content="https://www.calcmaps.com/css/i/ico/ms-icon-144x144.png?v=2"> 41<link rel="icon" href="https://www.calcmaps.com/css/i/ico/favicon.svg?v=2" type="image/svg+xml" sizes="any" /> 42<link rel="shortcut icon" href="https://www.calcmaps.com/css/i/ico/favicon.ico?v=2" /> 43<link rel="icon" href="https://www.calcmaps.com/css/i/ico/favicon.ico?v=2" type="image/x-icon" /> 44<link rel="apple-touch-icon" sizes="57x57" href="https://www.calcmaps.com/css/i/ico/apple-icon-57x57.png?v=2"> 45<link rel="apple-touch-icon" sizes="60x60" href="https://www.calcmaps.com/css/i/ico/apple-icon-60x60.png?v=2"> 46<link rel="apple-touch-icon" sizes="72x72" href="https://www.calcmaps.com/css/i/ico/apple-icon-72x72.png?v=2"> 47<link rel="apple-touch-icon" sizes="76x76" href="https://www.calcmaps.com/css/i/ico/apple-icon-76x76.png?v=2"> 48<link rel="apple-touch-icon" sizes="114x114" href="https://www.calcmaps.com/css/i/ico/apple-icon-114x114.png?v=2"> 49<link rel="apple-touch-icon" sizes="120x120" href="https://www.calcmaps.com/css/i/ico/apple-icon-120x120.png?v=2"> 50<link rel="apple-touch-icon" sizes="144x144" href="https://www.calcmaps.com/css/i/ico/
50apple-icon-144x144.png?v=2"> 51<link rel="apple-touch-icon" sizes="152x152" href="https://www.calcmaps.com/css/i/ico/apple-icon-152x152.png?v=2"> 52<link rel="apple-touch-icon" sizes="180x180" href="https://www.calcmaps.com/css/i/ico/apple-icon-180x180.png?v=2"> 53<link rel="icon" type="image/png" sizes="192x192" href="https://www.calcmaps.com/css/i/ico/android-icon-192x192.png?v=2"> 54<link rel="icon" sizes="192x192" href="https://www.calcmaps.com/css/i/logo_192.png?v=2"> 55<link rel="icon" type="image/png" sizes="32x32" href="https://www.calcmaps.com/css/i/ico/favicon-32x32.png?v=2"> 56<link rel="icon" type="image/png" sizes="96x96" href="https://www.calcmaps.com/css/i/ico/favicon-96x96.png?v=2"> 57<link rel="icon" type="image/png" sizes="16x16" href="https://www.calcmaps.com/css/i/ico/favicon-16x16.png?v=2"> 58 59
59<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9757282942634037" crossorigin="anonymous"></script>
59 60<!-- STYLES --> 61<link rel="preload" href="https://www.calcmaps.com/css/fonts/plus-jakarta-sans-v12-latin-regular.woff2" as="font" type="font/woff2" crossorigin> 62<link rel="preload" href="https://www.calcmaps.com/css/fonts/plus-jakarta-sans-v12-latin-500.woff2" as="font" type="font/woff2" crossorigin> 63<link rel="preload" href="https://www.calcmaps.com/css/fonts/plus-jakarta-sans-v12-latin-600.woff2" as="font" type="font/woff2" crossorigin> 64<link href="https://www.calcmaps.com/css/styles_min.css?v=52" rel="stylesheet" /> 65<!-- SCRIPTS -->
66<script src="https://www.calcmaps.com/js/scripts.js?v=52"></script>
vendor: 1 bytes, line 66
66
67<script> 68 var inside_iframe = (window.self !== window.top); 69</script>
69 70</head><body class="map-radius"> 71<!-- HEADER --> 72<header> 73<div class="nav navbar navbar-default navbar-fixed-top nav-top"> 74 <div class="container nav_container pl10 pr10"> 75 <div class="col-xs-3 header-col brand-col"> 76 <a class="navbar-brand logo_custom" href="https://www.calcmaps.com/" title="CalcMaps"><img width="30" height="30" src="https://www.calcmaps.com/css/i/logo.svg" alt="CalcMaps"><strong>CalcMaps</strong></a> 77 </div> 78 <button type="button" class="navbar-toggle mt5 mr5 collapsed" data-toggle="collapse" data-target=".navbar-collapse" onclick="trackClickEvent('mobile_menu','click_menu')"> 79 <span class="sr-only">Menu</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> 80 <span id="nabvar_label_menu">MENU</span> 81 </button> 82 <div id="select_lang_div" data-toggle="modal" data-target="#lang-modal"> 83 <span id="nav_choose_lang_modal"><span id="select_lang_span">Language</span> [EN]</span> 84 </div> 85 <div class="col-xs-12 collapse navbar-collapse"> 86 <ul id="navigation" class="nav navbar-nav"> 87 <li class="nav-map-links "><a href="https://www.calcmaps.com/map-area/" title="Calculate area on Map">Map area</a></li> 88 <li class="nav-map-links active "><a href="https://www.calcmaps.com/map-radius/" title="Measure Radius on Map">Radius</a></li> 89 <li class="nav-map-links "><a href="https://www.calcmaps.com/map-distance/" title="Calculate distance on Map">Distance</a></li> 90 <li class="nav-map-links "><a href="https://www.calcmaps.com/map-elevation/" title="Calculate elevation on Map">Elevation</a></li> 91 <li class="nav-map-links "><a href="https://www.calcmaps.com/map-isodistance/" title="Map Isodistances by Travel Distance">Isodistances</a></li> 92 <li class="nav-map-links "><a href="https://www.calcmaps.com/map-isochrone/" title="Generate Isochrone Map">Isochrones</a></li> 93 <li class="nav-map-links "><a href="https://www.calcmaps.com/map-coordinates/" title="Get Coordinates on Map">Coordinates</a></li> 94 <li class="cmapspro_link_nav_li"><a target="_blank" href="https://calcmapspro.com/howitworks/?utm_source=calcmaps&utm_medium=referral&utm_campaign=navbar" class="cmapspro_link_nav" title="Calcmaps PRO"><span class="link_nav">PRO</span></a></li> </ul> 95 </div> 96 </div> 97</div></header> 98<!-- END HEADER -->
99<script> 100 var country_code = ''; 101 var country_name = ''; 102 var country_lat = ''; 103 var country_lng = ''; 104 var country_zoom = 2; 105 var country_coords = {lat: Number(country_lat), lng: Number(country_lng)}; 106 var basemap_in_use = 0; 107 var use_geocode_for_search = '1'; 108 var is_imperial = (country_code == 'US' || country_code == 'GB' ? true : false); 109 const lang_location_not_found = "Location not found"; 110 const lang_error_try_later = "An error has occurred, please try again later"; 111 const lang_select_distance = "Select Distance"; 112 const lang_alert_select_distance = "Please select distance"; 113 const lang_select_travel_time = "Select Travel Time"; 114 const lang_alert_select_travel_time = "Please select travel time"; 115 const lang_fail_get_iso = "Unable to generate the requested area. Try selecting a different location on the map."; 116 const lang_please_wait = "Please wait"; 117 const lang_mode_by_car = "By car"; 118 const lang_mode_on_foot = "On foot"; 119 const lang_distance = "Distance"; 120 const lang_coordinates = "Coordinates"; 121 const lang_elevation = "Elevation"; 122 const lang_elevation_tip = "Click on the map to view the elevation of a point or location. You can also keep clicking along the map to build your elevation profile. You can remove the last point or clear all points to restart."; 123 const lang_meters = "Meters"; 124 const lang_feet = "Feet"; 125 const lang_copy = "Copy"; 126 const lang_share = "Share"; 127 const lang_cancel = "Cancel"; 128 const lang_clear_all = "Clear All"; 129 const lang_resize_or_move = "Resize or Move"; 130 const lang_click_to_remove = "Click to remove"; 131 const lang_click_ok_when_finished = "Click OK when finished"; 132 const lang_release_mouse_to_finish_drawing = "Release mouse to finish drawing"; 133 const lang_click_and_drag_to_draw_circle = "Click and drag to draw"; 134 const lang_radius = "Radius"; 135 const lang_draw_a_circle = "Draw a Circle"; 136 const lang_clear_last_point = "Clear Last Point"; 137 const lang_circle_area = "Circle Area"; 138 const lang_alert_no_path_gpx = "Please create a path by clicking on the map to add points, then export it as a GPX file"; 139 const lang_gpx_downloaded_successfully = "GPX downloaded successfully!"; 140 const lang_import_gpx_warning = "Importing this GPX file will clear all current data from the map. Do you want to continue?"; 141 const lang_alert_max_gpx_size = "The file is too big. Maximum allowed size is 1MB."; 142</script>
142 143<!-- PAGE --> 144<div id="page" class="container"> 145<section id="page-content"> 146 <link rel="stylesheet" href="https://www.calcmaps.com/css/leaflet/leaflet_min.css?v=52"> 147
147<script src="https://www.calcmaps.com/js/leaflet/leaflet.js?v=52"></script>
147 148
148<script src="https://www.calcmaps.com/js/leaflet/leaflet.draw.min.js?v=52"></script>
148 149
149<script src="https://www.calcmaps.com/js/leaflet/maplibre-gl.js?v=52"></script>
149 150
150<script src="https://www.calcmaps.com/js/leaflet/leaflet-maplibre-gl.js?v=52"></script>
vendor: 1 bytes, line 150
150
151<script> 152 var js_dir = "https://www.calcmaps.com/"; 153 var map; 154 var marker = null; 155 var polyPoints = []; 156 var searchControl, results; 157 var polyline, Icon; 158 var polygon; 159 var iso_polygon = null; 160 var clickCount = 0; 161 var latlng1 = null; 162 var latlng2 = null; 163 var markers = []; 164 var searchMarker = null; 165 var opacity = 1; 166 var shellArr = []; 167 var nl = "\n"; 168 var wholink = ""; 169 var mapLang = 'en-EN'; 170 const vector_tiles_server = [ 171 "https://t-tiles-ts-eu-ht2.b-cdn.net/data/v3/{z}/{x}/{y}.pbf?s=TS-EU-HT2&key=1b48259b810e","https://t-tiles-ts-eu-ht2.b-cdn.net/data/v3/{z}/{x}/{y}.pbf?s=TS-EU-HT2&key=1b48259b810e","https://t-tiles-ts-eu-ht2.b-cdn.net/data/v3/{z}/{x}/{y}.pbf?s=TS-EU-HT2&key=1b48259b810e", 172 ]; 173 const sat_tiles_server = [ 174 "https://dbt1zjijstpy3.cloudfront.net/{z}/{y}/{x}","https://dbt1zjijstpy3.cloudfront.net/{z}/{y}/{x}","https://dbt1zjijstpy3.cloudfront.net/{z}/{y}/{x}", 175 ]; 176 const sat_bluemarble_tiles_server = [ 177 "https://t-sat-uk1.calcxyz.com/sat/satellitefiles/bluemarble/{z}/{x}/{y}.png","https://t-sat-uk1.calcxyz.com/sat/satellitefiles/bluemarble/{z}/{x}/{y}.png","https://t-sat-uk1.calcxyz.com/sat/satellitefiles/bluemarble/{z}/{x}/{y}.png", 178 ]; 179 const sat_tiles_server_0_13 = [ 180 "https://t-sat-uk1.calcxyz.com/sat/satellitefiles/{z}/{x}/{y}.jpg","https://t-sat-uk1.calcxyz.com/sat/satellitefiles/{z}/{x}/{y}.jpg","https://t-sat-uk1.calcxyz.com/sat/satellitefiles/{z}/{x}/{y}.jpg", 181 ]; 182 const opencycle_tiles_server = [ 183 "https://d2uavi3d63jzri.cloudfront.net/{z}/{x}/{y}.png","https://d24rkvf4vp68rj.cloudfront.net/{z}/{x}/{y}.png","https://dsgr4yql9e2r1.cloudfront.net/{z}/{x}/{y}.png" 184 ]; 185</script>
vendor: 1 bytes, line 185
185
186<script src="https://www.calcmaps.com/js/leaflet/map_style_min.js?v=52"></script>
vendor: 1 bytes, line 186
186
187<script> 188 function load_basemaps() { 189 190 var bounds = new L.LatLngBounds(new L.LatLng(-360, -360), new L.LatLng(360, 360)); 191 192 map = L.map("map", 193 { 194 center: [start_lat, start_lng], 195 zoom: start_zoom, 196 minZoom: (L.Browser.mobile ? 1 : 2), 197 maxZoom: 19, 198 maxBounds: bounds, 199 zoomSnap: 0.5, 200 zoomDelta: 0.5, 201 gestureHandling: L.Browser.mobile 202 203 }); 204 L.DomUtil.addClass(map._container, "crosshair-cursor-enabled"); 205 206 var base_map = L.maplibreGL({ 207 style: basemap_nav_style, 208 preserveDrawingBuffer: true, 209 attribution: '<a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap</a> contributors' 210 }); 211 212 var sat_map = L.maplibreGL({ 213 style: basemap_satellite_style, 214 preserveDrawingBuffer: true, 215 attribution: 'Esri, DigitalGlobe, GeoEye, i-cubed, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AEX, Getmapping, Aerogrid, IGN, IGP, swisstopo, and the GIS User Community' 216 }); 217 218 var osm_map = L.maplibreGL({ 219 style: basemap_osm_style, 220 preserveDrawingBuffer: true, 221 attribution: '<a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap</a> contributors' 222 }); 223 224 var topo_map = L.maplibreGL({ 225 style: basemap_opentopo_style, 226 preserveDrawingBuffer: true, 227 attribution: '<a href="https://openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>-Mitwirkende, SRTM | Kartendarstellung: © <a href="http://opentopomap.org/" target="_blank">OpenTopoMap</a>' 228 }); 229 230 var cycle_map = L.maplibreGL({ 231 style: basemap_opencycle_style, 232 preserveDrawingBuffer: true, 233 attribution: '<a href="https://openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>-Mitwirkende, SRTM | Kartendarstellung: © <a href="http://opentopomap.org/" target="_blank">OpenTopoMap</a>' 234 }); 235 236 var BingLayer = L.TileLayer.extend({getTileUrl:function(e){return L.Util.template(this._url,{s:this._getSubdomain(e),q:this._quadKey(e.x,e.y,this._getZoomForUrl())})},_quadKey:function(e,t,r){for(var i=[],n=r;n>0;n--){var a="0",u=1<<n-1;(e&u)!=0&&a++,(t&u)!=0&&(a++,a++),i.push(a)}return i.join("")}}); 237 var bing_map = new BingLayer('https://ecn.t{s}.tiles.virtualearth.net/tiles/r{q}?g=671&mkt='+mapLang+'&lbl=l1&stl=h&ur='+country_code, { 238 subdomains: ['0', '1', '2', '3'], 239 maxZoom: 19, 240 attribution: '© <a href="http://bing.com/maps" target="_blank">Bing Maps</a> | <a href="https://www.microsoft.com/en-us/maps/product" target="_blank">Terms of use</a>' 241 }); 242 243 map.attributionControl.setPrefix('© CalcMaps'); 244 245 // start basemap 246 if (get_cookie('last_basemap')) { 247 if (get_cookie('last_basemap') == 1) { 248 base_map.addTo(map); 249 basemap_in_use = 1; 250 } else if (get_cookie('last_basemap') == 2) { 251 sat_map.addTo(map); 252 basemap_in_use = 2; 253 } else if (get_cookie('last_basemap') == 3) { 254 osm_map.addTo(map); 255 basemap_in_use = 3; 256 } else if (get_cookie('last_basemap') == 4) { 257 topo_map.addTo(map); 258 basemap_in_use = 4; 259 } else if (get_cookie('last_basemap') == 5) { 260 cycle_map.addTo(map); 261 basemap_in_use = 5; 262 } else if (get_cookie('last_basemap') == 15) { 263 bing_map.addTo(map); 264 basemap_in_use = 15; 265 } else { 266 bing_map.addTo(map); 267 basemap_in_use = 1; 268 } 269 } else { 270 271 // default on start 272 base_map.addTo(map); 273 basemap_in_use = 1; 274 } 275 const baseMaps = { 276 "Navigation": base_map, 277 "Satellite": sat_map, 278 "Street": osm_map, 279 "Topografic" : topo_map, 280 "OpenCycle" : cycle_map, 281 "BingMap" : bing_map, 282 }; 283 284 map.on('baselayerchange', function(e) { 285 286 $('.leaflet-control-layers').removeClass('leaflet-control-layers-expanded'); // force close 287 288 if (e.name == 'Satellite') { 289 basemap_in_use = 2; 290 set_cookie('last_basemap', 2, 10); 291 292 } else if (e.name == 'Street') { 293 basemap_in_use = 3; 294 set_cookie('last_basemap', 3, 10); 295 296 } else if (e.name == 'Topografic') { 297 basemap_in_use = 4; 298 set_cookie('last_basemap', 4, 10); 299 300 } else if (e.name == 'OpenCycle') { 301 basemap_in_use = 5; 302 set_cookie('last_basemap', 5, 10); 303 } else if (e.name == 'BingMap') { 304 basemap_in_use = 15; 305 set_cookie('last_basemap', 15, 10); 306 } else { 307 basemap_in_use = 1; 308 set_cookie('last_basemap', 1, 10); 309 } 310 trackClickEvent('change_basemap', e.name); 311 }); 312 313 map.on('moveend', function(e) { 314 if (e.target.getCenter().lat != 'undefined' && e.target.getCenter().lng != 'undefined') { 315 set_cookie('last_lat', e.target.getCenter().lat, 10); 316 set_cookie('last_lng', e.target.getCenter().lng, 10); 317 } 318 319 if (e.target.getZoom() != 'undefined') { 320 set_cookie('last_zoom', e.target.getZoom(), 10); 321 } 322 }); 323 324 map.on('zoomend', function(e) { 325 if (e.target.getZoom() != 'undefined') { 326 set_cookie('last_zoom', e.target.getZoom(), 10); 327 } 328 }); 329 330 var overlays = { 331 // add any overlays here 332 }; 333 334 L.control.layers(baseMaps, overlays, {position: 'topright'}).addTo(map); 335 336 L.layerGroup().addTo(map); 337 338 // scale 339 var scale_options = { 340 position:'bottomright', 341 imperial: is_imperial 342 }; 343 344 L.control.scale(scale_options).addTo(map); 345 346 // replace leaflet '#' 347 map.whenReady(function() { 348 document.querySelectorAll('.leaflet-control a[href="#"]').forEach(function(el) { 349 el.removeAttribute('href'); 350 el.setAttribute('role', 'button'); 351 el.style.cursor = 'pointer'; 352 }); 353 }); 354 } 355 356 function removeLastPoint() { 357 clearLastMarker(); 358 } 359 360 function clearMap() { 361 newCalc(); 362 } 363</script>
363 364<style> 365 .leaflet-container.crosshair-cursor-enabled {cursor:crosshair;} 366 .leaflet-tile-container img {width: 256.8px !important;height: 256.8px !important;} 367 .leaflet-control-easyPrint, .leaflet-control-easyPrint-button, .leaflet-control-easyPrint-button-export {display: none!important;} 368</style><div class="row mt10 mb5 cb ml15 mr15" style="min-height:90px;"><div class="banner_responsive"><!-- CMAPS_RESPONSIVE_TOP --> 369 <ins class="adsbygoogle" 370 style="display:block" 371 data-ad-client="ca-pub-9757282942634037" 372 data-ad-slot="9991530151" 373 data-ad-format="horizontal" 374 data-full-width-responsive="false"></ins> 375
375<script> 376 (adsbygoogle = window.adsbygoogle || []).push({}); 377 </script>
377</div></div><div class="col-md-10"><style> 378 #menus_clear_last_point{display:none}.btn-group-sm > .btn {padding: 5px 7px} 379 .leaflet-draw-edit-remove, .leaflet-draw-edit-edit {display: none!important;} 380 .leaflet-touch .leaflet-draw-actions {left: 3px;} 381</style> 382<div class="row mt0"> 383 <div class="col-md-12 content-col tpl-content-col"> 384 <h1 class="page-title ml5">Map Radius Calculator</h1> 385 <div class="top-map-info"> 386 <div class="col-md-6 p0"> 387 <div class="col-md-12 p0"> 388 <div class="col-md-12 p0"> 389 <div id="search_group_div" class="input-group"> 390 <input type="text" class="form-control" size="30" id="addressInput" name="address" placeholder="Enter an address" autocomplete="on"/> 391 <span class="input-group-btn"> 392 <button id="addressSearchButton" type="submit" class="btn btn-primary" onclick="trackClickEvent('btn_search','click_button');preventSearchClicks(this);showAddress(document.getElementById('addressInput').value);">Search</button> 393 </span> 394 </div> 395 <div class="col-md-12 p0"> 396 <div class="btn-group btn-group-sm mt5 mb3" role="group" id="map_top_btn_group"> 397<button type="button" class="btn btn-default" onclick="clearMapRadius();">Clear All</button><button id="menus_edit_circles" type="button" class="btn btn-default" onclick="editCircles();">Edit Circle</button><button id="menus_create_new_circle" type="button" class="btn btn-default" onclick="createNewCircle();">Draw a Circle</button><select id="fixed_radius" class="btn btn-default fs13" style="max-width:200px;height:30px;font-weight:600;" onchange="createNewFixedCircle();"><option value="0">Radius KM</option><option value="50">50 m</option><option value="100">100 m</option><option value="200">200 m</option><option value="300">300 m</option><option value="400">400 m</option><option value="500">500 m</option><option value="1000">1 km</option><option value="2000">2 km</option><option value="3000">3 km</option><option value="4000">4 km</option><option value="5000">5 km</option><option value="6000">6 km</option><option value="7000">7 km</option><option value="8000">8 km</option><option value="9000">9 km</option><option value="10000">10 km</option><option value="15000">15 km</option><option value="20000">20 km</option><option value="25000">25 km</option><option value="30000">30 km</option><option value="35000">35 km</option><option value="40000">40 km</option><option value="45000">45 km</option><option value="50000">50 km</option><option value="60000">60 km</option><option value="70000">70 km</option><option value="80000">80 km</option><option value="90000">90 km</option><option value="100000">100 km</option><option value="200000">200 km</option><option value="300000">300 km</option><option value="400000">400 km</option><option value="500000">500 km</option><option value="1000000">1000 km</option></select></div> 398 </div> 399 </div> 400 </div> 401</div> <div class="col-md-6 no-padding-991"> 402 <span id="status"> 403 <b>Radius:</b> -- 404 </span> 405 <span id="status2"></span> 406 </div> 407 </div> 408 <div id="map_area"> 409 <div id="map_canvas"><div id="map"></div></div> 410 </div> 411
411<script> 412 function print_map_img(export_only = true, filename = '') { 413 414 trackClickEvent('btn_print_click', (export_only ? 'download' : 'print')); 415 416 $("#print_map_img, #dwn_map_img").addClass('disabled'); 417 418 let format = 'png'; // or jpeg 419 420 filename = filename ? filename.replace(/\s+/g, '-') : 'calcmaps-map-radius-104038-24092026'; 421 422 let file_type = 'image/' + format; // "image/png" 423 424 const captureElement = document.querySelector('#map_canvas'); 425 426 if (!captureElement || !map || typeof L.easyPrint == 'undefined') { 427 console.log('error print...'); 428 $("#print_map_img, #dwn_map_img").removeClass('disabled'); 429 return; 430 } 431 432 // text info and hide elements 433 try { 434 let status_text = $('#status').length ? $('#status').html() : ''; 435 status_text+= $('#status2').length ? $('#status2').html() : ''; 436 437 if (url_dir == 'map-elevation') { 438 status_text = lang_elevation; 439 } 440 441 // keep attribution except for satellite 442 if (basemap_in_use == 2) { 443 444 $('.leaflet-control').hide(); 445 } else { 446 447 $('.leaflet-control').hide().filter('.leaflet-control-attribution').show(); 448 } 449 450 L.Control.textbox = L.Control.extend({ 451 onAdd: function(map) { 452 var info_text = L.DomUtil.create('div'); 453 info_text.id = "info_text"; 454 info_text.innerHTML = '<p><b>calcmaps.com</b><br>' + status_text + '</p>' 455 return info_text; 456 } 457 }); 458 459 L.control.textbox = function(opts) { 460 return new L.Control.textbox(opts); 461 } 462 L.control.textbox({ position: 'topleft' }).addTo(map); 463 464 } catch (e) {} 465 466 // set the printer to allow print/download 467 map.printControl = L.easyPrint({ 468 title: 'Print', 469 position: 'topleft', 470 sizeModes: ['CurrentSize'], 471 filename: 'calcmaps_img_', 472 exportOnly: export_only ? true : false, 473 hideControlContainer: false 474 }).addTo(map); 475 476 const container = document.getElementById('map_canvas'); 477 const glCanvas = container.querySelector('.maplibregl-canvas'); 478 479 if (!glCanvas) { 480 console.log('MapLibre canvas not found'); 481 $('#info_text').remove(); 482 $('.leaflet-control').show(); 483 $("#print_map_img, #dwn_map_img").removeClass('disabled'); 484 trackClickEvent('button_print', 'fail_print'); 485 return; 486 } 487 488 // get image from MapLibre canvas 489 const mapImage = glCanvas.toDataURL('image/png'); 490 491 // create temporary background image 492 const img = new Image(); 493 img.src = mapImage; 494 img.style.position = 'absolute'; 495 img.style.top = '0'; 496 img.style.left = '0'; 497 img.style.width = '100%'; 498 img.style.height = '100%'; 499 img.style.zIndex = '-1'; // ensure it stays behind Leaflet overlays 500 501 // inject image temporarily in the container 502 container.insertBefore(img, container.firstChild); 503 504 // trigger easyPrint (delayed to ensure image is rendered) 505 setTimeout(() => { 506 map.printControl.printMap('CurrentSize', filename); 507 508 // remove the injected image after print 509 setTimeout(() => { 510 if (img.parentNode) { 511 img.parentNode.removeChild(img); 512 } 513 514 $('#info_text').remove(); 515 $('.leaflet-control').show(); 516 517 }, 2000); // delay to allow print popup to render 518 }, 300); 519 520 // track and set buttons active again 521 setTimeout(() => { 522 $("#print_map_img, #dwn_map_img").removeClass('disabled'); 523 trackClickEvent('button_print', (export_only ? 'download_map' : 'print_map')); 524 }, 2500); 525 } 526</script>
526 527<div class="row rounded5" style="background:#6ac6ef21"><div class="col-md-12 p0"><p class="tac fs16" style="padding:10px 10px 0px 10px;">Plan areas, routes, create delivery zones and export your maps in seconds. Import your data, analyze locations and save everything for later!<br><a target="_blank" href="https://calcmapspro.com/register/?utm_source=calcmaps&utm_medium=referral&utm_campaign=map-radius" class="btn btn-primary mt10 pl20 pr20 cmapspro_link_text" style="border-radius:30px;"">Start planning smarter Maps</a></p></div></div><div class="row rounded5 p10" style="background:#f5f5f5"><div class="col-lg-12 p0" id="buttons_map_bottom_block"> <button id="print_map_img" class="btn btn-sm btn-default rounded5 mr5 mt0 mb10_767" onclick="print_map_img(false)"><svg fill="currentColor" height="16" width="16" viewBox="0 0 24 24" class="mr5"><path d="M19 8C20.66 8 22 9.34 22 11V17H18V21H6V17H2V11C2 9.34 3.34 8 5 8H6V3H18V8H19M8 5V8H16V5H8M16 19V15H8V19H16M18 15H20V11C20 10.45 19.55 10 19 10H5C4.45 10 4 10.45 4 11V15H6V13H18V15M19 11.5C19 12.05 18.55 12.5 18 12.5C17.45 12.5 17 12.05 17 11.5C17 10.95 17.45 10.5 18 10.5C18.55 10.5 19 10.95 19 11.5Z"></path></svg>Print map</button> 528 <button id="dwn_map_img" class="btn btn-sm btn-default rounded5 mr5 mt0 mb10_767" onclick="print_map_img(true)">
528<svg fill="currentColor" height="16" width="16" viewBox="0 0 24 24" class="mr5"><path d="M9,3L3.36,4.9C3.15,4.97 3,5.15 3,5.38V20.5A0.5,0.5 0 0,0 3.5,21L3.66,20.97L9,18.9L15,21L20.64,19.1C20.85,19.03 21,18.85 21,18.62V3.5A0.5,0.5 0 0,0 20.5,3L20.34,3.03L15,5.1L9,3M8,5.45V17.15L5,18.31V6.46L8,5.45M10,5.47L14,6.87V18.53L10,17.13V5.47M19,5.7V17.54L16,18.55V6.86L19,5.7M7.46,6.3L5.57,6.97V9.12L7.46,8.45V6.3M7.46,9.05L5.57,9.72V11.87L7.46,11.2V9.05M7.46,11.8L5.57,12.47V14.62L7.46,13.95V11.8M7.46,14.55L5.57,15.22V17.37L7.46,16.7V14.55Z"></path></svg>Download map</button> 529</div></div> <div id="map_notes"> 530 <p><b>Note:</b> With this tool, you can know the radius of a circle anywhere on Google Maps by simply clicking on a single point and extending or moving the circle to change the radius on the Map.<br>Click in the Button Draw a Circle, then Click on map to place the center of the circle and drag at same time to start creating the circle. You can also create a circle with a fixed size.</p> 531 </div> 532 </div> 533</div>
534<script src="https://www.calcmaps.com/js/pages/radius.js?v=52.2"></script>
534<br class="cb"><div class="banner_responsive"><!-- CMAPS_responsive_bottom --> 535 <ins class="adsbygoogle" 536 style="display:block" 537 data-ad-client="ca-pub-9757282942634037" 538 data-ad-slot="8498805509" 539 data-ad-format="horizontal"></ins> 540
540<script> 541 (adsbygoogle = window.adsbygoogle || []).push({}); 542 </script>
542</div><br class="cb"></div><div class="col-md-2"><br class="cb"><div class="banner_responsive"><!-- CMAPS_responsive_right_side --> 543 <ins class="adsbygoogle" 544 style="display:block" 545 data-ad-client="ca-pub-9757282942634037" 546 data-ad-slot="5016832978" 547 data-ad-format="auto"></ins> 548
548<script> 549 (adsbygoogle = window.adsbygoogle || []).push({}); 550 </script>
550</div><br class="cb"></div></section> 551</div><!-- END PAGE --> 552<div id="lang-modal" class="modal fade" role="dialog"> 553 <div class="modal-dialog" role="document"> 554 <div class="modal-content"> 555 <div class="modal-header"> 556 <button type="button" class="close" data-dismiss="modal">×</button> 557 <span class="modal-title tac">Language</span> 558 </div> 559 <div class="modal-body tac"> 560 <div class="col-12 mb15"><p class="bbdashed p5"><a class="fs14 bold " href="https://www.calcmaps.com/map-radius/">[EN] English</a></p></div><div class="col-12 mb15"><p class="bbdashed p5"><a class="fs14 " href="https://www.calcmaps.com/de/map-radius/">[DE] Deutsch</a></p></div><div class="col-12 mb15"><p class="bbdashed p5"><a class="fs14 " href="https://www.calcmaps.com/fr/map-radius/">[FR] Français</a></p></div><div class="col-12 mb15"><p class="bbdashed p5"><a class="fs14 " href="https://www.calcmaps.com/es/map-radius/">[ES] Español</a></p></div><div class="col-12 mb15"><p class="bbdashed p5"><a class="fs14 " href="https://www.calcmaps.com/pt/map-radius/">[PT] Português</a></p></div><div class="col-12 mb15"><p class="bbdashed p5"><a class="fs14 " href="https://www.calcmaps.com/it/map-radius/">[IT] Italiano</a></p></div><div class="col-12 mb15"><p class="bbdashed p5"><a class="fs14 " href="https://www.calcmaps.com/nl/map-radius/">[NL] Nederlands</a></p></div><div class="col-12 mb15"><p class="bbdashed p5"><a class="fs14 " href="https://www.calcmaps.com/sv/map-radius/">[SV] Svenska</a></p></div><div class="col-12 mb15"><p class="bbdashed p5"><a class="fs14 " href="https://www.calcmaps.com/ro/map-radius/">[RO] RomânÄ</a></p></div><div class="col-12 mb15"><p class="bbdashed p5"><a class="fs14 " href="https://www.calcmaps.com/pl/map-radius/">[PL] Polski</a></p></div><div class="col-12 mb15"><p class="bbdashed p5"><a class="fs14 " href="https://www.calcmaps.com/ru/map-radius/">[RU] PÑÑÑкий</a></p></div><div class="col-12 mb15"><p class="bbdashed p5"><a class="fs14 " href="https://www.calcmaps.com/tr/map-radius/">[TR] Türkçe</a></p></div> 561 </div><br class="cb"> 562 <div class="modal-footer tac"> 563 <button type="button" class="btn btn-default rounded5" data-dismiss="modal">Cancel</button> 564 </div> 565 </div> 566 </div> 567 </div><!-- FOOTER --> 568<footer id="footer" class="container"> 569<div class="row footer-last"> 570 <div class="col-md-3 article-content-no-padding"> 571 <span class="text-left fs13">© 2015â2026 Calcmaps.com</span> 572 </div> 573 <div class="col-md-9 article-content-no-padding text-left "> 574 <a href="https://www.calcmaps.com/terms-and-conditions/" rel="nofollow" class="mr10 mb10 dib_mobile fs14">Terms and Conditions</a> 575 <a href="https://www.calcmaps.com/policy-privacy/" rel="nofollow" class="mr10 mb10 dib_mobile fs14">Policy Privacy</a> 576 <a href="https://www.calcmaps.com/policy-privacy/#cookies" rel="nofollow" class="mr10 mb10 dib_mobile fs14">Cookies</a> 577 <a href="https://www.calcmaps.com/contact/" rel="nofollow" class="mr10 mb10 dib_mobile fs14">Contact us</a> 578 <a href="https://www.calcmaps.com/about/" rel="nofollow" class="mr10 mb10 dib_mobile fs14">About</a> 579 <a href="#" rel="nofollow" id="footer_choose_lang_modal" class="mr10 mb10 dib_mobile fs14" data-toggle="modal" data-target="#lang-modal">Language</a> 580 <a href="https://www.facebook.com/calcmaps" class="mr10 mb10 dib_mobile fs14" title="Facebook" rel="nofollow" target="_blank">Facebook</a> </div> 581</div> 582 583</footer><!-- END FOOTER --> 584
585<script> 586 587var basepath = "https://www.calcmaps.com/"; 588var lang = "en"; 589var lang_op = "map-radius"; 590var basepath_lang = "https://www.calcmaps.com/"; 591var BLANK = "https://www.calcmaps.com/css/i/blank.gif"; 592var onl = "1"; 593var ismobile = ""; 594var isbot = "1"; 595var cookie_domain = "www.calcmaps.com"; 596var cookie_prefix = "CMAPS"; 597var cookie_version = "_V2_"; 598var static_dir = "https://www.calcmaps.com/"; 599</script>
599 600 601<style> 602#map_canvas {width:100%; height:500px;} 603#map_area {width:100%;} 604</style> 605
606<script> 607var url_points = ''; 608var url_short_coords = ''; 609var start_point = null, start_lat = null, start_lng = null; 610var start_zoom = country_zoom; //0-20 611var mapTypeId = 'hybrid'; 612</script>
vendor: 1 bytes, line 612
612
613<script src="https://www.calcmaps.com/js/pages/page.js?v=52"></script>
vendor: 1 bytes, line 613
613
614<script type="application/ld+json"> 615 { "@context" : "http://schema.org", 616 "@type" : "WebSite", 617 "name" : "CalcMaps", 618 "alternateName" : "CMAPS", 619 "url" : "https://www.calcmaps.com" 620 } 621</script>
621 622
623<script> 624var url_dir = "map-radius"; 625</script>
625 626 627 <!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 72 bytes, lines 627-628
627 628 <script async src='https://www.googletagmanager.com/gtag/js?id=
628G-857DKLZ3G3
vendor: 20 bytes, lines 628-629
628'></script> 629
629<script> 630
vendor: 157 bytes, lines 630-633
630window.dataLayer = window.dataLayer || []; 631 function gtag(){dataLayer.push(arguments);} 632 gtag('js', new Date()); 633 gtag('config', '
633G-857DKLZ3G3
vendor: 13 bytes, lines 633-634
633'); 634
634</script>
634 635 636 <!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 72 bytes, lines 636-637
636 637 <script async src='https://www.googletagmanager.com/gtag/js?id=
637G-4YH9VB85NZ
vendor: 20 bytes, lines 637-638
637'></script> 638
638<script> 639
vendor: 166 bytes, lines 639-643
639window.dataLayer = window.dataLayer || []; 640 function gtag(){dataLayer.push(arguments);} 641 gtag('js', new Date()); 642 643 gtag('config', '
643G-4YH9VB85NZ
vendor: 110 bytes, lines 643-647
643', { 644 'page_title' : 'calcmaps.com', 645 'page_path': url_dir 646 }); 647
647</script>
647 648 649
649<script> 650 // track events 651 function trackClickEvent(element, action, label) { 652 653 label = typeof(label) != 'undefined' ? label : ''; 654 655 if (typeof(gtag) !== 'undefined') { 656 657 gtag('event', element + '_' + action + (label != '' ? '_' + label : ''), { 658 send_to: 'G-857DKLZ3G3' 659 }); 660 661 } 662 console.log('GA4: ' + element + ' ' + action + ' ' + label); 663 } 664 </script>
664<script> 665 if (inside_iframe && document.referrer) { 666 try { 667 trackClickEvent('inside_iframe', new URL(document.referrer).hostname, document.referrer); 668 } catch(e) {} 669 } 670</script>
670 671<div class="modal fade" id="adb_modal" role="dialog"> 672 <div class="modal-dialog"> 673 <div class="modal-content"> 674 <div class="modal-header" style="min-height: 50px"> 675 <span class="modal-title tac" id="adb_modal_title"></span> 676 <button type="button" class="close" data-dismiss="modal" onclick="trackClickEvent('ad_block', 'close_alert')">×</button> 677 </div> 678 <div class="modal-body fs16 tac" id="adb_modal_alert_text"></div> 679 </div> 680 </div> 681</div>
682<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle.js" onerror="this.onerror=null;var s=document.createElement('script');s.src='https://www.calcmaps.com/js/leaflet/easy_print_2.1.9.js?v=52';document.head.appendChild(s);"></script>
682 683<div id="miniModal"> 684 <div class="miniModalBox"> 685 <div id="miniModalText"></div> 686 <button id="miniModalOk">OK</button> 687 </div> 688</div> 689</body> 690</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.