firefly-iii/resources/views/form/location.twig

<div class="{{ classes }}" id="{{ name }}_holder">
    <label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>
    <div class="col-sm-8">
        {% if config('firefly.mapbox_api_key') == '' %}
            <p class="text-danger">
                {{ trans('firefly.mapbox_api_key')|raw }}
            </p>
        {% else %}
            <div id="{{ name }}_map" style="width:100%;height:300px;"></div>
            <div id="{{ name }}_map_canvas"></div>
            <p class="help-block">
                {{ 'press_object_location'|_ }}
                <button class="btn btn-default btn-xs" type="button" id="{{ name }}_clear_location">{{ 'clear_location'|_ }}</button>
            </p>
            {# latitude #}
            <input type="hidden" name="{{ name }}_latitude" value="{{ options.locations[name].latitude|default('52.3167') }}"/>

            {# longitude #}
            <input type="hidden" name="{{ name }}_longitude" value="{{ options.locations[name].longitude|default('5.5500') }}"/>

            {# zoomlevel #}
            <input type="hidden" name="{{ name }}_zoom_level" value="{{ options.locations[name].zoom_level|default('6') }}"/>

            {# has location set? #}
            <input type="hidden" name="{{ name }}_has_location" value="{{ options.locations[name].has_location|default('false') }}"/>
            {% include 'form.feedback' %}
        {% endif %}
    </div>
</div>

{% if config('firefly.mapbox_api_key') != '' %}
    {% set latitudevar = name~'_latitude' %}
    {% set longitudevar = name~'_longitude' %}
    {% set zoomlevelvar = name~'_zoom_level' %}
    {% set haslocationvar = name~'_has_location' %}
    {% set clearvar = name~'_clear_location' %}

    <script type="text/javascript" nonce="{{ JS_NONCE }}">
        var mymap;
        var marker;
        if (typeof locations.{{ name }}.latitude === 'undefined') {
            locations.{{ name }}.latitude = '52.3167';
        }
        if (typeof locations.{{ name }}.longitude === 'undefined') {
            locations.{{ name }}.longitude = '5.5500';
        }
        if (typeof locations.{{ name }}.zoom_level === 'undefined') {
            locations.{{ name }}.zoom_level = '6';
        }

        if (typeof mapboxToken === 'undefined') {
            var mapboxToken = 'invalid';
        }
        window.onload = function () {
            document.getElementById('{{ clearvar }}').addEventListener('click', function () {
                if (typeof marker !== 'undefined') {
                    marker.remove();
                    $('input[name="{{ haslocationvar }}"]').val('false');
                    $('input[name="{{ latitudevar }}"]').val('');
                    $('input[name="{{ longitudevar }}"]').val('');
                    $('input[name="{{ zoomlevelvar }}"]').val('');
                }
            });
        };


        // set location thing:
        function setObjectLocation(e) {
            if (typeof e.latlng !== 'undefined') {
                console.log('Set object location: lat(' + e.latlng.lat + '), long(' + e.latlng.lng + '), zoom (' + mymap.getZoom() + ')');
                $('input[name="{{ latitudevar }}"]').val(e.latlng.lat);
                $('input[name="{{ longitudevar }}"]').val(e.latlng.lng);
                $('input[name="{{ haslocationvar }}"]').val('true');
            }
            if (typeof e.latlng === 'undefined') {
                console.log('Set object zoom level to ' + mymap.getZoom());
            }
            $('input[name="{{ zoomlevelvar }}"]').val(mymap.getZoom());


            // remove existing marker:
            if (typeof marker !== 'undefined' && typeof e.latlng !== 'undefined') {
                marker.remove();
            }
            if (typeof e.latlng !== 'undefined') {
                // new marker
                marker = L.marker({lat: e.latlng.lat, lng: e.latlng.lng}).addTo(mymap);
            }
        }


        document.addEventListener("DOMContentLoaded", function () {
            "use strict";

            // make map:
            mymap = L.map('{{ name }}_map').setView({lat: locations.{{ name }}.latitude, lng: locations.{{ name }}.longitude}, locations.{{ name }}.zoom_level);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?access_token={accessToken}', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                maxZoom: 18,
                id: 'mapbox.streets',
                accessToken: mapboxToken
            }).addTo(mymap);

            mymap.on('contextmenu', setObjectLocation);
            mymap.on('zoomend', setObjectLocation);

            // add marker
            if (typeof locations.{{ name }}.has_location !== 'undefined' && locations.{{ name }}.has_location === true) {
                marker = L.marker({lat: locations.{{ name }}.latitude, lng: locations.{{ name }}.longitude}).addTo(mymap);
            }
        });
    </script>
{% endif %}