@extends('templates.frontend')

@section('content')
<script src="{{ asset('js/interactive-map.js') }}"></script>
{{--<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">--}}

<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;
        background-image: url('{{ asset('images/map-marker-icon.png') }}');
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

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

<script>
    var markers = [];
@foreach($facilities as $facility)
    @if($facility->latitude && $facility->longitude)
        markers.push({ id: {{ $facility->id }}, latitude: {{ $facility->latitude }}, longitude: {{ $facility->longitude}} });
    @else
        console.error("Facility #{{ $facility->id }} is missing lat/lng and will not be displayed on map!");
    @endif
@endforeach
    initializeOpenLayersMap(markers);
</script>
@stop