Simple location-based search for Kirby

The CMS Solutions
1

I’m currently working on a radius-based retailer search for a client and thought the code for the radius search might be helpful for you as well. It shows that Kirby can handle location-based search features pretty easily. You just need to store lat (Latitude) and lng (Longitude) values in your content files and you are ready to go:

10 Likes
2

Hey Bastian, thanks for sharing this. A while ago I did something which might complement your post: creating dynamic markers on a map with latitude/longitude information entered through the panel.

In this case the client inserts the lat & lng values and this populates a view in which all projects are displayed on a world-map.

It’s a pretty basic implementation and could be significantly improved but given how easy it was to set it all up I thought it might be worth sharing.

http://drehxtrem.de/where

2 Likes
3

I created this geolocation custom field for Kirby panel a while back. It fetches lat/lng for any address you enter.

1 Like
4

Hi @franzwalter would you mind sharing your implementation of this map? I am looking at implementing a similar map with search functionality (if possible)

Any guidance would be great!
I

5

Hi @shiftsave, below the template code I use for the custom map and populate it with the markers. The code could surely be improved but it works for now. Also caching might be a good idea if the amount of markers increases.

If you are looking into a search functionality I would let kirby generate a json-file with the geo-data. Maybe this might help you to get started: https://www.mapbox.com/mapbox.js/example/v1.0.0/geojson-marker-from-url

https://gist.github.com/franzwalter/311b5e364c9938e8345c

6

Thanks @franzwalter I tried implementing it with my current structure but get the following error:

<b>Notice</b>:  Array to string conversion in <b>/Users/ivan/Documents/Personal/Traitor Cycles/Development/public/site/templates/map.php</b> on line <b>12</b><br />
Array<br />
<b>Fatal error</b>:  Call to a member function loclong() on a non-object in    <b>/Users/ivan/Documents/Personal/Traitor Cycles/Development/public/site/templates/map.php</b> on line <b>14</b><br />

My blueprint fields looks like this:

locations:
label: Locations
type: structure
entry: >
  <strong>{{name}}</strong>
  {{url}}<br />
fields:
  name:
    label: Store Name
    type: text
  loclat:
    label: Latitude
    type: text
  loclong:
    label: Longitude
    type: text
  url:
    label: Website
    type: url

And my template file script:

<script>
L.mapbox.accessToken = 'pk.eyJ1Ijoic2hpZnRzYXZlIiwiYSI6IjUzYTZmMGE0YjE4Yzg3Yjk1ZTNjYThhZjZlMGMxNDJiIn0.UmZefNeJLKa8UUhHt7Vf8A';
var map = L.mapbox.map('map', 'shiftsave.84cbb874')
    .setView([41.739, 29.399], 4);
var myLayer = L.mapbox.featureLayer().addTo(map);
var geojson = {
    type: 'FeatureCollection',
    features: [
    // run through all projects and build the markers
    <?php echo $locations = $page->locations()->yaml() ?>
    <?php foreach($locations as $item): ?>
    <?php if ($item->loclong() != '' AND $item->loclat()!= ''): ?>
    {
        type: 'Feature',
        properties: {
            title: '<?php echo $item->name() ?>',
            'marker-color': '#AD0102',
            'marker-size': 'medium',
            'marker-symbol': 'cinema',
            url: '<?php echo $item->url() ?>'
        },
        geometry: {
            type: 'Point',
            coordinates: [<?php echo $item->loclong() ?>, <?php echo $item->loclat() ?>]
        }
    },
    <?php endif ?>
    <?php endforeach ?>
    ]
};
7

Can you try to replace

<?php echo $locations = $page->locations()->yaml() ?>
<?php foreach($locations as $item): ?>

with

<?php foreach($page->locations()->toStructure() as $item): ?>

http://getkirby.com/docs/cheatsheet/field-methods/toStructure

8

Hi @franzwalter this worked thanks so much for your help!

9

ugh this is so much cleaner then what i ended up doing on www.erdbeeren-funck.de but hey the projects done :stuck_out_tongue: