Map Basemap docs

Vue.js library for managing and switching between different base map types

🚀 Introduction

Map Basemap is a Vue.js library that provides components for managing and switching between different base map types. The library supports various base map types including satellite, street, terrain, and custom maps.

📦 Installation

npm install @hungpvq/vue-map-basemap

🎯 Features

• ✅ Multiple basemaps - Support for various base map types
• ✅ Basemap controls - Easy switching between base maps
• ✅ Custom basemaps - Add your own custom base maps
• ✅ Basemap cards - Visual base map selection cards
• ✅ Basemap tags - Categorize base maps with tags
• ✅ Compare mode - Side-by-side base map comparison
• ✅ Responsive design - Mobile-friendly interface
• ✅ TypeScript support - Full TypeScript support
• ✅ Vue 3 Composition API - Modern Vue 3 Composition API

🚀 Usage

Basic Basemap Control

<template>
  <Map @map-loaded="onMapLoaded">
    <BaseMapControl position="bottom-left" />
  </Map>
</template>

<script setup lang="ts">
import { Map } from '@hungpvq/vue-map-core';
import { BaseMapControl } from '@hungpvq/vue-map-basemap';
import '@hungpvq/vue-map-core/style.css';
import '@hungpvq/vue-map-basemap/style.css';

function onMapLoaded(map: any) {
  console.log('Map loaded:', map);
}
</script>

Basemap with Tags

<template>
  <Map @map-loaded="onMapLoaded">
    <BaseMapTagControl position="bottom-left" />
    <BaseMapControl position="bottom-left" />
  </Map>
</template>

<script setup lang="ts">
import { Map } from '@hungpvq/vue-map-core';
import { BaseMapControl, BaseMapTagControl } from '@hungpvq/vue-map-basemap';

function onMapLoaded(map: any) {
  console.log('Map loaded:', map);
}
</script>

Basemap with Custom Sources

<template>
  <Map @map-loaded="onMapLoaded">
    <BaseMapControl position="bottom-left" :customBasemaps="customBasemaps" />
  </Map>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Map } from '@hungpvq/vue-map-core';
import { BaseMapControl } from '@hungpvq/vue-map-basemap';

const customBasemaps = ref([
  {
    link: '',
    thumbnail: '/static/img/icon-stack.png',
    type: 'no-basemap',
    title: 'None',
    id: 'null',
  },
  {
    id: 1,
    title: 'Streets',
    type: 'vector',
    thumbnail: 'data:image/jpeg;base64,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',
    links: ['https://tiles.eofactory.ai/styles/basic/style.json'],
  },
  {
    id: 2,
    title: 'ArcGIS Satellite',
    type: 'raster',
    thumbnail: 'data:image/jpeg;base64,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',
    links: ['https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'],
    maxzoom: 19,
    minzoom: 0,
  },
]);

function onMapLoaded(map: any) {
  console.log('Map loaded:', map);
}
</script>

Using Basemap Hooks

<script setup lang="ts">
import { useBaseMap } from '@hungpvq/vue-map-basemap';
import { useMap } from '@hungpvq/vue-map-core';

const props = defineProps({
  mapId: { type: String, required: true },
});
const { mapId } = useMap(props);
const { currentBaseMap, setCurrent, baseMaps } = useBaseMap(mapId.value);

// Get current basemap
function getCurrent() {
  const current = currentBaseMap.value;
  console.log('Current basemap:', current);
}

// Set new basemap
function changeBasemap(basemap: BaseMapItem) {
  setCurrent(basemap);
}

// Get all available basemaps
function getBasemaps() {
  const basemaps = baseMaps.value;
  console.log('Available basemaps:', basemaps);
}
</script>

With Map Core

<template>
  <Map :mapId="mapId" @map-loaded="onMapLoaded">
    <!-- Core controls -->
    <ZoomControl position="top-right" />
    <HomeControl position="top-right" />

    <!-- Basemap controls -->
    <BaseMapControl position="bottom-left" />
    <BaseMapTagControl position="bottom-left" />
  </Map>
</template>

<script setup lang="ts">
import { Map, ZoomControl, HomeControl } from '@hungpvq/vue-map-core';
import { BaseMapControl, BaseMapTagControl } from '@hungpvq/vue-map-basemap';
</script>

With Dataset Management

<template>
  <Map :mapId="mapId" @map-loaded="onMapLoaded">
    <LayerControl position="top-left" show>
      <template #endList="{ mapId }">
        <BaseMapCard :mapId="mapId" />
      </template>
    </LayerControl>
    <BaseMapControl position="bottom-left" />
  </Map>
</template>

<script setup lang="ts">
import { Map } from '@hungpvq/vue-map-core';
import { BaseMapControl, BaseMapCard } from '@hungpvq/vue-map-basemap';
import { LayerControl } from '@hungpvq/vue-map-dataset';
</script>

🤝 Contributing

All contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

📄 License

MIT License

🔗 Links

• GitHub Repository
• Documentation
• Issues