<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/css/ol.css" type="text/css" />
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/build/ol.js"></script>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>

<style type="text/css">
#map { 
    height: {{ geomap_height }};
</style>

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

<script type="text/javascript">

var vectorSource = new ol.source.Vector({});
var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

var styles = new Map();

function setMarker(coordinate, info_html, icon) {
  var marker = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat(coordinate)),
    name: info_html,
  });
  marker.setStyle(styles.get(icon));
  vectorSource.addFeature(marker);
  return marker;
}

function setIconPointer() {
// change mouse cursor when over marker
  map.on("pointermove", function (evt) {
    var hit = this.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
        return true;
    }); 
    this.getTargetElement().style.cursor = (hit) ? 'pointer' : '';
  });
}

function get_extents(map_zoom, center, vector_layer) {
// https://gis.stackexchange.com/questions/133360/how-to-get-the-latitude-longitude-of-the-4-corners-of-the-map-being-displayed
  var lon_center=center[0], lat_center=center[1];

  var view = new ol.View({
    center: ol.proj.fromLonLat([lon_center, lat_center]),
    maxZoom: 19,
    minZoom: 1,
    zoom: map_zoom
  });

  var map = new ol.Map({
    layers: [new ol.layer.Tile({
      source: new ol.source.OSM()
    }), vector_layer, ],
  
    target: 'map',
    controls: ol.control.defaults(),
    view: view
  
    });

  extents = ol.proj.transformExtent(
    map.getView().calculateExtent(map.getSize()),
    'EPSG:3857',
    'EPSG:4326'
  );

  map.setTarget(null);
  map = null;

  return extents
}

function is_inside(box, ext) {
  var lon_box_min=box[0], lon_box_max=box[1], lat_box_min=box[2], lat_box_max=box[3];
  var lon_ext_min=ext[0], lon_ext_max=ext[2], lat_ext_min=ext[1], lat_ext_max=ext[3];

  return (lon_box_min > lon_ext_min) && (lon_box_max < lon_ext_max) && (lat_box_min > lat_ext_min) && (lat_box_max < lat_ext_max);
}

function calc_zoom(autozoom, center, box, vector_layer) {
  for(i = autozoom; i > 1; i--) {
    var extents = get_extents(i, center, vector_layer);
    if (is_inside(box, extents)) {
      return i - 1;
    }
  }
  return 1;
}

var lon_min=180.0, lon_max=-180.0, lat_min=180.0, lat_max=-180.0;

{% for geoitem in geomap_items %}
{% if geoitem.geomap_longitude and geoitem.geomap_latitude %}

if (!styles.has("{{ geoitem.geomap_icon }}")) {
  // create custom marker image
  var style = new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 0.9],
      anchorXUnits: 'fraction',
      anchorYUnits: 'fraction',
      opacity: 0.8,
      src: "{{ geoitem.geomap_icon }}"
    })
  });
  styles.set("{{ geoitem.geomap_icon }}", style);
}

if (lon_min > {{ geoitem.geomap_longitude }}) {lon_min = {{ geoitem.geomap_longitude }};}
if (lon_max < {{ geoitem.geomap_longitude }}) {lon_max = {{ geoitem.geomap_longitude }};}
if (lat_min > {{ geoitem.geomap_latitude }}) {lat_min = {{ geoitem.geomap_latitude }};}
if (lat_max < {{ geoitem.geomap_latitude }}) {lat_max = {{ geoitem.geomap_latitude }};}

geoitem_edit = setMarker(
  [{{ geoitem.geomap_longitude }}, {{ geoitem.geomap_latitude }}],
  {% if geomap_common %}
    "{{ geoitem.geomap_popup_common|safe }}",
  {% else %}
    {% if geomap_edit %}
      "{{ geoitem.geomap_popup_edit|safe }}",
    {% else %}
      "{{ geoitem.geomap_popup_view|safe }}",
    {% endif %}
  {% endif %}
  "{{ geoitem.geomap_icon }}"
);

{% endif %}
{% endfor %}

var lon_center = lon_min + (lon_max - lon_min) / 2.0;
var lat_center = lat_min + (lat_max - lat_min) / 2.0;
var map_zoom;

if ({{ geomap_autozoom }} > 0) {

  {% if geomap_items %}

    {% if geomap_items|length == 1 %}
      map_zoom = {{ geomap_autozoom }};
    {% else %}
      map_zoom = calc_zoom({{ geomap_autozoom }}, [lon_center, lat_center], [lon_min, lon_max, lat_min, lat_max], vectorLayer);
    {% endif %}

  {% else %}
    lon_center = {{ geomap_longitude }};
    lat_center = {{ geomap_latitude }};
    map_zoom = {{ geomap_zoom }};
  {% endif %}

  } else {
  lon_center = {{ geomap_longitude }};
  lat_center = {{ geomap_latitude }};
  map_zoom = {{ geomap_zoom }};
}

var view = new ol.View({
  center: ol.proj.fromLonLat([lon_center, lat_center]),
  maxZoom: 19,
  minZoom: 1,
  zoom: map_zoom
});

const map = new ol.Map({
  layers: [new ol.layer.Tile({
    source: new ol.source.OSM()
    // source: new ol.source.OSM({
    //   key: 'myKey',
    //   crossOrigin: ''
    // })
  }), vectorLayer, ],

  target: 'map',
  controls: ol.control.defaults(),
  view: view

});

{% if geomap_form %}

const longitude_field = document.getElementById("{{ geomap_field_longitude }}");
const latitude_field = document.getElementById("{{ geomap_field_latitude }}");

{% else %}

const longitude_field = undefined;
const latitude_field = undefined;

{% endif %}

</script>
