21. Januar 2024

Location Based Content und QR-Codes

Mit der Geolocation API kannst du den Standort des Users ermitteln. Diese API lässt sich durchaus auch kreativ einsetzen. So können z.B. basierend auf dem Standort des Users bestimmte Informationen und Funktionen angezeigt werden. Z.B.:

• Bei einer Schnitzeljagd, lassen sich bestimmte Inhalte, z.B. Rätsel, nur anzeigen, wenn man an einem bestimmten Ort ist.
• Bei einer Veranstaltung können bestimmte Inhalte nur für Teilnehmer der Veranstaltung gezeigt werden.
• Bei einem interaktiven Stadtführer lassen sich Informationen zu den umliegenden Sehenswürdigkeiten anzeigen.
• Auch ein Check-in zu einer Veranstaltung ist denkbar. Mit Hilfe der Geodaten kann verifiziert werden, dass der Teilnehemer auch tatsächlich vor Ort ist.

All diese Beispiele lassen sich ideal mit einem QR-Code nutzen, der an entsprechendem Ort angebracht ist.

Folgender Code kann als Basis für eigenen Location Based Web Apps dienen:

<div class="section">
    <div class="container py-5">

        <div class="row pb-4">

            <div class="col-12 pb-3">
                <h1>GeoLocation Demo</h1>
            </div>

            <div class="col-12 pb-3 loading">
                <div class="box">
                    <p class="mb-1">Position wird ermittelt...</p>
                </div>
            </div>

            <div class="col-12 pb-3 errormessage d-none">
                <div class="alert alert-danger" role="alert">
                    Position konnte nicht ermittelt werden.
                </div>
            </div>

            <div class="col-12 pb-3">
                <div class="box d-none"">
                    <h2 class="mb-1"><span class="distance"></span> bis zum Ziel.</h2>
                </div>
            </div>

            <div class="col-12 col-md-6 pb-3">
                <div class="box box1 opacity-25 d-none">
                    <h3>Ziel ist in der Nähe.</h3>
                    <p>Content, der nur angezeigt wird, wenn man sich in der Nähe des Zieles befindet.</p>
                </div>
            </div>

            <div class="col-12 col-md-6 pb-3">
                <div class="box box2 opacity-25 d-none">
                    <h3>Ziel ist in nicht der Nähe.</h3>
                    <p>Content, der angezeigt wird, wenn man sich nicht in der Nähe des Zieles befindet.</p>
                </div>
            </div>

            <div class="col-12 pb-3">
                <div class="box d-none"">
                    <p class="small mb-1">Aktuelle Position: <span class="current_position"></span>, Ziel: <span class="final_position">53.54134362119879, 9.984619354150448</span>, <span class="distance"></span> bis zum Ziel.</p>
                </div>
            </div>

        </div>
    </div>
</div>

<script type="text/javascript" src="assets/js/jquery.js"></script>

<script>
    $(document).ready(function () {
        navigator.geolocation.getCurrentPosition(function (position) {
            var userPosition = {
                latitude: position.coords.latitude,
                longitude: position.coords.longitude
            };

            $('.current_position').text(userPosition.latitude + ', ' + userPosition.longitude);

            var finalPositionStr = $('.final_position').text();
            var finalPositionArray = finalPositionStr.split(', ');
            var finalPosition = {
                latitude: parseFloat(finalPositionArray[0]),
                longitude: parseFloat(finalPositionArray[1])
            };

            var distance = calculateDistance(userPosition, finalPosition);
            $('.distance').text(distance.toFixed(2) + ' km');

            if (distance < 5) {
                $('.box1').removeClass('opacity-25');
            } else {
                $('.box2').removeClass('opacity-25');
            }

            $('.box').removeClass('d-none');
            $('.loading').hide();

        }, function (error) {
                $('.errormessage').removeClass('d-none');
        });

        function calculateDistance(pos1, pos2) {
            var R = 6371; 
            var dLat = deg2rad(pos2.latitude - pos1.latitude);
            var dLon = deg2rad(pos2.longitude - pos1.longitude);
            var a =
                Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                Math.cos(deg2rad(pos1.latitude)) * Math.cos(deg2rad(pos2.latitude)) *
                Math.sin(dLon / 2) * Math.sin(dLon / 2);
            var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
            var distance = R * c; // km

            return distance;
        }

        function deg2rad(deg) {
            return deg * (Math.PI / 180);
        }
    });
</script>Code-Sprache: HTML, XML (xml)

In einer echten Anwendung sollte man die Ziel-Koordinaten natürlich im Code verstecken…

Hier geht´s zur Demo: www.fbnfrtg.de/demo/geolocation.html