Kirby-locator plugin, front-end map?

Hi,

Does the Kirby-locator plugin from @sylvainjule allows us to display a map in the front-end or just the data location (lat, lon …)?

Yes… i did this a couple of days ago via mapbox. Im using Blade & Builder but you get the idea…

@php
$location = $page->location()->toLocation();
@endphp

<div class="location-map">
<h3>@php echo $data->maptitle() @endphp</h3>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'YOURTOKEN';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
    center: [@php echo $location->lon() @endphp, @php echo $location->lat() @endphp], // starting position [lng, lat]
    zoom: 9 // starting zoom
});
</script>
</div>

It only stores the location, displaying it on your website is then up to you and the service you want to use.

Let’s say you have a #map container.

Mapbox:

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
<?php $location = $page->location()->toLocation(); ?>
<script>
    mapboxgl.accessToken = 'your.accesstoken';
    // init the map with the current location as center
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/yourstyle',
        center: [<?php echo $location->lon(); ?>,<?php echo $location->lat(); ?>],
        zoom: 14
    });

    // create a <div class="marker"></div> that you can style with CSS
    var el = document.createElement('div');
        el.className = 'marker';
    new mapboxgl.Marker({
        element: el,
        offset: [-20, -40] // if your marker if 40*40 for example
    })
    .setLngLat([<?php echo $location->lon(); ?>,<?php echo $location->lat(); ?>])
    .addTo(map);
</script>

Leaflet:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<script>
    // init map
    var mymap = L.map('mapid').setView([<?php echo $location->lon(); ?>,<?php echo $location->lat(); ?>], 13);
    
    // add a tile layer, openstreetmap in this example
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Attribution text',
    }).addTo(mymap);
    
    // create a marker at the location
    var marker = L.marker([<?php echo $location->lon(); ?>,<?php echo $location->lat(); ?>]).addTo(mymap);
</script>

They are to take as a starting point, always refer to their own documentation to make it fit your usage.

There are so many use cases for displaying maps depending on what you’re looking for, and so many libraries that would need to be regularly updated, that I prefer not to provide these within the locator plugin. Else maintaining the repo and answering map questions that’d come with would be very time-consuming.

[edit] Additional warning if anyone ends up on this thread at a later point: The above implementation is here to illustrate what it’d take for the map to be displayed, but always be careful when including third-party scripts and if you do so, try to check their integrity (the leaflet quickstart shows an example).

Thank you both for your answer and code snippet examples.

It’s clear for me now :slight_smile: