import { no_base_map } from './maps/no_base_map';
import { fulldark_map } from './maps/fulldark_map';
import { hibrid_map } from './maps/hibrid_map';
import { icgc_map } from './maps/icgc_map';
import { night_map } from './maps/night_map';
import { osm_map } from './maps/osm_map';
import { positron_map } from './maps/positron_map';
import { satellite_hibrid } from './maps/satellite_hibrid';

import mapboxgl from 'mapbox-gl';

var axisMap = {

    addMap: function(id:String, target:String) {
        sendRequest(id)
        .then( (data) => {
            console.log(data);
            // Create Map
            return createMap(data, target);
        })
        .then( (info) => {
            // Add Controls
            addControls(info.map);
            return info;
        })
        .then( (info) => {
            // Add Layers
            addLayers(info.map, info.layers);
        })
        .catch( (err) => {
            console.log('Error: ', err);
        });
    }
};

function sendRequest(id:String) {
    return new Promise( (resolve, reject) => {
        var url = 'http://localhost:8080/map/' + id;
        console.log('url: ', url);
        fetch(url)
        .then( (res) => res.json())
        .then( (data) => {
            console.log('data server: ', data);
            if (data.ok) {
                resolve(data.map);
            } else {
                reject(data.error);
            }
        })
        .catch( (err) => {
            reject(err);
        });
    });
};

function createMap(info:any, target:String) {
    var base = String(info.base); // info.base = 'nobase'
    var lat = Number(info.lat);
    var lng = Number(info.lng);
    var zoom = Number(info.zoom);
    var layers = info.wmslayers;

    mapboxgl.accessToken = 'my_access_token';

    var map = new mapboxgl.Map({
        container: String(target),  // container id
        style: String(getBaseMap(base)), // stylesheet location
        center: [lng, lat], // starting position [lng, lat]
        zoom: zoom // starting zoom
    });

    return { map: map, layers: layers };
};

function addControls(map:any) {
    navigationControl(map);
    addScaleControl(map);
    addLocationControl(map);
};

function navigationControl(map:any) {
    var nav = new mapboxgl.NavigationControl();
    map.addControl(nav, 'top-right');
};

function addScaleControl(map:any) {
    var scale = new mapboxgl.ScaleControl({
        maxWidth: 80,
        unit: 'metric'
    });
    map.addControl(scale);
};

function addLocationControl(map:any) {
    map.addControl(new mapboxgl.GeolocateControl({
        positionOptions: {
            enableHighAccuracy: true,
            timeout: 300
        },
        trackUserLocation: true
    }));
};

function addLayers(map:any, layers:any) {
    if (layers.length > 0) {
        layers.reverse().forEach( (layer:any) => {

            map.on('load', function() {
                map.addLayer({
                'id': String(layer.keyName), 'type': 'raster',
                'source': { 'type': 'raster', 'tiles': [ createUrl(layer) ], 'tileSize': 256 }
                });
            });

        });
    }
};

function createUrl(layer:any) {
    var fullUrl;
    if (!layer.hasFilter) {
        fullUrl = `${layer.url}bbox={bbox-epsg-3857}&format=${layer.format}&styles=${layer.styles}&transparent=true&service=WMS&version=${layer.version}&request=GetMap&${(layer.version.localeCompare('1.3.0') === 0) ? 'crs' : 'srs' }=EPSG:3857&width=256&height=256&layers=${layer.layers}&map=${layer.aditionals}`;
    } else {
        fullUrl = `${layer.url}bbox={bbox-epsg-3857}&format=${layer.format}&styles=${layer.styles}&transparent=true&service=WMS&version=${layer.version}&request=GetMap&${(layer.version.localeCompare('1.3.0') === 0) ? 'crs' : 'srs' }=EPSG:3857&width=256&height=256&layers=${layer.layers}&map=${layer.aditionals}&CQL_FILTER=${layer.code}='${layer.filter}'`;
    }
    return fullUrl;
};

function getBaseMap(name:String) {

    switch(name) {
        case 'openstreetmaps': return osm_map;
        case 'icgc': return icgc_map;
        case 'positron': return positron_map;
        case 'fulldark': return fulldark_map;
        case 'night': return night_map;
        case 'hibrid': return hibrid_map;
        case 'nobase': return no_base_map;
        case 'hibrid': return satellite_hibrid;
        default:
            return no_base_map;
    }

};

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Map Generator</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='js/index.js'></script>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:50%; height: 50%; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>

        axisMap.addMap("5b4f12233cfb101f4c2d0537", "map");
    </script>
</body>
</html>

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const no_base_map_1 = require("./maps/no_base_map");
const fulldark_map_1 = require("./maps/fulldark_map");
const hibrid_map_1 = require("./maps/hibrid_map");
const icgc_map_1 = require("./maps/icgc_map");
const night_map_1 = require("./maps/night_map");
const osm_map_1 = require("./maps/osm_map");
const positron_map_1 = require("./maps/positron_map");
const satellite_hibrid_1 = require("./maps/satellite_hibrid");
const mapbox_gl_1 = __importDefault(require("mapbox-gl"));
var axisMap = {
    addMap: function (id, target) {
        sendRequest(id)
            .then((data) => {
            console.log(data);
            // Create Map
            return createMap(data, target);
        })
            .then((info) => {
            // Add Controls
            addControls(info.map);
            return info;
        })
            .then((info) => {
            // Add Layers
            addLayers(info.map, info.layers);
        })
            .catch((err) => {
            console.log('Error: ', err);
        });
    }
};
function sendRequest(id) {
    return new Promise((resolve, reject) => {
        var url = 'http://localhost:8080/map/' + id;
        console.log('url: ', url);
        fetch(url)
            .then((res) => res.json())
            .then((data) => {
            console.log('data server: ', data);
            if (data.ok) {
                resolve(data.map);
            }
            else {
                reject(data.error);
            }
        })
            .catch((err) => {
            reject(err);
        });
    });
}
;
....