<template>
	<div ref="mapContainer" style="width: 100%; height: 100%">
		<MapMenu :map="map"></MapMenu>
	</div>
</template>
<script lang="ts" setup>
	import { onMounted, ref } from 'vue';
	import useTileLayer from '../../hook/useTileLayer';
	import useCrs from '../../hook/useCrs';
	import L from 'leaflet';
	import 'leaflet/dist/leaflet.css';
	import MapMenu from '../../components/MapMenu.vue';

	const mapContainer = ref<HTMLElement>();
	const { baidu } = useTileLayer();
	const map = ref<L.Map>();

	onMounted(() => {
		if (!mapContainer.value) return;
		map.value = L.map(mapContainer.value, {
			crs: useCrs('baidu'),
			center: [39.926474, 116.403283],
			zoom: 10,
			maxZoom: 15,
			minZoom: 3,
		});

		baidu.addTo(map.value);
	});
</script>
