import { bboxFromGeoJSON, TomTomConfig } from '@tomtom-org/maps-sdk/core';
import { PlacesModule, TomTomMap } from '@tomtom-org/maps-sdk/map';
import { search } from '@tomtom-org/maps-sdk/services';
const airportEsSVG = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"120\" height=\"139.999\">\n    <defs>\n        <clipPath id=\"A\">\n            <path d=\"M-6-7.322h132v153.42H-6zM60 6.526c29.824 0 54 23.564 54 52.629 0 17.69-8.948 33.344-22.702 42.893l-2.268 1.571C78.858 110.644 67.104 118.758 60 130.53c-7.108-11.772-18.858-19.89-29.03-26.911l-2.27-1.571C14.95 92.499 6 76.845 6 59.155 6 30.09 30.176 6.526 60 6.525zm0-5.848c-33.138 0-60 26.18-60 58.477 0 19.66 9.954 37.054 25.218 47.655l2.016 1.396c11.13 7.7 22.634 15.663 28.816 27.451 1.706 3.255 6.194 3.255 7.9 0 6.184-11.788 17.686-19.751 28.816-27.451h-.004l2.016-1.396C110.046 96.209 120 78.815 120 59.155 120 26.858 93.138.678 60 .678z\"/>\n        </clipPath>\n        <filter id=\"B\">\n            <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"2.5\"/>\n            <feOffset dy=\"2\" result=\"A\"/>\n            <feFlood flood-color=\"#ffc800\"/>\n            <feComposite in2=\"A\" operator=\"in\"/>\n        </filter>\n    </defs>\n    <path d=\"M63.95 135.661c6.556-12.503 19.098-20.702 30.828-28.847C110.046 96.209 120 78.815 120 59.155 120 26.858 93.138.678 60 .678S0 26.858 0 59.155c0 19.66 9.954 37.054 25.22 47.655 11.734 8.149 24.274 16.345 30.83 28.847 1.706 3.255 6.194 3.255 7.9 0z\"\n          fill=\"#560000\"/>\n    <path d=\"M60 .678c33.138 0 60 26.18 60 58.477 0 19.66-9.954 37.054-25.222 47.655l-2.016 1.396h.004c-11.13 7.7-22.632 15.663-28.816 27.451-1.706 3.255-6.194 3.255-7.9 0-6.182-11.788-17.686-19.751-28.816-27.451l-2.016-1.396C9.954 96.209 0 78.815 0 59.155 0 26.858 26.862.678 60 .678zm0 5.847C30.176 6.526 6 30.09 6 59.155c0 17.69 8.95 33.344 22.7 42.893l2.27 1.571C41.142 110.64 52.892 118.758 60 130.53c7.104-11.772 18.858-19.886 29.03-26.911l2.268-1.571C105.052 92.499 114 76.845 114 59.155 114 30.09 89.824 6.526 60 6.526z\"\n          clip-path=\"url(#A)\" filter=\"url(#B)\" fill=\"rgba(0,0,0,0.75)\"/>\n    <path d=\"M91.298 102.048C105.052 92.499 114 76.845 114 59.155 114 30.09 89.824 6.526 60 6.526S6 30.09 6 59.155c0 17.69 8.95 33.344 22.7 42.893l2.27 1.571C41.142 110.64 52.892 118.758 60 130.53c7.104-11.772 18.858-19.886 29.03-26.911l2.268-1.571zm1.468 6.158c-11.13 7.7-22.632 15.663-28.816 27.451-1.706 3.255-6.194 3.255-7.9 0-6.182-11.788-17.686-19.751-28.816-27.451l-2.016-1.396C9.954 96.209 0 78.815 0 59.155 0 26.858 26.862.678 60 .678s60 26.18 60 58.477c0 19.66-9.954 37.054-25.222 47.655l-2.016 1.396z\"\n          fill=\"#560000\"/>\n    <path d=\"M56.377 29.112c.015-5.232 6.879-5.232 6.879.15v21.971L90.01 69.72v8.12L63.379 67.767v16.414l6.161 5.547v6.409l-9.503-3.389-9.499 3.389v-6.409l6.099-5.547V67.767L29.99 77.84v-8.12l26.387-18.487z\"\n          fill=\"#ffc400\"/>\n</svg>\n";
const airportFrSVG = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"120\" height=\"139.999\">\n    <defs>\n        <clipPath id=\"A\">\n            <path d=\"M-6-8h132v155.26H-6zM60 5.926c29.824 0 54 23.88 54 53.334 0 17.926-8.948 33.79-22.702 43.467l-2.268 1.592c-10.172 7.12-21.926 15.342-29.03 27.272-7.108-11.93-18.858-20.156-29.03-27.272l-2.27-1.592C14.95 93.05 6 77.186 6 59.26 6 29.806 30.176 5.926 60 5.925zM60 0C26.862 0 0 26.53 0 59.26c0 19.923 9.954 37.55 25.218 48.293l2.016 1.415c11.13 7.803 22.634 15.872 28.816 27.818 1.706 3.299 6.194 3.299 7.9 0 6.184-11.946 17.686-20.015 28.816-27.818h-.004l2.016-1.415C110.046 96.81 120 79.183 120 59.26 120 26.53 93.138 0 60 0z\"/>\n        </clipPath>\n        <filter id=\"B\">\n            <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"2.5\"/>\n            <feOffset dy=\"2\" result=\"A\"/>\n            <feFlood flood-color=\"#fff\"/>\n            <feComposite in2=\"A\" operator=\"in\"/>\n        </filter>\n        <path id=\"C\"\n              d=\"M56.877 29.612c.015-5.232 6.879-5.232 6.879.15v21.971L90.51 70.22v8.12L63.879 68.267v16.414l6.161 5.547v6.409l-9.503-3.389-9.499 3.389v-6.409l6.099-5.547V68.267L30.49 78.34v-8.12l26.387-18.487z\"/>\n    </defs>\n    <path d=\"M63.95 136.79c6.556-12.67 19.098-20.979 30.828-29.233C110.046 96.81 120 79.183 120 59.26 120 26.53 93.138 0 60 0S0 26.53 0 59.26c0 19.923 9.954 37.55 25.22 48.293 11.734 8.258 24.274 16.564 30.83 29.233 1.706 3.299 6.194 3.299 7.9 0z\"\n          fill=\"#003056\"/>\n    <path d=\"M60 0c33.138 0 60 26.53 60 59.26 0 19.923-9.954 37.55-25.222 48.293l-2.016 1.415h.004c-11.13 7.803-22.632 15.872-28.816 27.818-1.706 3.299-6.194 3.299-7.9 0-6.182-11.946-17.686-20.015-28.816-27.818l-2.016-1.415C9.954 96.81 0 79.183 0 59.26 0 26.53 26.862 0 60 0zm0 5.925C30.176 5.926 6 29.806 6 59.26c0 17.926 8.95 33.79 22.7 43.467l2.27 1.592c10.172 7.116 21.922 15.342 29.03 27.272 7.104-11.93 18.858-20.152 29.03-27.272l2.268-1.592C105.052 93.05 114 77.186 114 59.26c0-29.454-24.176-53.334-54-53.334z\"\n          clip-path=\"url(#A)\" filter=\"url(#B)\" fill=\"rgba(0,0,0,0.75)\"/>\n    <path d=\"M91.298 102.727C105.052 93.05 114 77.186 114 59.26c0-29.454-24.176-53.334-54-53.334S6 29.806 6 59.26c0 17.926 8.95 33.79 22.7 43.467l2.27 1.592c10.172 7.116 21.922 15.342 29.03 27.272 7.104-11.93 18.858-20.152 29.03-27.272l2.268-1.592zm1.468 6.241c-11.13 7.803-22.632 15.872-28.816 27.818-1.706 3.299-6.194 3.299-7.9 0-6.182-11.946-17.686-20.015-28.816-27.818l-2.016-1.415C9.954 96.81 0 79.183 0 59.26 0 26.53 26.862 0 60 0s60 26.53 60 59.26c0 19.923-9.954 37.55-25.222 48.293l-2.016 1.415z\"\n          fill=\"#003056\"/>\n    <use href=\"#C\" fill=\"#fff\"/>\n    <use href=\"#C\" fill-opacity=\"0\" stroke=\"#ad0000\" stroke-width=\"3\"/>\n</svg>\n";
const airportItSVG = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"120\" height=\"139.999\">\n    <defs>\n        <clipPath id=\"A\">\n            <path d=\"M-6-8h132v154.214H-6zM60 5.881c29.824 0 54 23.701 54 52.933 0 17.792-8.948 33.537-22.702 43.141l-2.268 1.581c-10.172 7.065-21.926 15.226-29.03 27.066-7.108-11.84-18.858-20.005-29.03-27.067l-2.27-1.58C14.95 92.351 6 76.606 6 58.814 6 29.582 30.176 5.881 60 5.881zM60 0C26.862 0 0 26.331 0 58.814c0 19.774 9.954 37.269 25.218 47.931l2.016 1.404c11.13 7.745 22.634 15.753 28.816 27.609a4.4 4.4 0 0 0 7.9 0c6.184-11.856 17.686-19.864 28.816-27.609h-.004l2.016-1.404C110.046 96.083 120 78.588 120 58.814 120 26.331 93.138 0 60 0z\"/>\n        </clipPath>\n        <filter id=\"B\">\n            <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"2.5\"/>\n            <feOffset dy=\"2\" result=\"A\"/>\n            <feFlood flood-color=\"#fff\"/>\n            <feComposite in2=\"A\" operator=\"in\"/>\n        </filter>\n        <path id=\"C\"\n              d=\"M56.877 29.612c.015-5.232 6.879-5.232 6.879.15v21.971L90.51 70.22v8.12L63.879 68.267v16.414l6.161 5.547v6.409l-9.503-3.389-9.499 3.389v-6.409l6.099-5.547V68.267L30.49 78.34v-8.12l26.387-18.487z\"/>\n    </defs>\n    <path d=\"M63.95 135.762c6.556-12.574 19.098-20.821 30.828-29.013C110.046 96.083 120 78.588 120 58.814 120 26.331 93.138 0 60 0S0 26.331 0 58.814c0 19.774 9.954 37.269 25.22 47.931 11.734 8.196 24.274 16.44 30.83 29.013a4.4 4.4 0 0 0 7.9 0z\"\n          fill=\"#135600\"/>\n    <path d=\"M60 0c33.138 0 60 26.331 60 58.814 0 19.774-9.954 37.269-25.222 47.931l-2.016 1.404h.004c-11.13 7.745-22.632 15.753-28.816 27.609a4.4 4.4 0 0 1-7.9 0c-6.182-11.856-17.686-19.864-28.816-27.609l-2.016-1.404C9.954 96.083 0 78.588 0 58.814 0 26.331 26.862 0 60 0zm0 5.881c-29.824 0-54 23.701-54 52.933 0 17.792 8.95 33.537 22.7 43.141l2.27 1.58c10.172 7.062 21.922 15.227 29.03 27.067 7.104-11.84 18.858-20.001 29.03-27.066l2.268-1.581C105.052 92.351 114 76.606 114 58.814c0-29.232-24.176-52.933-54-52.933z\"\n          clip-path=\"url(#A)\" filter=\"url(#B)\" fill=\"rgba(0,0,0,0.75)\"/>\n    <path d=\"M91.298 101.955C105.052 92.351 114 76.606 114 58.814c0-29.232-24.176-52.933-54-52.933S6 29.582 6 58.814c0 17.792 8.95 33.537 22.7 43.141l2.27 1.581c10.172 7.061 21.922 15.226 29.03 27.066 7.104-11.84 18.858-20.001 29.03-27.066l2.268-1.581zm1.468 6.194c-11.13 7.745-22.632 15.753-28.816 27.609a4.4 4.4 0 0 1-7.9 0c-6.182-11.856-17.686-19.864-28.816-27.609l-2.016-1.404C9.954 96.083 0 78.588 0 58.814 0 26.331 26.862 0 60 0s60 26.331 60 58.814c0 19.774-9.954 37.269-25.222 47.931l-2.016 1.404z\"\n          fill=\"#135600\"/>\n    <use href=\"#C\" fill=\"#950101\"/>\n    <use href=\"#C\" fill-opacity=\"0\" stroke=\"#fff\" stroke-width=\"3\"/>\n</svg>\n";
import './style.css';
import { API_KEY } from './config';

