1<!DOCTYPE html> 2<html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> 7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 8 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 9 <title>Blog</title> 10 <meta name="description" content="Learn everything you need to know about compasses, from how they work to how to use them safely and effectively. Our blog covers a wide range of compass topics."> 11 <meta name="author" content="Developix"> 12 <meta name="theme-color" content="#5498e5"> 13 <meta name="color-scheme" content="light dark"> 14 <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"> 15 16 17 <link rel="canonical" href="https://onlinecompass.net/blog"> 18 <link rel="alternate" hreflang="x-default" href="https://onlinecompass.net" /> 19 20 21 <meta property="og:locale" content="en"> 22 <meta property="og:type" content="website"> 23 <meta property="og:title" content="Blog"> 24 <meta property="og:description" content="Learn everything you need to know about compasses, from how they work to how to use them safely and effectively. Our blog covers a wide range of compass topics."> 25 <meta property="og:site_name" content="Online Compass"> 26 <meta property="og:url" content="https://onlinecompass.net/blog"> 27 <meta property="og:image:type" content="image/jpeg"> 28 29 30 <meta name="twitter:card" content="summary_large_image"> 31 <meta name="twitter:title" content="Blog"> 32 <meta name="twitter:description" content="Learn everything you need to know about compasses, from how they work to how to use them safely and effectively. Our blog covers a wide range of compass topics."> 33 34 35 <link rel="apple-touch-icon" sizes="180x180" href="https://onlinecompass.net/icons/apple-touch-icon.png"> 36 <link rel="icon" type="image/png" sizes="32x32" href="https://onlinecompass.net/icons/favicon-32x32.png"> 37 <link rel="icon" type="image/png" sizes="16x16" href="https://onlinecompass.net/icons/favicon-16x16.png"> 38 <link rel="manifest" href="https://onlinecompass.net/icons/site.webmanifest"> 39 <link rel="mask-icon" href="https://onlinecompass.net/icons/safari-pinned-tab.svg" color="#5bbad5"> 40 <link rel="shortcut icon" href="https://onlinecompass.net/icons/onlinecompass-favicon.ico" type="image/x-icon"> 41 <meta name="msapplication-TileColor" content="#da532c"> 42 43 <meta name="csrf-token" content="2Z0nGM7NoCFltjfg8nAFg7ohrcOyUT5OLjJx3wig"> 44 45 46
46<script> 47 (function () { 48 // Bound to 3s: a slow/blocked /geo must fall back to OSM quickly rather 49 // than leaving the map on its loader indefinitely. 50 var ctrl = (typeof AbortController !== 'undefined') ? new AbortController() : null; 51 var timer = setTimeout(function () { if (ctrl) ctrl.abort(); }, 3000); 52 // window.COMPASS_GEO_URL is always unset in production (falls back to 53 // "/geo"). The local-only /local/esri-test harness sets it to point the 54 // shared fetch at a local force-China endpoint â NOT a production query 55 // param or header. 56 var geoUrl = window.COMPASS_GEO_URL || "/geo"; 57 window.COMPASS_GEO = fetch(geoUrl, { cache: "no-cache", signal: ctrl ? ctrl.signal : undefined }) 58 .then(function (r) { clearTimeout(timer); return r.json(); }) 59 .then(function (d) { window.COMPASS_CHINA = !!(d && d.china); return d; }) 60 .catch(function () { clearTimeout(timer); window.COMPASS_CHINA = false; return null; }); 61 })(); 62 63 var OSM_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"; 64 var ESRI_URL = "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}"; 65 66 window.getBaseLayer = function (L, opts) { 67 opts = opts || {}; 68 var realLayer = null, pendingMap = null, pendingHandlers = []; 69 70 // Create the real layer once /geo resolves, register any buffered 71 // handlers, THEN addTo(map) â so 'load' is bound before tiles load. 72 function flush() { 73 if (!realLayer || !pendingMap) return; 74 while (pendingHandlers.length) { 75 var h = pendingHandlers.shift(); 76 realLayer.on(h.evt, h.fn); 77 } 78 realLayer.addTo(pendingMap); 79 } 80 81 window.COMPASS_GEO.then(function (d) { 82 var cn = !!(d && d.china); // d === null on /geo failure/timeout â OSM 83 realLayer = L.tileLayer( 84 cn ? ESRI_URL : OSM_URL, 85 Object.assign({ attribution: cn ? "Tiles © Esri" : "", maxZoom: 19 }, opts) 86 ); 87 flush(); 88 }); 89 90 // Proxy: quacks like a tile layer for the two calls the map pages make. 91 return { 92 addTo: function (map) { pendingMap = map; flush(); return this; }, 93 on: function (evt, fn) { 94 if (realLayer) realLayer.on(evt, fn); 95 else pendingHandlers.push({ evt: evt, fn: fn }); 96 return this; 97 } 98 }; 99 }; 100</script>
100 101 102 <link rel="preconnect" href="https://pagead2.googlesyndication.com" crossorigin> 103 <link rel="preconnect" href="https://c.pubguru.net" crossorigin> 104 <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin> 105 106 107 <link rel="preload" href="/fonts/icons/icomoon.woff" as="font" type="font/woff" crossorigin> 108 109 110 111 112 113
113<script type="speculationrules"> 114{ 115 "prefetch": [ 116 { 117 "where": { "href_matches": "/*" }, 118 "eagerness": "conservative" 119 } 120 ] 121} 122</script>
122 123 124 125 <style id="critical-css"> 126@font-face{font-family:"icomoon";src:url("/fonts/icons/icomoon.woff") format("woff"),url("/fonts/icons/icomoon.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap} 127[class^="icon-"],[class*=" icon-"]{font-family:"icomoon"!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} 128.icon-trash:before{content:"\e900"}.icon-edit:before{content:"\e901"}.icon-maghrib:before{content:"\e902"}.icon-asr:before{content:"\e903"}.icon-fajr:before{content:"\e904"}.icon-isha:before{content:"\e905"}.icon-midnight:before{content:"\e906"}.icon-dhuhr:before{content:"\e907"}.icon-unlock:before{content:"\e908"}.icon-world:before{content:"\e909"}.icon-lock:before{content:"\e90a"}.icon-sea_level:before{content:"\e90b"}.icon-sunset:before{content:"\e90c"}.icon-sunrise:before{content:"\e90d"}.icon-theme:before{content:"\e90e"}.icon-share-2:before{content:"\e90f"}.icon-compass:before{content:"\e910"}.icon-map:before{content:"\e911"}.icon-keyboard_arrow_down:before{content:"\e912"}.icon-clock:before{content:"\e913"}.icon-distance:before{content:"\e914"}.icon-noon:before{content:"\e915"}.icon-qibla-sunrise:before{content:"\e916"}.icon-qibla-sunset:before{content:"\e917"}.icon-city:before{content:"\e918"}.icon-gps_fixed:before{content:"\e919"}.icon-power:before{content:"\e91a"}.icon-stop-circle:before{content:"\e91b"}.icon-menu:before{content:"\e919"}.icon-close:before{content:"\e91c"} 129:root{--bg-color:#fff;--main-color:#5498e5;--text-color:#5a5a5a;--text-blue:#1f5fb4;--accent-color:#f8c74b;--info-color:#dc3545} 130*,*::before,*::after{box-sizing:border-box;padding:0;margin:0;outline:0;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent} 131html{font-size:16px;scroll-behavior:smooth} 132html,body{overflow-x:hidden!important;width:100%!important;max-width:100%!important} 133body{font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:2;color:var(--text-color);min-height:100vh;background:var(--bg-color)} 134a{color:inherit!important;text-decoration:none;cursor:pointer} 135ul{list-style:none} 136label{cursor:pointer;user-select:none;font-size:.925rem} 137.skip-link{position:absolute;left:0;top:0;transform:translateY(-200%);z-index:1000;padding:8px 16px;background:#fff;color:var(--text-blue);border:2px solid var(--text-blue);border-radius:0 0 6px 0;text-decoration:none} 138.skip-link:focus,.skip-link:focus-visible{transform:translateY(0)} 139nav{width:100%;height:calc(60px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);background-color:#2c6cb0;color:#fff} 140nav .holder{display:flex!important;flex-direction:row;align-items:center;justify-content:space-between} 141nav ul{display:flex;gap:12px;height:100%;align-items:center;justify-content:center;cursor:pointer} 142nav .logo{height:60px;width:max-content;display:grid;grid-template-columns:auto auto;align-items:center;justify-content:center;gap:8px} 143nav .logo a{display:flex;align-items:center;justify-content:center} 144nav .logo i{font-size:2rem} 145.holder{margin:0 auto;max-width:1124px;width:100%;display:flex;flex-direction:column;position:relative} 146.compass{position:relative;height:auto;aspect-ratio:1/1;width:50%;border-radius:50%;box-shadow:0 0 15px rgba(0,0,0,.2);margin:6% auto} 147.compass .arrow{position:absolute;width:0;height:0;top:-20px;left:50%;transform:translateX(-50%);border-style:solid;border-width:30px 20px 0 20px;border-color:var(--accent-color) transparent transparent transparent;z-index:1} 148.compass>.compass-circle{position:absolute;width:100%;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);background-position:center;background-repeat:no-repeat;background-size:contain;transition:none!important} 149/* .coordinates (deg/lat/long readout) and .manage (share/lock/theme) are 150 position:absolute in app.css. Without these rules they sit in normal flow 151 inside .holder before app.css loads, adding ~150-250px; the instant app.css 152 arrives they snap to absolute, .holder collapses, and the whole page jumps 153 up â this was the single biggest CLS source on the compass pages (lab CLS 154 0.626). Pinning them absolute from first paint removes the reflow entirely. 155 .colors is the theme dropdown (absolute, hidden until .active). Exact copy 156 of _general.scss:273-292 and 368-384 so there is no visual change. */ 157.coordinates,.manage{position:absolute;
157left:0;top:5%;gap:4px;display:flex;flex-direction:column;align-items:flex-start} 158.manage{cursor:pointer;right:0;left:unset!important} 159.manage span{font-size:1.5rem} 160.colors{position:absolute;display:none} 161.right{display:flex;align-items:center;justify-content:center;font-size:1.8rem;cursor:pointer;position:relative;gap:16px} 162.right .blog{font-size:16px} 163.language,.change-theme{display:flex;align-items:center;justify-content:center;position:relative} 164.language{margin-left:24px} 165.change-theme{margin-top:10px} 166.lang{color:#000;font-size:.9rem;position:absolute;display:none;flex-direction:column;box-shadow:0 5px 25px rgba(0,0,0,.07);background:#fff;border-radius:4px;padding:4px 16px;top:40px;z-index:100;cursor:pointer;gap:8px;height:max-content;max-height:220px;overflow-y:scroll;user-select:none} 167.lang.active{display:block} 168.icon-theme{font-size:2rem!important} 169.start-btn{display:none} 170.mobile-menu{display:none;cursor:pointer} 171.mobile-menu .icon-close{display:none} 172.mobile-menu.active .icon-close{font-size:1.2rem;display:block} 173.mobile-menu.active .icon-menu{display:none} 174.mobile-menu+.language{margin-left:14px} 175.tools-menu{position:relative;display:flex;font-size:16px;gap:2rem} 176.tools-menu .icon-keyboard_arrow_down{display:initial} 177.tools-menu>li{z-index:70000;min-height:65px;
177display:flex;align-items:center;justify-content:center;gap:.25rem} 178.tools-menu ul{display:none} 179footer{width:100%;min-height:calc(60px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background-color:#2c6cb0;color:#fff;display:flex;align-items:center;justify-content:center} 180footer .holder{justify-content:space-between;flex-direction:row;font-size:.9rem} 181footer .holder ul{gap:16px;display:flex} 182/* LCP heading block (.content.meta h1) is the largest text element on the 183 location routes (where-am-i, what-city, what-country, what-is-my-zip-code, 184 what-is-my-address, what-county, what-state) and the homepage SEO section. 185 Without these rules the h1 paints at the UA default (2em / black) then 186 reflows to 1.25rem / blue once app.css arrives â delaying LCP and shifting 187 layout. Values are an exact copy of public/css/_general.scss so there is no 188 visual change, only earlier application. */ 189.content{min-height:calc(100vh - 222px);margin:5% 0;box-shadow:0 5px 25px rgba(0,0,0,.07);border-radius:12px;padding:24px;text-align:justify;color:#3e3e3e} 190.content.meta{min-height:max-content!important;margin-bottom:0!important} 191.content.options{margin-bottom:0!important} 192.speed-page .content,.elevation-page .content{height:max-content;min-height:auto} 193.content h1{font-size:1.25rem} 194.content .blue{color:var(--text-blue)} 195/* Images inside .content cards. Without these, <picture> (inline, 0-height) 196 wraps an <img> that renders at its natural width (up to 640px) and bursts 197 outside the card before async app.css arrives â the "content box separated 198 from image" bug. Making <picture> block and constraining <img> matches 199 _general.scss:338-343 (desktop: max-width 70%) and _responsive.scss:154 200 (mobile: max-width 96%) so there is zero CLS. */ 201.content picture{display:block;text-align:center} 202.content img{display:block;margin:24px auto;max-width:70%;height:auto} 203/* GPS coordinates page <img> (640x335, loading=lazy). The width/height attrs 204 should compute aspect-ratio automatically, but the lazy-load decode can 205 cause a brief 0-height state on the <picture> wrapper. Pinning the ratio 206 explicitly from first paint eliminates the residual 0.021 CLS entry. */ 207.gps-page .content img[width="640"][height="335"]{aspect-ratio:640/335} 208@media(max-width:800px){ 209html{font-size:14px} 210.compass{width:80%;margin-top:42%} 211nav .holder{padding:0 12px} 212.manage{position:relative!important;flex-direction:row;align-items:center;justify-content:center;gap:12px;margin-bottom:32px} 213.manage>span,.manage .change-theme{background-color:#fff;box-shadow:0 5px 25px rgba(0,0,0,.07);width:16%;aspect-ratio:1/1;margin-top:unset;border-radius:8px;display:flex;align-items:center;justify-content:center} 214footer{padding:8px 0 calc(8px + env(safe-area-inset-bottom))!important} 215footer p{text-align:center} 216footer .holder{align-items:center;justify-content:center;flex-direction:column;gap:12px} 217.mobile-menu{display:block} 218.mobile-menu+.language{margin-left:8px} 219.tools-menu{display:none} 220.holder .content{min-height:max-content;margin:5% 0!important} 221.content img{max-width:96%} 222.track-page #map{aspect-ratio:16/15} 223/* .gps-page .holder.gps #map gets height:350px (overriding the aspect-ratio:16/8 224 above) on mobile once app.css arrives â reserving it here prevents ~185px of 225 shift on /gps-coordinates. Mirrors _responsive.scss:249-255. */ 226.gps-page .holder.gps #map{height:350px;aspect-ratio:auto} 227} 228/* Ad-frame skeleton: reserve exact box-model from first paint so there is 229 zero height/visibility reflow when app.css arrives. The outer .ad-frame 230 holds the reserved min-height + responsive visibility + contain rules so 231 that AdSense's inline style overrides on the inner .ad-slot (which set 232 min-height:0!important; height:auto!important when an ad fails to fill) 233 cannot collapse the layout slot. Breakpoints are an exact copy of 234 _responsive.scss:474-560. */ 235.ad-frame{display:block;width:100%;text-align:center;padding:.5rem;margin:0 auto;min-height:120px;contain:layout paint;overflow:hidden;position:relative} 236.ad-frame.ad-horizontal{min-height:120px} 237.ad-frame.ad-square{min-height:280px} 238.ad-frame.ad-all{display:block!important} 239.ad-slot{display:block;width:100%;position:relative} 240@media(max-width:767px){ 241.ad-frame.ad-horizontal{min-height:250px} 242.ad-frame.ad-mobile{display:block!important} 243.ad-frame.ad-tablet{display:none} 244.ad-frame.ad-desktop{display:none} 245} 246@media(min-width:768px) and (max-width:1023px){ 247.ad-frame.ad-mobile{display:none} 248.ad-frame.ad-tablet{display:block!important} 249.ad-frame.ad-desktop{display:none} 250} 251@media(min-width:1024px){ 252.ad-frame.ad-mobile{display:none} 253.ad-frame.ad-tablet{display:none} 254.ad-frame.ad-desktop{display:block!important}
255/* Desktop horizontal ads served via PubGuru header-bidding + 256 AdSense commonly return 970x250 billboards (the old 120px reservation 257 only fit 728x90 / 970x90 leaderboards, so any billboard creative 258 pushed content by ~130px â CLS 0.64 on .ad-desktop.ad-horizontal, 259 90.2% poor). Reserving 250px covers the largest typical creative 260 and eliminates the shift regardless of which size fills. !important is 261 required: app.css (loaded after this inline block) still sets 120px on 262 desktop and wins on equal specificity, reintroducing the overflow. */ 263.ad-frame.ad-horizontal{min-height:250px!important} 264} 265/* Static loading placeholder on the .ad-frame BACKGROUND (not a ::before 266 overlay). A background paints BEHIND the ad <ins>/iframe so it can never 267 cover the creative; the filled ad's opaque iframe covers it, and empty slots 268 show this gray box until the ad resolves. STATIC (no animation) = zero 269 paint/main-thread cost -> cannot affect INP (an animated background-position 270 version added mobile paint pressure). Cleared (background:none) the moment an 271 ad iframe appears (:has(iframe)) or the slot resolves. !important wins over 272 the committed app.css (no build step). */ 273.ad-frame::before{display:none!important} 274.ad-frame{background:#eef1f5!important} 275.ad-frame:has(iframe),.ad-frame:has(.ad-slot.is-loaded),.ad-frame:has(ins[data-ad-status="filled"]),.ad-frame:has(ins[data-ad-status="unfilled"]){background:none!important} 276/* #map container reservation. #map holds only absolutely-positioned children 277 (search box, leaflet-loader), so its intrinsic height is 0 before app.css. 278 When app.css arrives, .track-page #map gets aspect-ratio:16/8, .elevation-page 279 #map gets height:400px, and mobile .track-page #map gets aspect-ratio:16/15. 280 Reserving these values here prevents content below the map from being pushed 281 down â mirrors _general.scss:1307-1311, _general.scss:1198-1201, and 282 _responsive.scss:48-50. */ 283#map{width:100%;aspect-ratio:16/8;position:relative;background:#ddd} 284.elevation-page #map{height:400px;aspect-ratio:auto} 285/* Location-services toggle (homepage + location/map routes). #switch is 286 75x40 in _general.scss:504 and .toggle_icon has margin-bottom:50px; 287 without these the toggle paints as plain OFF/ON text then reflows. */ 288.toggle_icon{align-items:center;justify-content:center;margin-bottom:50px;flex-direction:row;gap:8px} 289.line-page .toggle_icon,.circlemap-page .toggle_icon{margin-top:2rem;padding-bottom:.5rem} 290#switch{width:75px;height:40px;contain:layout style} 291.toggle{position:relative;border:2px solid #444249;border-radius:20px;box-sizing:border-box} 292.toggle-button,.toggle-text-off,.toggle-text-on,.glow-comp{position:absolute} 293.toggle-button{top:3px;width:65px;bottom:3px;right:3px;background-color:#444249;border-radius:23px;transform:scaleX(.4308);transform-origin:left center} 294.toggle-text-on{top:0;bottom:0;left:0;right:0;line-height:36px;text-align:center;font-size:18px;color:transparent} 295.toggle-text-off{top:0;bottom:0;right:6px;line-height:36px;text-align:center;font-size:14px;font-weight:bold;color:#444249} 296.glow-comp{opacity:0;top:10px;bottom:10px;left:10px;right:10px;border-radius:6px} 297/* .gps-info card reservation. The card renders 8 <p> rows whose <span> values 298 are filled asynchronously by setInfoData() after the nominatim reverse- 299 geocode resolves. Until then the card is ~64px shorter (zip column row + 300 address wrap row), and when the fetch resolves the card grows and pushes 301 the map + ad slots below â lab CLS 0.216 on /what-is-my-zip-code. Pin the 302 populated height here so the shift never happens. Mirrors _general.scss 303 (420px) and _responsive.scss (380px on mobile). */ 304.gps-info{display:flex;flex-direction:column;gap:1rem;min-height:420px} 305@media(max-width:800px){.gps-info{min-height:380px}} 306/* .info-text (location-services hint shown above ad slots on GPS / location 307 routes). Without this rule it renders at UA default styling on first paint, 308 then gains margin-top:-2.7rem + margin-bottom:1.7rem + bold + red from async 309 app.css â the vertical delta cascades into a CLS shift on the slots below. 310 Mirrors _general.scss:841-854 so there is no visual change, only earlier 311 application. */ 312.info-text{margin-top:-2.7rem;margin-bottom:1.7rem;width:100%;text-align:center;color:var(--info-color);font-size:1rem;font-weight:bold;display:none} 313.info-text.active{display:block} 314</style> 315 316 <link rel="stylesheet" href="https://onlinecompass.net/css/app.css"> 317 318 319
320 <link rel="preconnect" href="https://consent.cookiebot.com" crossorigin> 321<link rel="preload" href="https://consent.cookiebot.com/uc.js" as="script">
322<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="23c00000-47bc-4b9f-9c79-76cf1194cb4a" data-blockingmode="auto" data-framework="TCFv2.2" type="text/javascript" async></script>
322 323 324 325<style id="cookiebot-dialog-trim"> 326 #CybotCookiebotDialogBodyButtonDetails, 327 #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAllSelection, 328 #CybotCookiebotDialogBodyLevelButtonsContainer, 329 #CybotCookiebotDialogBodyContentDetails, 330 #CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonWrapper { 331 display: none !important; 332 } 333 #CybotCookiebotDialogBodyButtonAccept { 334 background-color: #5498e5 !important; 335 color: #fff !important; 336 border-radius: 8px !important; 337 font-weight: 600 !important; 338 } 339 #CybotCookiebotDialogBodyButtonDecline { 340 background-color: transparent !important; 341 color: #5498e5 !important; 342 border: 1px solid #5498e5 !important; 343 border-radius: 8px !important; 344 } 345 346 347 #CybotCookiebotDialog, 348 #CybotCookiebotDialog > div, 349 #CybotCookiebotDialogBody, 350 #CybotCookiebotDialogBodyContent, 351 #CybotCookiebotDialogFooter { 352 animation: none !important; 353 transition: none !important; 354 } 355 #CybotCookiebotDialog { 356 contain: layout paint style !important; 357 } 358 #CybotCookiebotDialogBodyContentText { 359 content-visibility: auto !important; 360 contain-intrinsic-size: auto 500px !important; 361 } 362</style> 363 364 365
365<script> 366 window.dataLayer = window.dataLayer || []; 367 // Tell gtag.js / Google Ads to read consent from the IAB TCF v2 CMP 368 // (Cookiebot, registered via data-framework="TCFv2.2" in 369 // partials/cookiebot.blade.php) instead of Google falling back to its 370 // own Funding Choices consent wall. Must be set before gtag.js runs. 371 window['gtag_enable_tcf_support'] = true; 372 function gtag() { 373 dataLayer.push(arguments); 374 } 375 gtag('js', new Date()); 376 gtag('config', 'G-6VRE1PXG9R'); 377 (function () { 378 var done = false; 379 function load() { 380 if (done) return; 381 done = true; 382 var s = document.createElement('script'); 383 s.async = true; 384 s.src = 'https://www.googletagmanager.com/gtag/js?id=G-6VRE1PXG9R'; 385 document.head.appendChild(s); 386 } 387 if ('requestIdleCallback' in window) { 388 window.requestIdleCallback(load, { timeout: 3000 }); 389 } else { 390 window.setTimeout(load, 3000); 391 } 392 window.addEventListener('load', load, { once: true }); 393 })(); 394 </script>
394 395 396 397
397<script async src="https://rum.corewebvitals.io/cwv/6a5e0000b1181c212e8046dd.js"></script>
397 398 399 400 401
401<script defer src="https://onlinecompass.net/js/ads.js"></script>
401 402 403 404 <link rel="modulepreload" href="https://onlinecompass.net/build/assets/vitals-B-N5mDEY.js" />
404<script type="module" src="https://onlinecompass.net/build/assets/vitals-B-N5mDEY.js"></script>
404 </head> 405 406 <body class="ltr-direction" 407 style="direction: ltr"> 408 409 <a href="#main" class="skip-link">Skip to main content</a> 410 411 <main id="main"> 412 413 <nav> 414 <div class="holder"> 415 416 <div class="logo"> 417 418 <a href="https://onlinecompass.net" aria-label="Online Compass - Live and Free Compass to Find North Direction"><i class="icon-compass" aria-hidden="true"></i></a> 419 420 </div> 421 422 <div class="right"> 423 424
424<script> 425 window.addEventListener("DOMContentLoaded", (event) => { 426 427 document.querySelector(".mobile-menu").addEventListener("click", function() { 428 429 document.querySelector('.tools-menu').classList.toggle('active'); 430 document.querySelector('.mobile-menu').classList.toggle('active'); 431 document.querySelector("body").classList.toggle('no-scroll'); 432 433 }); 434 435 document.querySelectorAll('.tools-menu li').forEach(element => { 436 437 element.addEventListener("click", function() { 438 439 element.classList.toggle('open') 440 }) 441 }); 442 443 document.querySelectorAll('.tools-menu li i').forEach(element => { 444 445 element.addEventListener("click", function() { 446 447 element.parentElement.classList.toggle('open') 448 }) 449 }); 450 451 }) 452</script>
452 453 454<ul class="tools-menu"> 455 456 <li> 457 458 <span>Map Tools</span> <i 459 class="icon-keyboard_arrow_down"></i> 460 461 <ul> 462 463 <li> 464 465 <a href="https://onlinecompass.net/radius-map"> 466 Draw a Radius Map 467 </a> 468 469 </li> 470 471 <li> 472 <a href="https://onlinecompass.net/line-map"> 473 Draw a Line on the Map 474 </a> 475 </li> 476 477 <li> 478 <a 479 href="https://onlinecompass.net/pin-map"> 480 Create a Pin Map 481 </a> 482 </li> 483 484 <li> 485 <a href="https://onlinecompass.net/gps-coordinates"> 486 GPS Coordinates 487 </a> 488 </li> 489 490 <li> 491 <a href="https://onlinecompass.net/what-country-am-i-in"> 492 What Country Am I in? 493 </a> 494 </li> 495 496 <li> 497 <a href="https://onlinecompass.net/what-city-am-i-in"> 498 What City Am I in? 499 </a> 500 </li> 501 502 <li> 503 <a href="https://onlinecompass.net/what-county-am-i-in"> 504 What County Am I in? 505 </a> 506 </li> 507 508 <li> 509 <a href="https://onlinecompass.net/what-state-am-i-in"> 510 What State Am I in? 511 </a> 512 </li> 513 514 <li> 515 <a 516 href="https://onlinecompass.net/where-am-i"> 517 Where Am I? 518 </a> 519 </li> 520 521 <li> 522 <a href="https://onlinecompass.net/what-is-my-address"> 523 What is My Address? 524 </a> 525 </li> 526 527 <li> 528 <a href="https://onlinecompass.net/what-is-my-zip-code"> 529 What is My Zip Code? 530 </a> 531 </li> 532 533 </ul> 534 </li> 535 536 537 538 <li> 539 540 <span>Calculators</span><i 541 class="icon-keyboard_arrow_down"></i> 542 543 <ul> 544 545 <li> 546 <a href="https://onlinecompass.net/elevation"> 547 What is My Elevation? 548 </a> 549 </li> 550 551 <li> 552 <a href="https://onlinecompass.net/running-tracker"> 553 How Far Did I Run? 554 </a> 555 </li> 556 557 <li> 558 <a href="https://onlinecompass.net/walking-tracker"> 559 Walking Tracker 560 </a> 561 </li> 562 563 <li> 564 <a href="https://onlinecompass.net/cycling-tracker"> 565 Cycling Tracker 566 </a> 567 </li> 568 569 570 <li> 571 <a href="https://onlinecompass.net/driving-tracker"> 572 How Far Did I Drive? 573 </a> 574 </li> 575 576 <li> 577 <a 578 href="https://onlinecompass.net/speedometer"> 579 Online Speedometer 580 </a> 581 </li> 582 583 <li> 584 <a 585 href="https://onlinecompass.net/ruler"> 586 Online Ruler 587 </a> 588 </li> 589 590 <li> 591 <a 592 href="https://onlinecompass.net/distance-calculator"> 593 Distance Calculator 594 </a> 595 </li> 596 597 </ul> 598 599 </li> 600 601 <li class="not"> 602 <a 603 href="https://onlinecompass.net/qibla-finder"> 604 Qibla Finder 605 </a> 606 </li> 607 608 <li class="not"> 609 <a href="https://onlinecompass.net/blog"> 610 Blog 611 </a> 612 </li> 613 614</ul> 615 616 617<div class="mobile-menu"> 618 619 <i class="icon-menu"></i> 620 <i class="icon-close"></i> 621 622</div> 623 624 </div> 625 626 </div> 627 628 </nav> 629 630 <div class="holder"> 631 632 <div class="content meta active"> 633 634 <h1 class="blue"> 635 Blog 636 </h1> 637 638 <p> 639 Learn everything you need to know about compasses, from how they work to how to use them safely and effectively. Our blog covers a wide range of compass topics. 640 </p> 641 642 </div> 643 644 </div> 645 646 <div class="holder"> 647 648 <ul class="blogs-item"> 649 <li> 650 <a href='https://onlinecompass.net/blog/how-to-make-your-own-compass'> 651 <img src="/images/Own.webp" alt="How to Make Your Own Compass?" width="640" height="360" loading="lazy" decoding="async" />
652 <span>How to Make Your Own Compass?</span> 653 </a> 654 </li> 655 <li> 656 <a href='https://onlinecompass.net/blog/how-do-you-read-a-compass'> 657 <img src="/images/Read.webp" alt="How Do You Read a Compass?" width="640" height="360" loading="lazy" decoding="async" /> 658 <span>How Do You Read a Compass?</span> 659 </a> 660 </li> 661 <li> 662 <a href='https://onlinecompass.net/blog/what-are-the-different-types-of-compass'> 663 <img src="/images/Different-Types.webp" alt="What Are the Different Types of Compass?" width="640" height="360" loading="lazy" decoding="async" /> 664 <span>What Are the Different Types of Compass?</span> 665 </a> 666 </li> 667 <li> 668 <a href='https://onlinecompass.net/blog/can-a-compass-be-wrong'> 669 <img src="/images/wrong.webp" alt="Can a Compass be Wrong?" width="640" height="360" loading="lazy" decoding="async" /> 670 <span>Can a Compass be Wrong?</span> 671 </a> 672 </li> 673 <li> 674 <a href='https://onlinecompass.net/blog/how-to-navigate-without-a-Compass'> 675 <img src="/images/Navigate.webp" alt="How to Navigate Without a Compass?" width="640" height="360" loading="lazy" decoding="async" /> 676 <span>How to Navigate Without a Compass?</span> 677 </a> 678 </li> 679 <li> 680 <a href='https://onlinecompass.net/blog/what-are-some-reasons-why-people-get-lost'> 681 <img src="/images/Reasons.webp" alt="What Are Some Reasons Why People Get Lost?" width="640" height="360" loading="lazy" decoding="async" /> 682 <span>What Are Some Reasons Why People Get Lost?</span> 683 </a> 684 </li> 685 <li> 686 <a href='https://onlinecompass.net/blog/what-is-the-history-of-compass'> 687 <img src="/images/History.webp" alt="What is the History of Compass?" width="640" height="360" loading="lazy" decoding="async" /> 688 <span>What is the History of Compass?</span> 689 </a> 690 </li> 691 <li> 692 <a href='https://onlinecompass.net/blog/compass-vs-gps'> 693 <img src="/images/blog-compass-vs-gps-1-640.webp" alt="Compass vs GPS: Which Navigation Tool Should You Trust?" width="640" height="360" loading="lazy" decoding="async" /> 694 <span>Compass vs GPS: Which Navigation Tool Should You Trust?</span> 695 </a> 696 </li> 697 <li> 698 <a href='https://onlinecompass.net/blog/common-compass-mistakes-beginners'> 699 <img src="/images/blog-common-compass-mistakes-beginners-1-640.webp" alt="Common Compass Mistakes Beginners Make" width="640" height="360" loading="lazy" decoding="async" /> 700 <span>Common Compass Mistakes Beginners Make</span> 701 </a> 702 </li> 703 <li> 704 <a href='https://onlinecompass.net/blog/true-north-magnetic-grid'> 705 <img src="/images/blog-true-north-magnetic-grid-1-640.webp" alt="Difference Between True North, Magnetic North, and Grid North" width="640" height="360" loading="lazy" decoding="async" /> 706 <span>Difference Between True North, Magnetic North, and Grid North</span> 707 </a> 708 </li> 709 <li> 710 <a href='https://onlinecompass.net/blog/mistakes-finding-qibla'> 711 <img src="/images/blog-mistakes-finding-qibla-1-640.webp" alt="Common Mistakes When Finding Qibla Direction and How to Avoid Them" width="640" height="360" loading="lazy" decoding="async" />
712 <span>Common Mistakes When Finding Qibla Direction and How to Avoid Them</span> 713 </a> 714 </li> 715 <li> 716 <a href='https://onlinecompass.net/blog/why-compass-point-north'> 717 <img src="/images/blog-why-compass-point-north-1-640.webp" alt="Why Compasses Point North: The Science Explained" width="640" height="360" loading="lazy" decoding="async" /> 718 <span>Why Compasses Point North: The Science Explained</span> 719 </a> 720 </li> 721 <li> 722 <a href='https://onlinecompass.net/blog/do-compasses-work-everywhere'> 723 <img src="/images/blog-do-compasses-work-everywhere-1-640.webp" alt="Do Compasses Work Everywhere on Earth?" width="640" height="360" loading="lazy" decoding="async" /> 724 <span>Do Compasses Work Everywhere on Earth?</span> 725 </a> 726 </li> 727 <li> 728 <a href='https://onlinecompass.net/blog/how-metal-objects-affect-compass'> 729 <img src="/images/blog-how-metal-objects-affect-compass-1-640.webp" alt="How Metal Objects Affect Compass Accuracy?" width="640" height="360" loading="lazy" decoding="async" /> 730 <span>How Metal Objects Affect Compass Accuracy?</span> 731 </a> 732 </li> 733 <li> 734 <a href='https://onlinecompass.net/blog/what-are-gps-coordinates'> 735 <img src="/images/blog-what-are-gps-coordinates-1-640.webp" alt="What Are GPS Coordinates and How Do They Work?" width="640" height="360" loading="lazy" decoding="async" /> 736 <span>What Are GPS Coordinates and How Do They Work?</span> 737 </a> 738 </li> 739 <li> 740 <a href='https://onlinecompass.net/blog/why-gps-location-wrong'> 741 <img src="/images/blog-why-gps-location-wrong-1-640.webp" alt="Why GPS Location Can Be Wrong Sometimes?" width="640" height="360" loading="lazy" decoding="async" /> 742 <span>Why GPS Location Can Be Wrong Sometimes?</span> 743 </a> 744 </li> 745 <li> 746 <a href='https://onlinecompass.net/blog/what-is-radius-map'> 747 <img src="/images/blog-what-is-radius-map-1-640.webp" alt="What Is a Radius Map and Why Itâs Useful?" width="640" height="360" loading="lazy" decoding="async" /> 748 <span>What Is a Radius Map and Why Itâs Useful?</span> 749 </a> 750 </li> 751 <li> 752 <a href='https://onlinecompass.net/blog/miles-vs-kilometers'> 753 <img src="/images/blog-miles-vs-kilometers-1-640.webp" alt="Miles vs Kilometers: When to Use Each" width="640" height="360" loading="lazy" decoding="async" /> 754 <span>Miles vs Kilometers: When to Use Each</span> 755 </a> 756 </li> 757 <li> 758 <a href='https://onlinecompass.net/blog/sea-level-explained'> 759 <img src="/images/blog-sea-level-explained-1-640.webp" alt="Sea Level Explained: What Does It Mean?" width="640" height="360" loading="lazy" decoding="async" /> 760 <span>Sea Level Explained: What Does It Mean?</span> 761 </a> 762 </li> 763 <li> 764 <a href='https://onlinecompass.net/blog/what-happens-compass-near-poles'> 765 <img src="/images/blog-what-happens-compass-near-poles-1-640.webp" alt="What Happens to a Compass Near the Poles?" width="640" height="360" loading="lazy" decoding="async" /> 766 <span>What Happens to a Compass Near the Poles?</span> 767 </a> 768 </li> 769 <li> 770 <a href='https://onlinecompass.net/blog/how-compasses-help-emergency'> 771 <img src="/images/blog-how-compasses-help-emergency-1-640.webp" alt="How Compasses Help in Emergency Survival Situations?" width="640" height="360" loading="lazy" decoding="async" />
772 <span>How Compasses Help in Emergency Survival Situations?</span> 773 </a> 774 </li> 775 <li> 776 <a href='https://onlinecompass.net/blog/why-qibla-direction-differs'> 777 <img src="/images/blog-why-qibla-direction-differs-1-640.webp" alt="Why Qibla Direction Differs Between Countries?" width="640" height="360" loading="lazy" decoding="async" /> 778 <span>Why Qibla Direction Differs Between Countries?</span> 779 </a> 780 </li> 781 <li> 782 <a href='https://onlinecompass.net/blog/does-magnetic-declination-affect-qibla'> 783 <img src="/images/blog-does-magnetic-declination-affect-qibla-1-640.webp" alt="Does Magnetic Declination Affect Qibla Direction?" width="640" height="360" loading="lazy" decoding="async" /> 784 <span>Does Magnetic Declination Affect Qibla Direction?</span> 785 </a> 786 </li> 787 <li> 788 <a href='https://onlinecompass.net/blog/what-affects-gps-accuracy-phones'> 789 <img src="/images/blog-what-affects-gps-accuracy-phones-1-640.webp" alt="What Affects GPS Accuracy on Mobile Phones?" width="640" height="360" loading="lazy" decoding="async" /> 790 <span>What Affects GPS Accuracy on Mobile Phones?</span> 791 </a> 792 </li> 793 <li> 794 <a href='https://onlinecompass.net/blog/how-gps-accuracy-differs-cities'> 795 <img src="/images/blog-how-gps-accuracy-differs-cities-1-640.webp" alt="How GPS Accuracy Differs in Cities vs Rural Areas?" width="640" height="360" loading="lazy" decoding="async" /> 796 <span>How GPS Accuracy Differs in Cities vs Rural Areas?</span> 797 </a> 798 </li> 799 <li> 800 <a href='https://onlinecompass.net/blog/how-elevation-affects-gps'> 801 <img src="/images/blog-how-elevation-affects-gps-1-640.webp" alt="How Elevation Affects GPS Accuracy?" width="640" height="360" loading="lazy" decoding="async" /> 802 <span>How Elevation Affects GPS Accuracy?</span> 803 </a> 804 </li> 805 <li> 806 <a href='https://onlinecompass.net/blog/why-do-zip-codes'> 807 <img src="/images/blog-why-do-zip-codes-1-640.webp" alt="Why Do ZIP Codes Matter?" width="640" height="360" loading="lazy" decoding="async" /> 808 <span>Why Do ZIP Codes Matter?</span> 809 </a> 810 </li> 811 <li> 812 <a href='https://onlinecompass.net/blog/can-compass-work-without-magnetic'> 813 <img src="/images/blog-can-compass-work-without-magnetic-1-640.webp" alt="Can a Compass Work Without Magnetic North?" width="640" height="360" loading="lazy" decoding="async" /> 814 <span>Can a Compass Work Without Magnetic North?</span> 815 </a> 816 </li> 817 <li> 818 <a href='https://onlinecompass.net/blog/how-long-compass-stay-accurate'> 819 <img src="/images/blog-how-long-compass-stay-accurate-1-640.webp" alt="How Long Does a Compass Stay Accurate Over Time?" width="640" height="360" loading="lazy" decoding="async" /> 820 <span>How Long Does a Compass Stay Accurate Over Time?</span> 821 </a> 822 </li> 823 <li> 824 <a href='https://onlinecompass.net/blog/how-early-muslims-determined-qibla'> 825 <img src="/images/blog-how-early-muslims-determined-qibla-1-640.webp" alt="How Early Muslims Determined Qibla Direction" width="640" height="360" loading="lazy" decoding="async" />
826 <span>How Early Muslims Determined Qibla Direction</span> 827 </a> 828 </li> 829 </ul> 830 831 </div> 832 833 </main> 834 835 <footer aria-label="Site footer"> 836 <div class="holder"> 837 <p>The full rights to Copyright © 2023 are reserved by onlinecompass.net</p> 838 <nav aria-label="Footer navigation"> 839 <ul> 840 <li><a href="https://onlinecompass.net/privacy-policy">Privacy Policy</a></li> 841 <li><a href="https://onlinecompass.net/terms-service">Terms of Service</a></li> 842 <li><a href="https://onlinecompass.net/about-us">About Us</a></li> 843 </ul> 844 </nav> 845 </div> 846 </footer> 847 848 849
849<script> 850 if ('serviceWorker' in navigator) { 851 window.addEventListener('load', function () { 852 navigator.serviceWorker.register('/sw.js', { scope: '/' }).catch(function () {}); 853 }); 854 } 855 </script>
855 856 857
857<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"f8d0414d717a4bbf892a330646190281","r":1,"spa":2}' crossorigin="anonymous"></script>
vendor: 1 bytes, line 857
857
858<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a441cc4bae84a577',t:'MTc5MDkyNDA5MA=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
858</body> 859 860</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.