@hungpvq/vue-map-core 1.1.0

Appearance

Docs version
@hungpvq/vue-map@1.1.0@hungpvq/vue-map-core@1.1.0@hungpvq/vue-map-dataset@1.1.0@hungpvq/vue-map-draw@1.1.0@hungpvq/map-draw@1.1.0@hungpvq/react-map@1.1.0@hungpvq/react-map-core@1.1.0@hungpvq/react-map-dataset@1.1.0@hungpvq/react-map-draw@1.1.0

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 ​

Vue ​

bash
npm install @hungpvq/vue-map-core

React ​

bash
npm install @hungpvq/react-map-core

🎯 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
  • ✅ Responsive design - Mobile-friendly interface
  • ✅ TypeScript support - Full TypeScript support
  • ✅ Vue 3 Composition API - Modern Vue 3 Composition API
  • ✅ React - Components and hooks via @hungpvq/react-map-core

🚀 Usage ​

Basic Basemap Control ​

Vue ​

vue
<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-core';
import '@hungpvq/vue-map-core/style.css';

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

React ​

tsx
import { Map, BaseMapControl } from '@hungpvq/react-map-core';
import '@hungpvq/react-map-core/style.css';

function onMapLoaded(map: any) {
  console.info('Map loaded:', map);
}

<Map onMapLoaded={onMapLoaded}>
  <BaseMapControl position="bottom-left" />
</Map>

Basemap with Tags ​

Vue ​

vue
<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-core';

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

React ​

tsx
import { Map, BaseMapControl, BaseMapTagControl } from '@hungpvq/react-map-core';
import '@hungpvq/react-map-core/style.css';

function onMapLoaded(map: any) {
  console.info('Map loaded:', map);
}

<Map onMapLoaded={onMapLoaded}>
  <BaseMapTagControl position="bottom-left" />
  <BaseMapControl position="bottom-left" />
</Map>

Basemap with Custom Sources ​

Vue ​

vue
<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-core';

const customBasemaps = ref([
  {
    link: '',
    thumbnail: '/static/img/icon-stack.png',
    type: 'no-basemap',
    title: 'None',
    id: 'null',
  },
  {
    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.info('Map loaded:', map);
}
</script>

React ​

tsx
import { Map, BaseMapControl } from '@hungpvq/react-map-core';
import '@hungpvq/react-map-core/style.css';

const customBasemaps = [
  {
    link: '',
    thumbnail: '/static/img/icon-stack.png',
    type: 'no-basemap',
    title: 'None',
    id: 'null',
  },
  {
    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.info('Map loaded:', map);
}

<Map onMapLoaded={onMapLoaded}>
  <BaseMapControl position="bottom-left" baseMaps={customBasemaps} />
</Map>

Using Basemap Hooks ​

Vue ​

vue
<script setup lang="ts">
import { useBaseMap } from '@hungpvq/vue-map-core';
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.info('Current basemap:', current);
}

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

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

React ​

tsx
import type { BaseMapItem } from '@hungpvq/map-core/basemap';
import { useBaseMap, useMap } from '@hungpvq/react-map-core';

function BasemapTools({ mapId: mapIdProp }: { mapId: string }) {
  const { mapId } = useMap({ mapId: mapIdProp });
  const { currentBaseMap, setCurrent, baseMaps } = useBaseMap(mapId);

  function getCurrent() {
    console.info('Current basemap:', currentBaseMap);
  }

  function changeBasemap(basemap: BaseMapItem) {
    setCurrent(basemap);
  }

  function getBasemaps() {
    console.info('Available basemaps:', baseMaps);
  }

  return null;
}

With Map Core ​

Vue ​

vue
<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-core';
</script>

React ​

tsx
import {
  Map,
  ZoomControl,
  HomeControl,
  BaseMapControl,
  BaseMapTagControl,
} from '@hungpvq/react-map-core';
import '@hungpvq/react-map-core/style.css';

function App() {
  return (
    <Map mapId={mapId} onMapLoaded={onMapLoaded}>
      <ZoomControl position="top-right" />
      <HomeControl position="top-right" />
      <BaseMapControl position="bottom-left" />
      <BaseMapTagControl position="bottom-left" />
    </Map>
  );
}

With Dataset Management ​

Vue ​

vue
<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-core';
import { LayerControl } from '@hungpvq/vue-map-dataset';
</script>

React ​

tsx
import { Map, BaseMapControl, BaseMapCard } from '@hungpvq/react-map-core';
import { LayerControl } from '@hungpvq/react-map-dataset';
import '@hungpvq/react-map-core/style.css';

function App() {
  return (
    <Map mapId={mapId} onMapLoaded={onMapLoaded}>
      <LayerControl
        position="top-left"
        show
        endList={({ mapId }) => <BaseMapCard mapId={mapId} />}
      />
      <BaseMapControl position="bottom-left" />
    </Map>
  );
}