Symphony.

Step 6. Testing and Tweaking

You’re ready to view the page!

/store-locator/

You should see a form into which you can type a radius and postcode. Go ahead. Try entering a place or postcode that is within a radius of one of the entries you created earlier. It appears in the list? Neat! Now try reducing the radius, and eventually it’ll disappear as your search narrows.

This is all well and good, but not particularly useful since users don’t know which is nearest to them. Thankfully the Map Location Field also calculates the distance between the map marker in the entry, and the origin you are searching from. Take a peek at the ?debug XML again and you’ll see a <distance> element in each entry:

<location latitude="51.6514" longitude="-0.387649">
    ...
    <distance from="51.6245572,-0.4674079" distance="6.3" unit="km" />
</location>

We can now enter to distance to each entry beside the name and address. Update the last template in your page to include the distance and unit attributes from the <distance> element:

<li>
    <xsl:value-of select="concat(name, ': ', address)"/> (<xsl:value-of select="concat(location/distance/@distance, ' ' , location/distance/@unit)"/>)
</li>

And we can also order the list of entries putting the nearest at the top. Modify the apply-templates in the first template:

<xsl:apply-templates select="store-locator/entry" mode="store">
    <xsl:sort select="location/distance/@distance" data-type="number" order="ascending"/>
</xsl:apply-templates>

You should now see distances beside each entry, and the nearest entry at the top.

Simples!

Conclusion →