import L from "leaflet";
import { ref, Ref, onMounted } from "vue";


function useTileLayer(map: Ref<L.Map>, url: string, options: L.TileLayerOptions) {
    const tileLayer = ref<L.TileLayer>()
    onMounted(() => {
        tileLayer.value = L.tileLayer(url, options)
    })

    function open() {
        if (!tileLayer.value) return;
        if (!map.value) return;
        tileLayer.value.addTo(map.value)
    }

    function close() {
        if (!tileLayer.value) return;
        if (!map.value) return;
        tileLayer.value.removeFrom(map.value)
    }

    return [tileLayer, open, close]
}

export default useTileLayer