KirbyCMS Panel field for geocoding user input and storing it in a simple way.
This uses :
- Google Maps API v3
- @brianreavis Selectize.js jQuery plugin
- Pin Icons by Victor Erixon
It requires you to :
After installing the kirbycms panel, create a directory site/panel/fields at the root of your kirby install (if not present already), cd into this directory and clone this repository in the geocode directory.
You should end up with the new directory:
site/panel/fields/geocode
Edit the geocodeApiKey variable in the geocode.js file using your Google Maps API Key
Once installed, when creating a panel blueprint, you can add the field using type: geocode, to set the placeholder that will appear when there is no images found in the content folder, you can use the placeholder: yourtext property and if your website is in multiple languages, you can use the Kirby Syntax for multi-lingual websites.
eg:
# default blueprint
title: Page
pages: true
files: true
fields:
title:
label: Title
type: text
geo:
label: Location
placeholder: Please choose a location...
type: geocode
This field is an augmented <select> field using Selectize.js, this doesn't work without javascript or offline. User input is sent to Google Maps API and results are fetched to be presented in a user-friendly way.
The then selected location is stored as such formatted_address:lat:lng in your page file
Title: Page Title
----
Geo: Paris, France:48.856614:2.3522219000000177
----
You can then use the data by building an array out of it.
PHP
<?php
// Make sure you get a string
$geo = (string)$page->geo();
// Using kirby toolkit str::split
$geo_arr = str::split($page->geo(), ':');
// OR using PHP's explode function
$geo_arr = explode(':', $page->geo())
/*
$geo_arr = array(
0 => 'formatted_address',
1 => 'lat',
2 => 'lng'
);
*/
?>
<div>Location: <?php echo $geo_arr[0] ?> </div>
<div>Latitude: <?php echo $geo_arr[1] ?> </div>
<div>Longitude: <?php echo $geo_arr[2] ?> </div>What can you do with this ?
A few examples:
- Build GeoJSON to use with Mapbox (which i am doing)
- Give blog posts more context by adding a location
- Show blog posts by location name (just like an archive page)
- Link to places in Google Maps
- ...
- Fetch locations from other pages just like The Tag Field
- Allow for multiple locations to be stored and ordered by the user (this could help build "trips" blog posts or maps)
- Field Option to choose the restriction for items, currently only "country, locality" item types are listed as items (no street addresses)
This is released under the MIT License
Guillaume 'Wilhearts' PICARD, 2014