Jeg står overfor at skulle arbejde med geolokation på en hjemmeside, nærmere bestemt finde ud af hvormange lokationer der findes indenfor en radius af et givet punkt.

Det har jeg ikke arbejdet med før, men jeg fornemmer det er lettere end det har været, da der dels er nogle gode resurser omkring emner, dels er nogle API'er man kan anvende til udføre noget af arbejdet.

Opgaven er såmænd ret enkel, nemlig "find alle, i en database registrerede, lokationer, som er indenfor en radius af X km fra min aktuelle lokation".

Det involverer umiddelbart flg.

1. at jeg kender eller kan finde den aktuelle lokation
2. at jeg kender lokationen på alle de ting der skal findes
3. at jeg, på en nem måde, kan foretage et opslag på disse oplysninger

Find aktuelle brugers lokation

Det første kan jeg i nogen udstrækning bruge browserens faciliteter til. Nyere browsere har indbygget en eller anden grad af lokationsbestemmelse og den tager jeg udgangspunkt i.

Det kunne f.eks. se således ud:

window.navigator.geolocation.getCurrentPosition(function(pos) { 
    var lat = pos.coords.latitude;
    var lon = pos.coords.longitude;
})

Find lokation på adresser

Det andet kan jeg (nok) bruge Google's Geocoding API til. Det skal bruges på den måde, at jeg vha. en adresse omsætter denne til et sæt længde- og breddegrader. Disse gemmer jeg  sammen med det der skal findes.

Dette API kræver, at jeg opretter en API-nøgle før jeg kan foretage opslag (se instruktionerne på siden til Geocoding API'et), men når det så er gjort, kan jeg spørge på en adresse med et kald til flg. url:

var url = "https://maps.googleapis.com/maps/api/geocode/json?"
    + "address=Hovedgaden+12,8000+Århus&key=[API-nøglem]";

Udtræk lokationer der matcher området

Det tredje kan jeg, med udgangspunkt i jeg anvender SQL Server, gøre ved et fancy opslag, hvor jeg får returneret et antal rækker, som ligger indenfor et givet cirkulært område. Hvordan der foretages en sortering efter nærhed, har jeg ikke gennemskuet, men med noget dataanalyse kan man måske nå frem til et approximeret sorteret resultat - måske endda et reelt sorteret resultat. Hvem ved...? Mit umiddelbare behov er dog ikke, at resultatet er sorteret efter nærhed, så det spekulerer jeg ikke så meget i lige nu.

Anyway! For at udtrække de lokationer, som ligger indenfor en given radius (på grundlag af længde- og breddegrader), kan jeg så bruge denne SQL-konstruktion:

declare 
   @latStartingPoint float, 
   @lngStartingPoint float, 
   @distKmFromStartingPoint float;

set @latStartingPoint = 55.0
set @lngStartingPoint = 9.0
set @distKmFromStartingPoint = 13.0

select * 
from testLocation 
where ( 
   6371 * 
   acos( 
       cos( radians(@latStartingPoint) ) * 
       cos( radians( lat ) ) * 
       cos( radians( lng ) - radians(@lngStartingPoint) ) + 
       sin( radians(@latStartingPoint) ) * 
       sin( radians( lat ) ) 
   )) < @distKmFromStartingPoint

Jeg har erklæret 3 variable i SQL'en ovenfor, hvor

• @latFromStartingPoint er breddegraden for udgangspunktet
• @lngFromStartingPoint er længdegraden for udgangspunkt
• @distKmFromStartingPoint er antal km fra center der ønskes resultater fra
• Det magiske tal 6371, er jordens radius

Konklusion

Som det kan ses, er det i teorien, rimeligt ligetil... så må vi se om det også er i praksis :-)

Når man laver websider er det en god idé at tænke på, hvilke behov og forudsætninger slutbrugeren har. Herunder hvilken opsætning brugeren ser din side med (javascript til/fra, stylesheets til/fra, browser type og - version osv.).

Målet er er så mange som muligt kan se indholdet på siden.

Mange sider er styret og drevet med en høj grad af scripting, således funktioner kun er tilgængelige, hvis scripting er slået til. Der kan være mange årsager til at man ønsker denne afhængighed af scripting, men man bør som udgangspunkt sikre sig at relevant indhold også kan ses og bruges uden scripting slået til.

Dette kan opnås ved at sætte siden op uden scripting i første omgang og derefter så tilføje de effekter man måtte have behov for efterfølgende. Med jQuery er det overkommeligt at tilføje f.eks. effekter, som kræver scripting når siden loader. Dette vil jeg demonstrere nedenfor.

Eksemplet implementerer en ramme med info under et billede. Når scripting er slået til skjules info som udgangspunkt og bliver i stedet til en slideUp når musen føres over.

<style type="text/css">
   .boks {
   }
   .info {
   }
   .info.dynamic { bottom: 0px; position: absolute; }
</style>
<script>
   $(function() {

      $(".boks .info").addClass("dynamic");
      $(".boks").hover(
         function() {
            $(".info", this).slideUp();
         },
         function() {
            $(".info", this).slideDown();
         });
   });
</script>

Følgende html afspejler html:

<div class="boks">
   <div class="basis">
      <img src="billede.jpg"/>
   </div>

   <div class="info">
      <p>
         Slideup info eller fast, hvis scripting
         ikke understøttes.
      </p>
   </div>
</div>

Som det kan ses, sørger scriptet for at koble stylen dynamic på det element der skal have speciel effekt, når script understøttes. Hvis scipting ikke er aktiveret vises info blot under billedet.