Kirby-locator plugin, front-end map?

The CMS Questions
3

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).