kirby-map-field
kirby-map-field copied to clipboard
AugustMiller
Out-of-the-box map rendering
I guess the next step should be to create a map()-component to use long and lat to create a google map or apple map or something similar (preferably chosen by the user)
Hey! Saw your thread on the forum— I've created a Feature "Idea" under the Projects tab.
This is something I've been meaning to do for ages, but to get it right, it'll need really careful consideration, especially when it comes to initializing multiple maps per page. For now, I'd like to continue thinking about a simple example that each developer can implement in a way that's suitable to their app.
my first idea was to have a map component but maybe we should keep in mind, that not everyone wants to implement google maps on their sites ...
my ideas so far are
<?php echo map($long, $lat, 'google'); ?>
<?php echo $page->location()->toMap($function); ?>
<?php echo $page->location()->toMap('google'); ?>
<?php echo $page->location()->toGoogleMap(); ?>
the simple example would be
<?php $location = $page->location()->yaml(); ?>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: <?php echo $location['lat']; ?>, lng: <?php echo $location['lng']; ?>};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: <?php echo $location['zoom']; ?>,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<?php echo c::get('map.key'); ?>&callback=initMap">
</script>
By "Component" do you mean a field method? Or is it some larger bit of functionality that I'm not considering?
I'm doing some hacking, locally, and have a few observations…
The good:
- It's easy enough to include a snippet and field method to output that snippet, passing the field data.
- It's possible to render multiple maps per page, this way
The ugly:
- Without some larger, global JS architecture, it's difficult to initialize multiple maps in way that doesn't pollute the global space.
- As such, you have to add a snippet to the
<head>of your document so that all maps have access to the same initializer function - It seems as though the only way to wire up the JS to a map element is by creating "unique IDs" with PHP's
uniqid()function, packaging the element and a script tag together, in a snippet
Overall, I'm inclined to develop a series of Wiki guides to help people implement custom solutions. Whatever we might bake in to the plugin is going to be less-than-ideal for pretty much every implementation, and as such, of questionable value.
By including a sort of "recipe" for rendering your first map, it'll be easy enough to create your own snippet/field method, etc. that operates just how you'd like…
<? /* templates/default.php */ ?>
<? snippet('map', $page->location()->yaml()) ?>
Semi-related— I'd prefer users to implement the map initialization code in their existing JS bundles, and not leave it to the HTML page to contain hard-coded scripts.
The moment anyone needs to customize the map (say, the zoom level, or stylers), they'd need to engineer their own initializer, anyway… and—in all likelihood— re-engineer the snippet so it doesn't attempt to auto-initialize.
Apologies for my skepticism— I'm convinced that the plugin should stay lean, but the documentation and examples improved.
i just released a plugin for rendering styled google maps and it has built in support for your map field.
