firefly-iii/resources/views/v1/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="map-canvas"></div>
        <p class="help-block">
            {{ 'press_tag_location'|_ }}
            <a href="#" id="{{ name }}_clear_location">{{ 'clear_location'|_ }}</a>
        </p>
        {# latitude #}
        {% if old(name~'_latitude') %}
            <input type="hidden" name="{{ name }}_latitude" value="{{ old('tag_position_latitude') }}"/>
        {% else %}
            <input type="hidden" name="{{ name }}_latitude" value="{{ tag.latitude }}"/>
        {% endif %}

        {# longitude #}
        {% if old('tag_position_longitude') %}
            <input type="hidden" name="{{ name }}_longitude" value="{{ old('tag_position_longitude') }}"/>
        {% else %}
            <input type="hidden" name="{{ name }}_longitude" value="{{ tag.longitude }}"/>
        {% endif %}

        {# zoomlevel #}
        {% if old('tag_position_zoomlevel') %}
            <input type="hidden" name="{{ name }}_zoomlevel" value="{{ old('tag_position_zoomlevel') }}"/>
        {% else %}
            <input type="hidden" name="{{ name }}_zoomlevel" value="{{ tag.zoomLevel }}"/>
        {% endif %}
        {% if tag.zoomLevel and tag.longitude and tag.latitude %}
            <input type="hidden" name="{{ name }}_has_tag" value="true"/>
        {% else %}
            <input type="hidden" name="{{ name }}_has_tag" value="false"/>
        {% endif %}
        {% include 'form/feedback' %}
        {% endif %}
    </div>
</div>

{% if config('firefly.mapbox_api_key') != '' %}
    {% set latitudevar = name~'_latitude' %}
    {% set longitudevar = name~'_longitude' %}
    {% set zoomlevelvar = name~'_zoomlevel' %}
    {% set hastagvar = name~'_has_tag' %}
    {% set settagvar = name~'_set_tag' %}
    {% set clearvar = name~'_clear_location' %}

    <script type="text/javascript">
        var mymap;
        var marker;
        if (typeof {{ latitudevar }} === "undefined") {
            var {{ latitudevar }} =
            "52.3167";
        }
        if (typeof {{ longitudevar }} === "undefined") {
            var {{ longitudevar }} =
            "5.5500";
        }
        if (typeof {{ zoomlevelvar }} === "undefined") {
            var {{ zoomlevelvar }} =
            "6";
        }

        if (typeof mapboxToken === 'undefined') {
            var mapboxToken = 'invalid';
        }
        //
        document.getElementById('{{ clearvar }}').addEventListener('click', function () {
            if (typeof marker !== 'undefined') {
                marker.remove();
                $('input[name="{{ hastagvar }}"]').val('false');
            }
            return false;
        });

        // set location thing:
        function setTagLocation(e) {
            $('input[name="{{ latitudevar }}"]').val(e.latlng.lat);
            $('input[name="{{ longitudevar }}"]').val(e.latlng.lng);
            $('input[name="{{ zoomlevelvar }}"]').val(mymap.getZoom());
            $('input[name="{{ hastagvar }}"]').val('true');

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


        console.log({{ longitudevar }});

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

            // make map:
            mymap = L.map('{{ name }}_map').setView([{{ latitudevar }}, {{ longitudevar }}], {{ zoomlevelvar }});

            L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
                attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
                maxZoom: 18,
                id: 'mapbox.streets',
                accessToken: mapboxToken
            }).addTo(mymap);

            mymap.on('contextmenu', setTagLocation);

            // add marker
            if (typeof {{ settagvar }} !== 'undefined' && {{ settagvar }} === true) {
                marker = L.marker([{{ latitudevar }}, {{ longitudevar }}]).addTo(mymap);
            }

        });
    </script>
{% endif %}