---
// Port of preview/pages/maps-vector.html (layout: default).
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import MapVector from '@shared/components/ui/MapVector.astro';
---

<DefaultLayout
	title="Vector Maps"
	pageHeader="Vector Maps"
	pageMenu="plugins.maps-vector"
	pageLibs={['jsvectormap']}
>
	<div class="row row-cards">
		<div class="col-md-6">
			<div class="card">
				<div class="card-body">
					<h3 class="card-title">World map</h3>
					<MapVector mapId="world-merc" />
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="card">
				<div class="card-body">
					<h3 class="card-title">Map with markers</h3>
					<MapVector mapId="world-markers" />
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="card">
				<div class="card-body">
					<h3 class="card-title">Map with markers and lines</h3>
					<MapVector mapId="world-lines" />
				</div>
			</div>
		</div>
	</div>
</DefaultLayout>