document.addEventListener("DOMContentLoaded", function() {
    var element = document.getElementById('map');
    
    if (!element) return; 

    element.style.height = '100%'; 
    element.style.minHeight = '500px';

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        target: element,
        controls: ol.control.defaults.defaults ? 
                  ol.control.defaults.defaults().extend([
                      new ol.control.MousePosition({
                          projection: 'EPSG:4326',
                          coordinateFormat: function(coordinate) {
                              return ol.coordinate.format(coordinate, '{x}, {y}', 4);
                          },
                      }),
                      new ol.control.ScaleLine()
                  ]) : 
                  ol.control.defaults().extend([
                      new ol.control.MousePosition({
                          projection: 'EPSG:4326',
                          coordinateFormat: function(coordinate) {
                              return ol.coordinate.format(coordinate, '{x}, {y}', 4);
                          },
                      }),
                      new ol.control.ScaleLine()
                  ]),
        // view: new ol.View({
        //     center: [-135846.63, 891762.35], 
        //     zoom: 6
        // })
        view: new ol.View({
            // ol.proj.fromLonLat([longitude, latitude])
            center: ol.proj.fromLonLat([-1.0232, 7.9465]), 
            zoom: 5.5, // Zoomed into the country level
            minZoom: 2,  // Allows zooming out
				    maxZoom: 19  // Allows zooming in
        })
    });
    // setTimeout(function() {
    //     map.updateSize();
    // }, 200);
    setTimeout(function() {
		    map.updateSize();
		    map.getView().setCenter(ol.proj.fromLonLat([-1.0232, 7.9465]));
		    map.getView().setZoom(7);
		}, 300);

});