@extends('templates.frontend')

@section('content')
<script src="{{ asset('libraries/openlayers/openlayers-v5.3.0.min.js') }}"></script>
<link href="{{ asset('libraries/openlayers/openlayers-v5.3.0.min.css') }}" rel="stylesheet" />

<style>
    #map {
        max-width: 70%;
        margin: 0 auto;
    }
    /*.marker {*/
        /*width: 20px;*/
        /*height: 20px;*/
        /*border: 1px solid #088;*/
        /*border-radius: 10px;*/
        /*background-color: #0FF;*/
        /*opacity: 0.5;*/
    /*}*/
    .marker {
        /*width: 26px;*/
        /*height: 35px;*/
        width: 29px;
        height: 43px;
        background-image: url('{{ asset('images/map-marker.png') }}');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
</style>

<div id="map" class="map"></div>

<script>
    function addMarker(id, latitude, longitude)
    {
        var element = document.createElement('div');
        element.id = 'facility_' + id;
        element.classList.add('marker');
        element.addEventListener('click', function() {
            alert('Clicked Facility #' + id);
        });

        var marker = new ol.Overlay({
            position: ol.proj.fromLonLat([longitude, latitude]),
            positioning: 'center-center',
            element: element,
            stopEvent: false
        });

        MARKERS[id] = {
            marker: marker
        };

        map.addOverlay(MARKERS[id].marker);
    }

    var MARKERS = {};
    var layer = new ol.layer.Tile({
        source: new ol.source.OSM()
    });

    var map = new ol.Map({
        layers: [layer],
        target: 'map',
        view: new ol.View({
            center: ol.proj.fromLonLat([{{ Setting::get('initial-map-longitude') }}, {{ Setting::get('initial-map-latitude') }}]),
            zoom: {{ Setting::get('initial-map-zoom') }}
        })
    });

    /* TODO: use Bounds?
    * https://stackoverflow.com/questions/15910968/openlayers-display-all-markers-on-screen
    * */
@foreach($markers as $marker)
    @if($marker->latitude && $marker->longitude)
        addMarker({{ $marker->id }}, {{ $marker->latitude }}, {{ $marker->longitude}});
    @else
        console.error("Marker #{{ $marker->id }} is missing lat/lng and will not be displayed on map!");
    @endif
@endforeach

    window.MARKERS = MARKERS;
</script>
@stop