POC: Locatie zoeken

Workshop : Proof of Concept

Aanleiding

Vanuit de designfase is een filtermanier ontstaan via een zoekformulier. Deze functionaliteit is getest en goed bevonden door het test publiek. Er zijn binnen WordPress diverse plug-ins om dit te realiseren echter werken deze niet goed samen met een Custom  Post Type. Er is dus de keuze gemaakt om middels ACF en een hand gebouwde proxomity filter deze functionaliteit te realiseren.

 

https://github.com/Casie150/horecaartje

Onderzoeksvraag:
Hoe filter je een Custom Post Type op locatie?

Doelen

  • Zoekfunctie op locatie
  • Koffiebars ordenen op locatie

Resultaten

De functionaliteit is erg complex en lang. Er is daarom gekozen om de volgende functionaliteiten ook middels een video uit te leggen. Een stukje naar benede laat ik de hele code zien en beschrijf ik kort de werking.

  • Input veld met afstandsselectie
  • Functie die een straatnaam omzet naar locaties met longitude en latitude
  • Proximity search op basis van KM afstand hemelsbreed
  • Kaartje met horecazaken gefilterd op afstand
  • Overzicht met horecazaken gefilterd op afstand

Er is gebruik gemaakt van de Google Maps API en deze is gekoppeld met ACF-locatie data. Deze data uit ACF werkt helaas niet met longitude en latitude. Iets wat Google Maps wel doet. Ik heb de volgende elementen gebouwd om het zoeken via locatie gebruiksvriendelijk en werkend te krijgen.  Hieronder staat de “geodecoder” die dit mogelijk maakt. Deze zet een adres om naar longitude en latitude en doormiddel van een input veld zet deze om naar de afstand hemelsbreed tussen twee locaties.\

<?php
// Terugkoppelen van longitude and latitude vanuit de ingevoerde locatie
function horecaartje_get_lat_and_lng($origin){
    $api_key = "KEY_API";
    $url = "https://maps.googleapis.com/maps/api/geocode/json?address=".urlencode($origin)."&key=".$api_key;
    $result_string = file_get_contents($url);
    $result = json_decode($result_string, true);
    $result1[]=$result['results'][0];
    $result2[]=$result1[0]['geometry'];
    $result3[]=$result2[0]['location'];
    return $result3[0];
}


// Koppelt de twee locaties omgezet terug
function horecaartje_get_distance($origin, $address_lat, $address_lng, $unit){


    // Verkrijg lat and lng van barren
    $origin_coords = horecaartje_get_lat_and_lng($origin);
    $lat1 = $origin_coords['lat'];
    $lng1 = $origin_coords['lng'];


    // Verkrijg lat and lng van het input veld
    $lat2 = $address_lat;
    $lng2 = $address_lng;


    // Bereken afstand tussen de twee
    $theta=$lng1-$lng2;
    $dist = sin(deg2rad($lat1)) * sin(deg2rad($lat2)) + cos(deg2rad($lat1)) * cos(deg2rad($lat2)) * cos(deg2rad($theta));
    $dist = acos($dist);
    $dist = rad2deg($dist);
    $miles = $dist * 60 * 1.1515;
    $unit = strtoupper($unit);


    // Zet het om in andere metrische waarde
    if ($unit == "K"){
        return ($miles * 1.609344);
    }
    else if ($unit =="N"){
        return ($miles * 0.8684);
    }
    else{
        return $miles;
    }
}

Deze data wordt vanuit een Post type opgehaald binnen d eCustom Post roep ik via ACF de data op. In ACF heb ik namelijk een Google Maps API gebouwd waarmee ik per horecazaak de adres gegevens kan invullen.

Foto: Locatie input ACF

<!-- Afstand van de zaak ophalen middels ACF -->
<?php if($results && $proximity) :?>
          <?php $address = get_field('horecazaak_location'); ?>
          <?php $distance = horecaartje_get_distance($origin, $address['lat'], $address['lng'], $unit); ?>                                  
<?php endif; ?>        




<!-- Afstand van de zaak uitprinten-->
<?php if($results && $proximity) : ?>
         <div class="horecazaak_distance"><i class="material-icons">location_on</i><span><?php  echo $origin ?  round($distance, 1) . " " . "Km"  : '' ;?></span></div>
<?php endif; ?>

De rest van de data wordt ingeladen via een simpel inputveldje. De complete code is inzichtelijk via GIT. Omdat deze te groot en té lang is  om in mijn webpagina  te plakken. De functies staan onder de stukjes; proxomity filter, archive horecazaken, single horecazaken.

Conclusie

Door deze functies is het mogelijk om snel bars op te zoeken door heel Nederland.