import React, { Component } from 'react';
import Map from 'pigeon-maps';
import Marker from 'pigeon-marker';
import Overlay from 'pigeon-overlay';

const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoicGlnZW9uLW1hcHMiLCJhIjoiY2l3eW01Y2E2MDA4dzJ6cWh5dG9pYWlwdiJ9.cvdCf-7PymM1Y3xp5j71NQ'

/*const providers = () => {
    osm: (x, y, z) => {
      const s = String.fromCharCode(97 + (x + y + z) % 3)
      return 'https://${s}.tile.openstreetmap.org/${z}/${x}/${y}.png'
    }
  }*/

class PigeonMap extends Component {


    render(){
        return (
            <Map center={[50.879, 4.6997]} zoom={12} width={600} height={400} className="mapWrapper"> /*
                <Marker anchor={[50.874, 4.6947]} payload={1} onClick={({ event, anchor, payload }) => {}} />
        
                <Overlay anchor={[50.879, 4.6997]} offset={[120, 79]}>
                  <img src='pigeon.jpg' width={240} height={158} alt='' />
                </Overlay>*/
              </Map>
        );
    }
}

export default PigeonMap;