// (Set your own API key when working in your own environment)
TomTomConfig.instance.put({ apiKey: API_KEY, language: 'en-US' });

(async () => {
    const [spainAirports, italyAirports, franceAirports] = await Promise.all([
        search({ countries: ['ES'], poiCategories: ['PUBLIC_AIRPORT'], limit: 100 }), // searching for locations by postcode
        search({ countries: ['IT'], poiCategories: ['PUBLIC_AIRPORT'], limit: 100 }),
        search({ countries: ['FR'], poiCategories: ['PUBLIC_AIRPORT'], limit: 100 }),
    ]);

    const map = new TomTomMap({
        mapLibre: {
            container: 'sdk-map',
            bounds: bboxFromGeoJSON([spainAirports, italyAirports, franceAirports]),
            fitBoundsOptions: { padding: 50 },
        },
    });

    const spainAirportsModule = await PlacesModule.get(map, {
        icon: { categoryIcons: [{ id: 'PUBLIC_AIRPORT', image: airportEsSVG }] },
    });
    await spainAirportsModule.show(spainAirports);

    const italyAirportsModule = await PlacesModule.get(map, {
        icon: { categoryIcons: [{ id: 'PUBLIC_AIRPORT', image: airportItSVG }] },
    });
    await italyAirportsModule.show(italyAirports);

    const franceAirportsModule = await PlacesModule.get(map, {
        icon: { categoryIcons: [{ id: 'PUBLIC_AIRPORT', image: airportFrSVG }] },
    });
    await franceAirportsModule.show(franceAirports);
})();