class open_layer_map {

  constructor(json) {
    this.center = {};
    this.standplatz_data = [];
  }

  /*
   * Get data from Server via json and create map
   */
  make_map_from_json() {
    var DBO = new DB();

    var data = {get_json_from_class: 'ajax',func: 'standorte'};
    DBO.get_json_from(data).then(function (json) {

      const json_object = jQuery.parseJSON(json);

      olm.make_map(json_object);

    },function (error) {
      console.log('Error in ajax call',error);
    });
  }

  /*
   * Full Map plus listener
   */
  make_map(json_object){


    $('#mymap,#popup').html('');
    $('#map_container').append("<div id='popup'></div>");

    this.setcenter(json_object.center_map_lng,json_object.center_map_lat);
    this.set_zoom(json_object.zoom);
    this.create_map();
    this.create_markers(json_object,this);
    this.create_popup(this);



    /*
    * Click Handler Marker
    */
    this.map.on('click',function (evt) {
      olm.element.innerHTML = '';

      var feature = olm.map.forEachFeatureAtPixel(evt.pixel,function (feature,layer) {
        return feature;
      });

      if (feature) {

        const mmid = feature.mmid;

        var coord = feature.getGeometry().getcoordinates();
        var props = feature.getProperties();
        var info = "<h2>bvnvb</h2>";
        // Offset the popup so it points at the middle of the marker not the tip
        olm.popup.setOffset([0,-22]);
        olm.popup.setPosition(evt.coordinate);
        
        var json_lb = {func:'google_map_route',height:'600',width:900,max_width:900,close_LB:'X',navigate_from: '',navigate_to:'52.314719989584795,7.872352543544025'};

        json_lb = JSON.stringify(json_lb)
        
        olm.element.innerHTML = +
          '<h3>' + olm.standplatz_data[mmid].market_name + '</h3>' +
          '<p>' + olm.standplatz_data[mmid].street + olm.standplatz_data[mmid].nr + '</p>' +
          '<p>' + olm.standplatz_data[mmid].city + '</p><br>' +
          '<p>' + olm.standplatz_data[mmid].firstname + olm.standplatz_data[mmid].lastname + '</p>' +
          '<p>' + olm.standplatz_data[mmid].mobile + '</p>' +
          "<div class='hierhin_navigieren even open_LB bglb cursor' json='json_lb' onClick='alert(8);LB()'><span class='glyphicon glyphicon-envelope'></span> HIERHIN NAVIGIEREN</div>";
      }

    });

  }


  /*
   * Set center
   */
  setcenter(lng,lat) {
    this.center.lng = parseFloat(lng);
    this.center.lat = parseFloat(lat);
  }

  /*
   * Set zoom
   */
  set_zoom(zoom) {
    this.zoom = zoom;
  }

  create_map() {
    /*
     * Baselayer,whatever that is
     */
    var baselayer = new ol.layer.Tile({
      source: new ol.source.OSM()
    });
    var layer1 = new ol.layer.Tile({});

    this.map = new ol.Map({
      layers: [baselayer,layer1],controls: ol.control.defaults().extend([
        new ol.control.ScaleLine({
          units: 'metric'
        }),new ol.control.FullScreen()
      ]),target: 'mymap',view: new ol.View({
        center: ol.proj.fromLonLat([this.center.lng,this.center.lat]),zoom: this.zoom //Initial zoom Level
      })
    });

  }


  /*
   * Create Markers
   */
  create_markers(json_object,MAP){

    json_object.ROWS.forEach(function (item) {

      var marker;
      marker = new ol.Feature({
        geometry: new ol.geom.Point(
          ol.proj.fromLonLat([parseFloat(item.len),parseFloat(item.lat)])
        ),// Cordinates of New York's City Hall
      });

      marker.setStyle(new ol.style.Style({
        image: new ol.style.Icon(({
          color: '#ffcd46',crossOrigin: 'anonymous',src: '/files/grillplatzfinder/gmaps_icon_grillmobil.png'
        }))
      }));

      marker.mmid = item.id;

      MAP.standplatz_data[item.id] = item;

      MAP.vectorSource = new ol.source.Vector({
        features: [marker]
      });
      MAP.markerVectorLayer = new ol.layer.Vector({
        source: MAP.vectorSource,});
      MAP.map.addLayer(MAP.markerVectorLayer);
    });
  }


  /*
   * Create ONE popup
   */
  create_popup(MAP){
    MAP.element = document.getElementById('popup');
    MAP.popup = new ol.Overlay({
      element: MAP.element,positioning: 'bottom-center',stopEvent: false
    });
    MAP.map.addOverlay(MAP.popup);
  }
}