{"id":774,"date":"2026-06-22T20:44:08","date_gmt":"2026-06-22T10:44:08","guid":{"rendered":"https:\/\/silcom.io\/?page_id=774"},"modified":"2026-06-22T20:44:08","modified_gmt":"2026-06-22T10:44:08","slug":"world-clock","status":"publish","type":"page","link":"https:\/\/silcom.io\/world-clock\/","title":{"rendered":"World Clock"},"content":{"rendered":"\t<section class=\"silcom-world-clock\" data-silcom-world-clock>\n\t\t<div class=\"silcom-world-clock__inner\">\n\t\t\t<nav class=\"silcom-world-clock__breadcrumb\" aria-label=\"Breadcrumb\">\n\t\t\t\t<a href=\"https:\/\/silcom.io\/\">Home<\/a><span aria-hidden=\"true\">\/<\/span><span>World Clock<\/span>\n\t\t\t<\/nav>\n\t\t\t<div class=\"silcom-world-clock__header\">\n\t\t\t\t<p>Silcom Tools<\/p>\n\t\t\t\t<h1>World Clock<\/h1>\n\t\t\t\t<span>Move across the dotted world map or click a region to reveal nearby cities and their current local times.<\/span>\n\t\t\t<\/div>\n\t\t\t<form class=\"silcom-world-clock__search\" data-world-clock-search>\n\t\t\t\t<label for=\"silcom-world-clock-city\">Search city<\/label>\n\t\t\t\t<div>\n\t\t\t\t\t<input id=\"silcom-world-clock-city\" type=\"search\" placeholder=\"Try Sydney, London, Tokyo, New York...\" autocomplete=\"off\" data-world-clock-search-input>\n\t\t\t\t\t<button type=\"submit\">Search<\/button>\n\t\t\t\t<\/div>\n\t\t\t\t<p data-world-clock-search-note>Search a city, or click anywhere on the map.<\/p>\n\t\t\t<\/form>\n\t\t\t<div class=\"silcom-world-clock__grid\">\n\t\t\t\t<section class=\"silcom-world-clock__map-card\">\n\t\t\t\t\t<div class=\"silcom-world-clock__map-wrap\">\n\t\t\t\t\t\t<canvas data-world-clock-map aria-label=\"Dotted world map\"><\/canvas>\n\t\t\t\t\t\t<div class=\"silcom-world-clock__hint\">Hover or click the dotted map<\/div>\n\t\t\t\t\t\t<div class=\"silcom-world-clock__popover\" data-world-clock-popover hidden><\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t\t\t<aside class=\"silcom-world-clock__panel\">\n\t\t\t\t\t<h2 data-world-clock-title>Nearest cities<\/h2>\n\t\t\t\t\t<p data-world-clock-summary>Point anywhere on the map to see likely city matches.<\/p>\n\t\t\t\t\t<div class=\"silcom-world-clock__city-list\" data-world-clock-list><\/div>\n\t\t\t\t\t<div class=\"silcom-world-clock__axis-block\">\n\t\t\t\t\t\t<h3 data-world-clock-axis-title>Same time band<\/h3>\n\t\t\t\t\t\t<p data-world-clock-axis-summary>Cities aligned near the same vertical timezone line.<\/p>\n\t\t\t\t\t\t<div class=\"silcom-world-clock__city-list silcom-world-clock__city-list--axis\" data-world-clock-axis-list><\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/aside>\n\t\t\t\t<section class=\"silcom-world-clock__converter\" data-world-clock-converter>\n\t\t\t\t\t<div class=\"silcom-world-clock__converter-header\">\n\t\t\t\t\t\t<p>Time converter<\/p>\n\t\t\t\t\t\t<h2>If it is 10:00 PM in one city, what time is it somewhere else?<\/h2>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<form class=\"silcom-world-clock__converter-form\" data-world-clock-converter-form>\n\t\t\t\t\t\t<label>\n\t\t\t\t\t\t\t<span>From city<\/span>\n\t\t\t\t\t\t\t<input type=\"search\" value=\"London\" list=\"silcom-world-clock-city-options\" data-time-from-city>\n\t\t\t\t\t\t\t<div class=\"silcom-world-clock__suggestions\" data-time-from-suggestions><\/div>\n\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t<label>\n\t\t\t\t\t\t\t<span>Source date<\/span>\n\t\t\t\t\t\t\t<input type=\"date\" data-time-date>\n\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t<label>\n\t\t\t\t\t\t\t<span>Source time<\/span>\n\t\t\t\t\t\t\t<input type=\"time\" value=\"22:00\" data-time-source>\n\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t<label>\n\t\t\t\t\t\t\t<span>Destination type<\/span>\n\t\t\t\t\t\t\t<select data-time-target-type>\n\t\t\t\t\t\t\t\t<option value=\"city\">City<\/option>\n\t\t\t\t\t\t\t\t<option value=\"country\">Country<\/option>\n\t\t\t\t\t\t\t<\/select>\n\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t<label>\n\t\t\t\t\t\t\t<span data-time-target-label>To city<\/span>\n\t\t\t\t\t\t\t<input type=\"search\" value=\"Auckland\" list=\"silcom-world-clock-city-options\" data-time-target>\n\t\t\t\t\t\t\t<div class=\"silcom-world-clock__suggestions\" data-time-target-suggestions><\/div>\n\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t<button type=\"submit\">Calculate<\/button>\n\t\t\t\t\t<\/form>\n\t\t\t\t\t<p class=\"silcom-world-clock__converter-note\" data-time-note>Choose a source city, time and destination.<\/p>\n\t\t\t\t\t<datalist id=\"silcom-world-clock-city-options\" data-city-options><\/datalist>\n\t\t\t\t\t<datalist id=\"silcom-world-clock-country-options\" data-country-options><\/datalist>\n\t\t\t\t\t<div class=\"silcom-world-clock__city-list silcom-world-clock__converter-results\" data-time-results><\/div>\n\t\t\t\t<\/section>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/section>\n\t<script>\n\t(function(){\n\t\tvar root=document.querySelector('[data-silcom-world-clock]'); if(!root)return;\n\t\tvar canvas=root.querySelector('[data-world-clock-map]'), pop=root.querySelector('[data-world-clock-popover]'), list=root.querySelector('[data-world-clock-list]'), title=root.querySelector('[data-world-clock-title]'), summary=root.querySelector('[data-world-clock-summary]');\n\t\tvar axisList=root.querySelector('[data-world-clock-axis-list]'), axisTitle=root.querySelector('[data-world-clock-axis-title]'), axisSummary=root.querySelector('[data-world-clock-axis-summary]');\n\t\tvar search=root.querySelector('[data-world-clock-search]'), searchInput=root.querySelector('[data-world-clock-search-input]'), searchNote=root.querySelector('[data-world-clock-search-note]');\n\t\tvar converter=root.querySelector('[data-world-clock-converter-form]'), converterDate=root.querySelector('[data-time-date]'), converterFrom=root.querySelector('[data-time-from-city]'), converterTime=root.querySelector('[data-time-source]'), converterTargetType=root.querySelector('[data-time-target-type]'), converterTarget=root.querySelector('[data-time-target]'), converterTargetLabel=root.querySelector('[data-time-target-label]'), converterNote=root.querySelector('[data-time-note]'), converterResults=root.querySelector('[data-time-results]'), cityOptions=root.querySelector('[data-city-options]'), countryOptions=root.querySelector('[data-country-options]'), fromSuggestions=root.querySelector('[data-time-from-suggestions]'), targetSuggestions=root.querySelector('[data-time-target-suggestions]');\n\t\tvar ctx=canvas.getContext('2d'), activeCities=[], activeAxisCities=[];\n\t\tfunction isMobileWorldClock(){return window.matchMedia('(max-width: 620px)').matches;}\n\t\tvar activePoint={x:20,y:20};\n\t\tvar dotSource=\"https:\\\/\\\/silcom.io\\\/wp-content\\\/themes\\\/villavista\\\/assets\\\/world-clock-dots.json\";\n\t\tvar citySource=\"https:\\\/\\\/silcom.io\\\/wp-content\\\/themes\\\/villavista\\\/assets\\\/world-clock-cities.json\";\n\t\tvar dotPoints=[];\n\t\tvar storageKey='silcom.worldClock.v1';\n\t\tfunction readMemory(){try{return JSON.parse(localStorage.getItem(storageKey)||'{}')||{};}catch(e){return{};}}\n\t\tfunction writeMemory(data){try{localStorage.setItem(storageKey,JSON.stringify(Object.assign(readMemory(),data)));}catch(e){}}\n\t\tvar memory=readMemory();\n\t\tvar cities=[\n\t\t\t{name:'Auckland',country:'New Zealand',lat:-36.85,lon:174.76,tz:'Pacific\/Auckland'},\n\t\t\t{name:'Wellington',country:'New Zealand',lat:-41.29,lon:174.78,tz:'Pacific\/Auckland'},\n\t\t\t{name:'Christchurch',country:'New Zealand',lat:-43.53,lon:172.63,tz:'Pacific\/Auckland'},\n\t\t\t{name:'Sydney',country:'Australia',lat:-33.87,lon:151.21,tz:'Australia\/Sydney'},\n\t\t\t{name:'Melbourne',country:'Australia',lat:-37.81,lon:144.96,tz:'Australia\/Melbourne'},\n\t\t\t{name:'Perth',country:'Australia',lat:-31.95,lon:115.86,tz:'Australia\/Perth'},\n\t\t\t{name:'Singapore',country:'Singapore',lat:1.35,lon:103.82,tz:'Asia\/Singapore'},\n\t\t\t{name:'Tokyo',country:'Japan',lat:35.68,lon:139.65,tz:'Asia\/Tokyo'},\n\t\t\t{name:'Seoul',country:'South Korea',lat:37.56,lon:126.98,tz:'Asia\/Seoul'},\n\t\t\t{name:'Hong Kong',country:'Hong Kong',lat:22.32,lon:114.17,tz:'Asia\/Hong_Kong'},\n\t\t\t{name:'Dubai',country:'United Arab Emirates',lat:25.2,lon:55.27,tz:'Asia\/Dubai'},\n\t\t\t{name:'Mumbai',country:'India',lat:19.08,lon:72.88,tz:'Asia\/Kolkata'},\n\t\t\t{name:'London',country:'United Kingdom',lat:51.51,lon:-0.13,tz:'Europe\/London'},\n\t\t\t{name:'Paris',country:'France',lat:48.86,lon:2.35,tz:'Europe\/Paris'},\n\t\t\t{name:'Berlin',country:'Germany',lat:52.52,lon:13.4,tz:'Europe\/Berlin'},\n\t\t\t{name:'Cairo',country:'Egypt',lat:30.04,lon:31.24,tz:'Africa\/Cairo'},\n\t\t\t{name:'Casablanca',country:'Morocco',lat:33.57,lon:-7.59,tz:'Africa\/Casablanca'},\n\t\t\t{name:'Algiers',country:'Algeria',lat:36.75,lon:3.06,tz:'Africa\/Algiers'},\n\t\t\t{name:'Tunis',country:'Tunisia',lat:36.81,lon:10.18,tz:'Africa\/Tunis'},\n\t\t\t{name:'Dakar',country:'Senegal',lat:14.69,lon:-17.45,tz:'Africa\/Dakar'},\n\t\t\t{name:'Accra',country:'Ghana',lat:5.56,lon:-0.2,tz:'Africa\/Accra'},\n\t\t\t{name:'Lagos',country:'Nigeria',lat:6.52,lon:3.38,tz:'Africa\/Lagos'},\n\t\t\t{name:'Kinshasa',country:'Democratic Republic of the Congo',lat:-4.44,lon:15.27,tz:'Africa\/Kinshasa'},\n\t\t\t{name:'Luanda',country:'Angola',lat:-8.84,lon:13.23,tz:'Africa\/Luanda'},\n\t\t\t{name:'Addis Ababa',country:'Ethiopia',lat:8.98,lon:38.79,tz:'Africa\/Addis_Ababa'},\n\t\t\t{name:'Nairobi',country:'Kenya',lat:-1.29,lon:36.82,tz:'Africa\/Nairobi'},\n\t\t\t{name:'Kampala',country:'Uganda',lat:0.35,lon:32.58,tz:'Africa\/Kampala'},\n\t\t\t{name:'Kigali',country:'Rwanda',lat:-1.94,lon:30.06,tz:'Africa\/Kigali'},\n\t\t\t{name:'Dar es Salaam',country:'Tanzania',lat:-6.79,lon:39.21,tz:'Africa\/Dar_es_Salaam'},\n\t\t\t{name:'Harare',country:'Zimbabwe',lat:-17.83,lon:31.05,tz:'Africa\/Harare'},\n\t\t\t{name:'Maputo',country:'Mozambique',lat:-25.97,lon:32.58,tz:'Africa\/Maputo'},\n\t\t\t{name:'Cape Town',country:'South Africa',lat:-33.92,lon:18.42,tz:'Africa\/Johannesburg'},\n\t\t\t{name:'Johannesburg',country:'South Africa',lat:-26.2,lon:28.04,tz:'Africa\/Johannesburg'},\n\t\t\t{name:'New York',country:'United States',lat:40.71,lon:-74.01,tz:'America\/New_York'},\n\t\t\t{name:'Toronto',country:'Canada',lat:43.65,lon:-79.38,tz:'America\/Toronto'},\n\t\t\t{name:'Chicago',country:'United States',lat:41.88,lon:-87.63,tz:'America\/Chicago'},\n\t\t\t{name:'Los Angeles',country:'United States',lat:34.05,lon:-118.24,tz:'America\/Los_Angeles'},\n\t\t\t{name:'Vancouver',country:'Canada',lat:49.28,lon:-123.12,tz:'America\/Vancouver'},\n\t\t\t{name:'Mexico City',country:'Mexico',lat:19.43,lon:-99.13,tz:'America\/Mexico_City'},\n\t\t\t{name:'Sao Paulo',country:'Brazil',lat:-23.55,lon:-46.63,tz:'America\/Sao_Paulo'},\n\t\t\t{name:'Buenos Aires',country:'Argentina',lat:-34.6,lon:-58.38,tz:'America\/Argentina\/Buenos_Aires'}\n\t\t];\n\t\tvar fallbackCities=cities.slice();\n\t\tfunction formatFor(city,options){return new Intl.DateTimeFormat([], Object.assign({timeZone:city.tz},options)).format(new Date());}\n\t\tfunction timeFor(city){return formatFor(city,{hour:'2-digit',minute:'2-digit',second:'2-digit'});}\n\t\tfunction dateFor(city){return formatFor(city,{weekday:'short',day:'2-digit',month:'short',year:'numeric'});}\n\t\tfunction zoneName(city,style){var parts=new Intl.DateTimeFormat([], {timeZone:city.tz,timeZoneName:style}).formatToParts(new Date()); var found=parts.find(function(part){return part.type==='timeZoneName';}); return found?found.value:city.tz;}\n\t\tfunction zoneShort(city){return zoneName(city,'short');}\n\t\tfunction zoneLong(city){return zoneName(city,'long');}\n\t\tfunction project(city,w,h){return{x:(city.lon+180)\/360*w,y:(90-city.lat)\/180*h};}\n\t\tfunction pointToLatLon(x,y,w,h){return{lat:90-(y\/h)*180,lon:(x\/w)*360-180};}\n\t\tfunction lonDelta(a,b){var delta=Math.abs(a-b); return Math.min(delta,360-delta);}\n\t\tfunction distance(a,b){var toRad=Math.PI\/180, lat1=a.lat*toRad, lat2=b.lat*toRad, dLat=(b.lat-a.lat)*toRad, dLon=(b.lon-a.lon)*toRad; var h=Math.sin(dLat\/2)*Math.sin(dLat\/2)+Math.cos(lat1)*Math.cos(lat2)*Math.sin(dLon\/2)*Math.sin(dLon\/2); return 6371*2*Math.atan2(Math.sqrt(h),Math.sqrt(1-h));}\n\t\tfunction nearest(latlon){return cities.slice().sort(function(a,b){return distance(latlon,a)-distance(latlon,b);}).slice(0,6);}\n\t\tfunction nearestWithCity(city){var matches=nearest(city).filter(function(item){return item.name!==city.name||item.countryCode!==city.countryCode;}); return [city].concat(matches).slice(0,6);}\n\t\tfunction axisCities(latlon){var band=cities.filter(function(city){return lonDelta(city.lon,latlon.lon)<=8;}); var source=band.length>=6?band:cities; return source.slice().sort(function(a,b){var scoreA=lonDelta(a.lon,latlon.lon)*9+Math.abs(a.lat-latlon.lat)*0.8; var scoreB=lonDelta(b.lon,latlon.lon)*9+Math.abs(b.lat-latlon.lat)*0.8; return scoreA-scoreB;}).slice(0,6);}\n\t\tfunction esc(text){return String(text).replace(\/[&<>\"']\/g,function(c){return({'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#039;'})[c];});}\n\t\tfunction findCity(query){var needle=query.trim().toLowerCase(); if(!needle)return null; return cities.find(function(city){return city.name.toLowerCase()===needle;})||cities.find(function(city){return city.name.toLowerCase().indexOf(needle)>-1||city.country.toLowerCase().indexOf(needle)>-1||city.tz.toLowerCase().indexOf(needle)>-1;})||null;}\n\t\tfunction countries(){var seen={}; return cities.filter(function(city){if(seen[city.country])return false; seen[city.country]=true; return true;}).map(function(city){return city.country;}).sort();}\n\t\tfunction countryMatches(query){var needle=query.trim().toLowerCase(); if(!needle)return countries().slice(0,6); return countries().filter(function(country){return country.toLowerCase().indexOf(needle)>-1;}).slice(0,6);}\n\t\tfunction cityMatches(query){var needle=query.trim().toLowerCase(), source=cities.concat(fallbackCities), found={}, result=[]; source.forEach(function(city){var key=(city.name+'|'+city.country).toLowerCase(), hay=(city.name+' '+city.country+' '+city.tz).toLowerCase(); if(!found[key]&&(!needle||hay.indexOf(needle)>-1)){found[key]=true; result.push(city);}}); return result.sort(function(a,b){var aName=a.name.toLowerCase(), bName=b.name.toLowerCase(), aStart=needle&&aName.indexOf(needle)===0?0:1, bStart=needle&&bName.indexOf(needle)===0?0:1; return aStart-bStart || (b.population||0)-(a.population||0);}).slice(0,6);}\n\t\tfunction renderSuggestionChips(wrap,items,type){if(!wrap)return; if(!items.length){wrap.innerHTML='<span>No match yet<\/span>'; return;} wrap.innerHTML=items.map(function(item){var value=type==='country'?item:item.name, label=type==='country'?item:item.name, meta=type==='country'?'Country':item.country; return '<button type=\"button\" data-suggestion-type=\"'+type+'\" data-suggestion-value=\"'+esc(value)+'\"><strong>'+esc(label)+'<\/strong><span>'+esc(meta)+'<\/span><\/button>';}).join('');}\n\t\tfunction updateConverterSuggestions(){renderSuggestionChips(fromSuggestions,cityMatches(converterFrom.value),'city'); renderSuggestionChips(targetSuggestions,converterTargetType.value==='country'?countryMatches(converterTarget.value):cityMatches(converterTarget.value),converterTargetType.value==='country'?'country':'city');}\n\t\tfunction rememberConverter(){writeMemory({converter:{from:converterFrom.value,targetType:converterTargetType.value,target:converterTarget.value,time:converterTime.value}});}\n\t\tfunction citiesInCountry(country){var needle=country.trim().toLowerCase(), found={}, merged=[]; cities.concat(fallbackCities).forEach(function(city){var match=city.country.toLowerCase()===needle||city.country.toLowerCase().indexOf(needle)>-1, key=(city.name+'|'+city.country).toLowerCase(); if(match&&!found[key]){found[key]=true; merged.push(city);}}); return merged.sort(function(a,b){return (b.population||0)-(a.population||0);}).slice(0,6);}\n\t\tfunction refreshOptions(){cityOptions.innerHTML=cityMatches('').map(function(city){return '<option value=\"'+esc(city.name)+'\">'+esc(city.country)+'<\/option>';}).join(''); countryOptions.innerHTML=countries().map(function(country){return '<option value=\"'+esc(country)+'\"><\/option>';}).join(''); updateConverterSuggestions();}\n\t\tfunction partsInZone(date,timezone){var parts=new Intl.DateTimeFormat('en-CA',{timeZone:timezone,year:'numeric',month:'2-digit',day:'2-digit',hour:'2-digit',minute:'2-digit',hour12:false}).formatToParts(date), out={}; parts.forEach(function(part){out[part.type]=part.value;}); if(out.hour==='24')out.hour='00'; return out;}\n\t\tfunction sourceTimeToDate(dateValue,timeValue,timezone){var bits=dateValue.split('-').map(Number), clock=timeValue.split(':').map(Number), guess=new Date(Date.UTC(bits[0],bits[1]-1,bits[2],clock[0],clock[1]||0,0)); for(var i=0;i<3;i++){var p=partsInZone(guess,timezone), shown=Date.UTC(Number(p.year),Number(p.month)-1,Number(p.day),Number(p.hour),Number(p.minute),0), wanted=Date.UTC(bits[0],bits[1]-1,bits[2],clock[0],clock[1]||0,0); guess=new Date(guess.getTime()+(wanted-shown));} return guess;}\n\t\tfunction renderConverted(date,city){return '<article><strong>'+city.name+'<\/strong><span>'+city.country+'<\/span><b>'+formatForDate(date,city,{hour:'2-digit',minute:'2-digit',weekday:'short'})+'<\/b><small>'+formatForDate(date,city,{day:'2-digit',month:'short',year:'numeric'})+' \u00b7 '+zoneShortForDate(date,city)+'<\/small><small>'+city.tz+' \u00b7 '+zoneLongForDate(date,city)+'<\/small><\/article>';}\n\t\tfunction formatForDate(date,city,options){return new Intl.DateTimeFormat([], Object.assign({timeZone:city.tz},options)).format(date);}\n\t\tfunction zoneNameForDate(date,city,style){var parts=new Intl.DateTimeFormat([], {timeZone:city.tz,timeZoneName:style}).formatToParts(date); var found=parts.find(function(part){return part.type==='timeZoneName';}); return found?found.value:city.tz;}\n\t\tfunction zoneShortForDate(date,city){return zoneNameForDate(date,city,'short');}\n\t\tfunction zoneLongForDate(date,city){return zoneNameForDate(date,city,'long');}\n\t\tfunction runConverter(){var from=findCity(converterFrom.value), mode=converterTargetType.value, targetValue=converterTarget.value.trim(); updateConverterSuggestions(); if(!from){converterNote.textContent='Choose a valid source city from the suggestions.'; return;} if(!converterDate.value||!converterTime.value){converterNote.textContent='Choose a source date and time.'; return;} var moment=sourceTimeToDate(converterDate.value,converterTime.value,from.tz), targets=mode==='country'?citiesInCountry(targetValue):(findCity(targetValue)?[findCity(targetValue)]:[]); if(!targets.length){converterNote.textContent=mode==='country'?'Choose a valid destination country from the suggestions.':'Choose a valid destination city from the suggestions.'; return;} converterNote.textContent='When it is '+converterTime.value+' in '+from.name+', '+from.country+', the matching time is:'; converterResults.innerHTML=targets.map(function(city){return renderConverted(moment,city);}).join('');}\n\t\tfunction drawDots(){var rect=canvas.getBoundingClientRect(), ratio=window.devicePixelRatio||1, w=Math.max(1,Math.round(rect.width)), h=Math.max(1,Math.round(rect.height)); canvas.width=w*ratio; canvas.height=h*ratio; ctx.setTransform(ratio,0,0,ratio,0,0); ctx.clearRect(0,0,w,h); ctx.fillStyle='#020617'; ctx.fillRect(0,0,w,h); dotPoints.forEach(function(pt,i){var x=pt[0]\/1000*w, y=pt[1]\/500*h, shade=((pt[0]*13+pt[1]*7+i)%41)\/100; ctx.beginPath(); ctx.fillStyle='rgba(148, 163, 184,'+(0.38+shade)+')'; ctx.arc(x,y,1.35,0,Math.PI*2); ctx.fill();}); ctx.strokeStyle='rgba(96, 165, 250, 0.28)'; ctx.lineWidth=1; ctx.setLineDash([5,7]); ctx.beginPath(); ctx.moveTo(activePoint.x,0); ctx.lineTo(activePoint.x,h); ctx.moveTo(0,activePoint.y); ctx.lineTo(w,activePoint.y); ctx.stroke(); ctx.setLineDash([]); activeAxisCities.forEach(function(city){var p=project(city,w,h); ctx.beginPath(); ctx.fillStyle='rgba(250, 204, 21, 0.95)'; ctx.arc(p.x,p.y,2.6,0,Math.PI*2); ctx.fill();}); activeCities.forEach(function(city){var p=project(city,w,h); ctx.beginPath(); ctx.fillStyle='#38bdf8'; ctx.arc(p.x,p.y,3.2,0,Math.PI*2); ctx.fill(); ctx.beginPath(); ctx.strokeStyle='rgba(56,189,248,.34)'; ctx.lineWidth=1; ctx.arc(p.x,p.y,8,0,Math.PI*2); ctx.stroke();});}\n\t\tfunction renderCities(citiesFound,x,y){var rect=canvas.getBoundingClientRect(), latlon=pointToLatLon(x,y,rect.width,rect.height); activeCities=citiesFound; activeAxisCities=axisCities(latlon); activePoint={x:x,y:y}; title.textContent='Nearest cities'; summary.textContent=citiesFound[0]?'Closest match: '+citiesFound[0].name+', '+citiesFound[0].country:'Point anywhere on the map to see likely city matches.'; axisTitle.textContent='Same time band'; axisSummary.textContent='Cities close to the vertical longitude\/timezone line at '+Math.round(latlon.lon)+'\u00b0.'; list.innerHTML=citiesFound.map(function(city){return '<article><strong>'+city.name+'<\/strong><span>'+city.country+'<\/span><b>'+timeFor(city)+'<\/b><small>'+dateFor(city)+' \u00b7 '+zoneShort(city)+'<\/small><small>'+city.tz+' \u00b7 '+zoneLong(city)+'<\/small><\/article>';}).join(''); axisList.innerHTML=activeAxisCities.map(function(city){return '<article><strong>'+city.name+'<\/strong><span>'+city.country+'<\/span><b>'+timeFor(city)+'<\/b><small>'+dateFor(city)+' \u00b7 '+zoneShort(city)+'<\/small><small>'+city.tz+' \u00b7 '+zoneLong(city)+'<\/small><\/article>';}).join(''); if(isMobileWorldClock()){pop.hidden=true;}else{pop.innerHTML=citiesFound.slice(0,6).map(function(city){return '<div><strong>'+city.name+'<\/strong><span>'+timeFor(city)+'<\/span><br><small>'+zoneShort(city)+' \u00b7 '+city.tz+'<\/small><\/div>';}).join(''); pop.hidden=false; pop.style.left=Math.min(Math.max(x+14,12),canvas.clientWidth-230)+'px'; pop.style.top=Math.min(Math.max(y+14,12),canvas.clientHeight-190)+'px';} drawDots();}\n\t\tfunction handlePointer(event){var rect=canvas.getBoundingClientRect(), x=event.clientX-rect.left, y=event.clientY-rect.top, latlon=pointToLatLon(x,y,rect.width,rect.height); renderCities(nearest(latlon),x,y);}\n\t\tfunction tick(){if(activeCities.length){renderCities(activeCities,activePoint.x,activePoint.y);}}\n\t\tcanvas.addEventListener('pointermove',function(event){if(!isMobileWorldClock())handlePointer(event);});\n\t\tcanvas.addEventListener('click',function(event){handlePointer(event); var rect=canvas.getBoundingClientRect(); writeMemory({mapPoint:{x:(event.clientX-rect.left)\/rect.width,y:(event.clientY-rect.top)\/rect.height}});});\n\t\tsearch.addEventListener('submit',function(event){event.preventDefault(); var city=findCity(searchInput.value); if(!city){searchNote.textContent='No city match yet. Try Sydney, London, Tokyo, New York, Toronto, Dubai, Auckland, Lagos, Nairobi or Cape Town.'; return;} var rect=canvas.getBoundingClientRect(), point=project(city,rect.width,rect.height); searchNote.textContent='Showing '+city.name+', '+city.country+' and nearby cities.'; writeMemory({searchCity:city.name,mapPoint:{x:point.x\/rect.width,y:point.y\/rect.height}}); renderCities(nearestWithCity(city),point.x,point.y);});\n\t\tconverterTargetType.addEventListener('change',function(){var countryMode=converterTargetType.value==='country'; converterTargetLabel.textContent=countryMode?'To country':'To city'; converterTarget.setAttribute('list',countryMode?'silcom-world-clock-country-options':'silcom-world-clock-city-options'); converterTarget.value=countryMode?'New Zealand':'Auckland'; updateConverterSuggestions(); runConverter(); rememberConverter();});\n\t\tconverterFrom.addEventListener('input',updateConverterSuggestions);\n\t\tconverterTarget.addEventListener('input',updateConverterSuggestions);\n\t\troot.addEventListener('click',function(event){var button=event.target.closest('[data-suggestion-value]'); if(!button||!root.contains(button))return; var value=button.getAttribute('data-suggestion-value')||''; if(button.closest('[data-time-from-suggestions]'))converterFrom.value=value; if(button.closest('[data-time-target-suggestions]'))converterTarget.value=value; runConverter(); rememberConverter();});\n\t\tconverter.addEventListener('submit',function(event){event.preventDefault(); runConverter(); rememberConverter();});\n\t\twindow.addEventListener('resize',drawDots);\n\t\tdrawDots();\n\t\tconverterDate.value=new Date().toISOString().slice(0,10);\n\t\tif(memory.searchCity){searchInput.value=memory.searchCity;}\n\t\tif(memory.converter){converterFrom.value=memory.converter.from||converterFrom.value; converterTargetType.value=memory.converter.targetType||converterTargetType.value; converterTarget.value=memory.converter.target||converterTarget.value; converterTime.value=memory.converter.time||converterTime.value; if(converterTargetType.value==='country'){converterTargetLabel.textContent='To country'; converterTarget.setAttribute('list','silcom-world-clock-country-options');}}\n\t\trefreshOptions();\n\t\trunConverter();\n\t\tvar startX=canvas.clientWidth*.72, startY=canvas.clientHeight*.72; if(memory.mapPoint&&Number.isFinite(memory.mapPoint.x)&&Number.isFinite(memory.mapPoint.y)){startX=Math.max(0,Math.min(1,memory.mapPoint.x))*canvas.clientWidth; startY=Math.max(0,Math.min(1,memory.mapPoint.y))*canvas.clientHeight;}\n\t\trenderCities(nearest(pointToLatLon(startX,startY,canvas.clientWidth,canvas.clientHeight)),startX,startY);\n\t\tfetch(dotSource).then(function(response){return response.ok?response.json():null;}).then(function(data){dotPoints=data&&Array.isArray(data.points)?data.points:[]; drawDots();}).catch(function(){dotPoints=[]; drawDots();});\n\t\tfetch(citySource).then(function(response){return response.ok?response.json():null;}).then(function(data){cities=data&&Array.isArray(data.cities)&&data.cities.length>=300?data.cities:fallbackCities; refreshOptions(); runConverter(); var rect=canvas.getBoundingClientRect(), latlon=pointToLatLon(activePoint.x,activePoint.y,rect.width,rect.height); renderCities(nearest(latlon),activePoint.x,activePoint.y);}).catch(function(){cities=fallbackCities; refreshOptions();});\n\t\twindow.setInterval(tick,1000);\n\t}());\n\t<\/script>\n\t\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-774","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"woocommerce_thumbnail":false,"woocommerce_single":false,"woocommerce_gallery_thumbnail":false,"dgwt-wcas-product-suggestion":false},"uagb_author_info":{"display_name":"usersilq","author_link":"https:\/\/silcom.io\/author\/usersilq\/"},"uagb_comment_info":0,"uagb_excerpt":null,"_links":{"self":[{"href":"https:\/\/silcom.io\/wp-json\/wp\/v2\/pages\/774","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/silcom.io\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/silcom.io\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/silcom.io\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/silcom.io\/wp-json\/wp\/v2\/comments?post=774"}],"version-history":[{"count":0,"href":"https:\/\/silcom.io\/wp-json\/wp\/v2\/pages\/774\/revisions"}],"wp:attachment":[{"href":"https:\/\/silcom.io\/wp-json\/wp\/v2\/media?parent=774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}