Detect location of homepage visitor (by IP) : Frdlweb

On our websites we may detect the visitors location (e.g. city), for example to suggest search queries. In this article it is documented how we do this, simple and short for transparancy and re-use.

Example HTML+javascript:

<div style="display:inline-block;min-height:100px;max-width:400px;">
<a name="server_location_suggestion"></a>
<div id="serverLocationSuggestion" style="font-size:1.1em;"><span id="serverLocationSuggestionLoading">loading/laden...</span></div>
</div>
<script>
(async()=>{
    var j = await fetch('https://webfan.website/rating/myip.json');
    var d = await j.json();
    var el = document.getElementById('serverLocationSuggestion');
    document.getElementById('serverLocationSuggestionLoading').style.display='none';
    if(d.city && d.city.name && 'string' === typeof d.city.name && d.city.name.length > 0){
        var l = navigator.language.substr(0,2);
        var a = document.createElement('a');
        var p = document.createElement('p');
        a.innerHTML = 'de' !== l
         ? 'Search in instances and websites for <strong>"' + d.city.name + '"</strong>...🔍'
         : 'Nach <strong>"' + d.city.name + '"</strong> in Instanzen und Webseiten suchen...🔍';
        a.href= 'https://startdir.de/server/?search=' + encodeURIComponent(d.city.name);
        p.appendChild(a);
        el.appendChild(p);

        a = document.createElement('a');
        p = document.createElement('p');
        a.innerHTML = 'de' !== l
         ? 'Search in accounts for <strong>"' + d.city.name + '"</strong>...🔍'
         : 'Nach <strong>"' + d.city.name + '"</strong> in Accounts suchen...🔍';
        a.href= 'https://startdir.de/fediverse/?search=' + encodeURIComponent(d.city.name);
        p.appendChild(a);
        el.appendChild(p);

        a = document.createElement('a');
        p = document.createElement('p');
        a.innerHTML = 'de' !== l
         ? 'Search in classifieds ads for <strong>"' + d.city.name + '"</strong>...🔍'
         : 'Nach <strong>"' + d.city.name + '"</strong> in Kleinanzeigen suchen...🔍';
        a.href= 'https://an-und-verkaufen.de/netzwerk/?q=' + encodeURIComponent(d.city.name);
        p.appendChild(a);
        el.appendChild(p);
    }else{
        el.parentNode.style.display='none';
    }
})();
</script>

myip.json

Download the Geo-Data (daily): $geoDBfile = __DIR__.\DIRECTORY_SEPARATOR.'..'.\DIRECTORY_SEPARATOR.'..'.\DIRECTORY_SEPARATOR.'GeoLite2-City.mmdb';
$geoDBfile_archive = __DIR__.\DIRECTORY_SEPARATOR.'..'.\DIRECTORY_SEPARATOR.'..'.\DIRECTORY_SEPARATOR.'GeoLite2-City.mmdb.gz';
if('cli'===\PHP_SAPI){
     if(!file_exists($geoDBfile) || filemtime($geoDBfile) < time() - 1 * 24 * 60 * 60){
     file_put_contents($geoDBfile_archive, file_get_contents('https://github.com/wp-statistics/GeoLite2-City/raw/refs/heads/master/GeoLite2-City.mmdb.gz'));
        $file_name = $geoDBfile_archive;
        $buffer_size = 4096;
        $out_file_name = $geoDBfile;
        $file = gzopen($file_name, 'rb');
        unlink($out_file_name);
        $out_file = fopen($out_file_name, 'wb');
        while (!gzeof($file)) {
            fwrite($out_file, gzread($file, $buffer_size));
        }

        fclose($out_file);
        gzclose($file);
    }
}
myip.json
use GeoIp2\Database\Reader;
$cityDbReader = new Reader($geoDBfile);
$rr = $cityDbReader->city($_SERVER['REMOTE_ADDR']);
    $data=object_to_array($rr);
     \StartDir\Helpers::cors();
     header('Content-Type: application/json');
     echo json_encode($data);
Dependency: https://github.com/maxmind/GeoIP2-php