{% if __SELF__.property('icon') %}
<div class="py-2">
    <img src="{{ __SELF__.property('icon')|media}}">
    <h4>Find us</h4>
</div>
{% endif %}
<div id="mapid" style="height:250px;"></div>
<script src="/plugins/bishopm/churchnet/assets/js/leaflet.js"></script>
<script>
    var tilelayer=L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: '{{ __SELF__.property('token') }}'
    });
    var satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { maxZoom: 18 });
    var allMaps = { "Street map": tilelayer, "Satellite image": satellite };
    var mymap = L.map('mapid', {center: [{{ __SELF__.property('latitude') }}, {{ __SELF__.property('longitude') }}], zoom:14});
    L.control.layers(allMaps).addTo(mymap);
    tilelayer.addTo(mymap);
    var marker = L.marker([{{ __SELF__.property('latitude') }}, {{ __SELF__.property('longitude') }}]).addTo(mymap);
</script>