import { Component, Host, Prop, h } from '@stencil/core';
import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js';
export class BbMap {
    constructor() {
        this.latitude = 0;
        this.longitude = 0;
        this.loadMap = (el) => {
            console.log('GEO', el);
            //el => this.geoContainer = el as HTMLDivElement
            mapboxgl.accessToken = 'pk.eyJ1Ijoic2F5aXRyaWdodCIsImEiOiJjaXVmbjFsdzQwMGUyMnpud245ZjE4cmd3In0.lG2o6rH-9IRQY2eE2ktOiQ';
            //const _map = new mapboxgl.Map({
            //  container: el,
            //  style: 'mapbox://styles/mapbox/streets-v11'
            //});
            var map = new mapboxgl.Map({
                container: el,
                style: 'mapbox://styles/sayitright/ckcwaxgwl030u1iqb6b7m7b45',
                center: [this.longitude, this.latitude],
                zoom: 9,
                scrollZoom: false
            });
            // Add zoom and rotation controls to the map.
            map.addControl(new mapboxgl.NavigationControl());
            const marker = new mapboxgl.Marker()
                .setLngLat([this.longitude, this.latitude])
                .setPopup(new mapboxgl.Popup().setHTML(`<small>${this.latitude},${this.longitude}</small>`))
                .addTo(map);
            marker;
            setTimeout(() => {
                map.resize();
            }, 500);
        };
    }
    render() {
        //
        return (h(Host, null,
            h("link", { href: 'https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css', rel: 'stylesheet' }),
            h("div", { ref: this.loadMap, style: { display: 'block', position: 'absolute', width: '100%', height: '100%' } })));
    }
    static get is() { return "bb-map"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bb-map.css"]
    }; }
    static get styleUrls() { return {
        "$": ["bb-map.css"]
    }; }
    static get properties() { return {
        "latitude": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "latitude",
            "reflect": false,
            "defaultValue": "0"
        },
        "longitude": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "longitude",
            "reflect": false,
            "defaultValue": "0"
        }
    }; }
}
