<div id="map" class="map" style="width: 100%; height: 100%;"></div>
<%= stylesheet_link_tag  'https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css' %>
<%= stylesheet_link_tag  'https://unpkg.com/ol-layerswitcher@3.5.0/src/ol-layerswitcher.css' %>
<%= javascript_include_tag 'https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js' %>
<%= javascript_include_tag 'https://unpkg.com/ol-layerswitcher@3.5.0' %>
<%= javascript_include_tag 'map' %>
<script>
    function initPublicMap(){
        var map = getMapInstance("map", null);
        markerVectorLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: []
            }),
        });
        map.addLayer(markerVectorLayer);

        let marker = new ol.Feature({
            geometry: new ol.geom.Point(
                ol.proj.fromLonLat([<%= @last_position.longitude %>, <%= @last_position.latitude %>])
            ),
        });
        marker.setStyle(new ol.style.Style({
            image: new ol.style.Icon({
                crossOrigin: 'anonymous',
                //color: global_colors[device.status],
                src: '/assets/' + 'images/' + '<%= @vehicle.marker_url %>'
            }),
            text: new ol.style.Text({
                text: '<%= @vehicle.name %>',
                overflow: true,
                fill: new ol.style.Fill({
                    color: Traccar.Style.mapGeofenceTextColor
                }),
                stroke: new ol.style.Stroke({
                    color: Traccar.Style.mapTextStrokeColor,
                    width: Traccar.Style.mapTextStrokeWidth
                }),
                font: Traccar.Style.mapTextFont
            })
        }));
        markerVectorLayer.getSource().addFeature(marker);
        map.getView().fit(markerVectorLayer.getSource().getExtent(), {duration: 0});
    }
    document.title = "Public link: <%= @vehicle.name %>";
    initPublicMap();
    setTimeout("location.reload();", 10000);
</script>
