import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {all as allStrategy} from 'ol/loadingstrategy';
import {bbox as bboxStrategy} from 'ol/loadingstrategy.js';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM.js';
import XYZ from 'ol/source/XYZ';
import {fromLonLat} from 'ol/proj.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import VectorTileLayer from 'ol/layer/VectorTile.js';
import VectorTileSource from 'ol/source/VectorTile.js';
import OSMXML from 'ol/format/OSMXML.js';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js';


const coordinate_cccamp19 = fromLonLat([13.30735, 53.03127]);


var styles = {
	'amenity': {
		'parking': new Style({
			stroke: new Stroke({
				color: 'rgba(170, 170, 170, 1.0)',
				width: 1
			}),
			fill: new Fill({
				color: 'rgba(170, 170, 170, 0.3)'
			})
		})
	},
	'building': {
		'.*': new Style({
			zIndex: 100,
			stroke: new Stroke({
				color: 'rgba(246, 99, 79, 1.0)',
				width: 1
			}),
			fill: new Fill({
				color: 'rgba(246, 99, 79, 0.3)'
			})
		})
	},
	'highway': {
		'service': new Style({
			stroke: new Stroke({
				color: 'rgba(255, 255, 255, 1.0)',
				width: 2
			})
		}),
		'.*': new Style({
			stroke: new Stroke({
				color: 'rgba(255, 255, 255, 1.0)',
				width: 3
			})
		})
	},
	'landuse': {
		'forest|grass|allotments': new Style({
			stroke: new Stroke({
				color: 'rgba(140, 208, 95, 1.0)',
				width: 1
			}),
			fill: new Fill({
				color: 'rgba(140, 208, 95, 0.3)'
			})
		})
	},
	'natural': {
		'tree': new Style({
			image: new CircleStyle({
				radius: 2,
				fill: new Fill({
					     color: 'rgba(140, 208, 95, 1.0)'
					   }),
				stroke: null
			})
		})
	}
};

var vectorSource = new VectorTileSource({
	format: new OSMXML(),
	url: 'https://seafile.milliways.info/f/688170149668429f9598/?dl=1',
	/*loader:  function(extent, resolution, projection) {
		var proj = projection.getCode();
		var url = 'https://seafile.milliways.info/f/688170149668429f9598/?dl=1';
		var xhr = new XMLHttpRequest();
		xhr.open('GET', url);
		var onError = function(e) {
			vectorSource.removeLoadedExtent(extent);
		}
		xhr.onerror = onError;
		xhr.onload = function() {
			if (xhr.status == 200) {
				vectorSource.addFeatures(
				vectorSource.getFormat().readFeatures(xhr.responseText));
			} else {
				onError();
			}
		}
		xhr.send();
	},*/
	strategy: allStrategy
})

var map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new XYZ({
        url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
      })
      //source: OSM()
    }),
    new VectorTileLayer({
      source: vectorSource,
      style: function(feature) {
        for (var key in styles) {
          var value = feature.get(key);
          if (value !== undefined) {
            for (var regexp in styles[key]) {
              if (new RegExp(regexp).test(value)) {
                return styles[key][regexp];
              }
            }
          }
        }
        return null;
      }
    })
  ],
  view: new View({
    center: coordinate_cccamp19,
    zoom: 17
  })
});



document.map = map;

module.export= {
	mapa: map
}