Location / Map Field

Plugins
1

Hi, all!

First of all, I want to acknowledge the Geolocation field from @lekkerduidelijk, which prompted me to create this one. Much appreciated!

There were a few things that Rutger’s plugin dictated that I had to work around, so I went ahead and wrote a new one with the primary goal of increasing flexibility and reliability.

You can read about the plugin on Github.

Features

  • Familiar Google Maps UI
  • Discrete storage of location name, latitude and longitude
  • Geocoding of place names and addresses
  • Repositionable marker (in case search doesn’t nail it)
  • Support for multiple place fields per form
  • Support for place fields within structure fields.
  • Easy to implement (See “Getting Started”, below)
  • Customizable default position and zoom— globally and on a per-field basis

Usage

The field can be used as many times as you like in a form, and can even be nested inside a structure field.

fields:
  location:
    label: Location
    type: place
    center:
      lat: 45.5230622
      lng: -122.67648159999999
      zoom: 9
    help: >
      Move the pin wherever you'd like, or search for a location!

Be sure to check out the Readme on GitHub for additional notes on configuration.

At the moment, I’m saving data as JSON. You can use PHP’s native json_decode() function to extract the address, lat and lng members of the object. Alternatively, you might implement your own custom field method, to decode and grab a single member, like $page->place()->location('lat') or $page->place()->location('address').

I’ve planned to release this functionality in a separate and optional field method plugin, but wanted to wrap up or freeze development on the field, first.

So: I’d love your feedback. This is one of my first contributions to Kirby, and I’m interested to see what you can do with it!

Happy programming!

12 Likes
2

Great work! Thanks for the compliment and I’ll be sure to check it out.

3

Hi there, @AugustMiller! Contacting you about your place field plugin, which I’ve successfully gotten to work via my panel- that was a breeze thanks to your instructions!

Unfortunately, I’m having trouble interfacing it with a google map display on the front end. You mentioned decoding it via JSON, and I’m not quite familar with JSON- I’ve installed your custom field method, but still need to extract the address, lat and lng from the JSON string. I’m not familar with JSON at all, so I’ve cobbled together something that I’m sure won’t work when implemented, but will likely provide you with a starting point. Could you read and tell me how I can properly decode the location info via JSON so my Google Map can display an event location?

     <?php
header('Content-type: application/json; charset=utf-8');
$locationdata = $page->location();

$json = array();

$json['address'] = array();
$json['lat']  = array();
$json['lng']  = array();

$json['address'][] = array(
    'addr' => (string)$page->location(),
    'lat'  => (string)$page->location(),
    'lng'  => (string)$page->location()
  );
echo json_decode($json);
?>

I also thought something along these lines would work somehow but could use a pointer or two:

$address = $page->location->$json('address');
$lat = $page->location->$json('lat');
$lng = $page->location->$json('lng');

Thanks- hopefully after decoding the JSON content, my Google Map should display the location the administrator chose in the panel via the place field! Looking forward to your help!

4

If you use the custom field method, then you just have to remove the $ signs, its a field method, not a variable and add the parentheses after location:

$address = $page->location()->json('address');
$lat = $page->location()->json('lat');
$lng = $page->location()->json('lng');
5

It looks like the first snippet, here, attempts to mimic a file containing JSON, on the server. We shouldn’t need to do this, I don’t think, unless you want to fetch map settings later, via AJAX.

The json() field method exists so you don’t actually have to know anything about JSON— it handles the conversion for you, and provides a normal PHP associative array that you are free to use however you like. Below, I use it to fetch all the location data, but you can do it piecemeal by passing in the name of the property you want back, like $page->location()->json('lat') to get only the lat property.

Typically, when I create a map in the front-end, I do something like this:

<!-- Fetch all location properties: -->
<? $location = $page->location()->json(); ?>

<!-- Output them into data-* attributes on our map element -->
<div id="map-canvas" data-lat="<?= $location['lat'] ?>" data-lng="<?= $location['lng'] ?>"></div>

You can pick up the data-* attributes with Javascript when creating a Google Maps instance. I adapted the code below from an example on the Google Maps JS API page:

var map,
    // Find the map-canvas element in the document:
    map_element = document.getElementById('map-canvas'),
    // Grab the data-lat and data-lng attributes:
    lat = map_element.getAttribute('data-lat'),
    lng = map_element.getAttribute('data-lng');
function initialize() {
  var mapOptions = {
    zoom: 8,
    // Use our stored latitude and longitude variables when providing the center:
    center: new google.maps.LatLng(lat, lng)
  };
  map = new google.maps.Map(map_element,
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

Hint: You can even capture the zoom level you set in config.php by adding another data-zoom attribute and appropriating the above code!

<div id="map-canvas" data-lat="<?= $location['lat'] ?>" data-lng="<?= $location['lng'] ?>" data-zoom="<?= c::get('place.defaults.zoom') ?>"></div>
1 Like
6

Thanks so much, @AugustMiller! Your suggestions were right on the money. Everything works like a charm right now, which is beyond awesome!

Only one change that probably should be addressed in your Google Maps JS API code that you modified:

long = map_element.getAttribute('data-lng');

should actually be

lng = map_element.getAttribute('data-lng');

That’s it! Thanks again- will be sure to reach out if I have more questions :slight_smile:

7

Oof. Good catch. I didn’t test that code before posting— glad it was close enough. :wink:

Updated my post in case anyone else needs some reference.

I think I’ll also add this implementation example to the GitHub docs, since this will probably be a fairly common question.

8

Hi, i have a problem with your Location plugin, can you help me please?. I put my issue in the link of Github https://github.com/lekkerduidelijk/kirby-geolocation-field/issues/1#issuecomment-64706089

9

Your Place field seems pretty nice -i’ve sent you a PR that fixes that some panel js is otherwise breaking (for me at least).

But how do I translate it? I’ve simply tried creating a site/languages/da.php file also a site/fields/place/da.php, but the panel isn’t picking it up.

10

I’ve just sent you another PR over at Github, which adds multi language support and a nicer placement of the search button :wink:

11

i just release a plugin which renders a styled google map GITHUB and works out of the box with your map field.

edited: please ask questions in my forum thread. thx.

1 Like
12

Hi bnomei,

really appreciate your plugin, will immediately use it in an actual project. BUT – I´m no “PHP crack”, therefore “real” PHP code examples instead of the “pseudo-code” for the use of the styledmap plugin on your Github page would be very helpful.

Many thanks in advance

Thomas

13

@steenweg please respond here… Plugin: Styled Google Map – Tag and Page Methods