v3-map

v0.0.5

Published

3 months ago

## Можливості (Features)

Downloads

0High
0Medium
0Low

nikachu404

V3-MAP

Можливості (Features)

Інтерактивна карта: Відображення картографічних шарів з можливістю взаємодії.
Клік на карті: Обробка кліків на карті для отримання інформації про об'єкти.
Відображення карток: Показ карток з інформацією про об'єкти на карті.
Навігаційні інструменти: Інструменти для зумування, масштабування та інші навігаційні функції.
Міні-карта: Відображення міні-карти для зручної навігації.

Документація (Documentation)

Встановлення

Клонуйте репозиторій:

git clone https://github.com/your-repo.git

Перейдіть до каталогу проєкту:
```
cd your-repo
```
Встановіть залежності:
```
npm install
```

Запуск проєкту

Для запуску локального сервера використовуйте команду:

npm run dev

Приклад карти

Приклад карти доступний за цим посиланням.

CDN Usage

Створіть папку assets в зручному місці та додайте папки та файли tailwind, preline і tabler. Взяти потрібні папки можна тут.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/assets/style/tailwind.css" />
    <link rel="stylesheet" href="/assets/font/tabler/tabler-icons.min.css" />
    <link rel="stylesheet" href="https://cdn.softpro.ua/vue/v3-core/dev/style.css" />
    ...
  </head>
  <body>
    <div id="app" style="margin-top: 100px">
      <vs-map height="80vh"></vs-map>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="/assets/js/tailwind.js"></script>
    <script src="/assets/js/preline.js"></script>
    <script src="https://cdn.softpro.ua/vue/map-portal/dev/v3-map-portal.umd.cjs"></script>
    <script src="https://cdn.softpro.ua/vue/map-portal/dev/style.css"></script>
    <script src="https://cdn.softpro.ua/vue/v3-core/dev/vue3-softpro-ui.umd.cjs"></script>
    ....
  </body>
</html>

Підключення в інші проєкти за допомогою NPM

Для підключення карти в сторонній проєкт:

Пропишіть в терміналі команду:
```
npm i v3-map
```
Створіть папку assets в зручному місці та додайте папки та файли tailwind, preline і tabler. Взяти потрібні папки можна тут..

У файлі main.js імпортуйте та заінстальте нашу карту. Файл main.js має виглядати наступним чином:

import "./assets/main.css";
import { createApp } from "vue";
import App from "./App.vue";
import v3map from "v3-map";
import './assets/tailwind/tailwind.js'; // імпортуємо tailwind
import './assets/tailwind/preline.js'; // імпортуємо preline
import './assets/tabler/tabler-icons.min.css'; // імпортуємо tabler

const app = createApp(App);
v3map.install(app);

if (window.v3map) {
  window.v3map.install(app);
}

app.mount('#app');

Виконавши всі ці дії, тепер ми можемо у будь-яку компоненту вставити VsMap, наприклад:

<template>
  <div>
    <VsMap />
  </div>
</template>

<script>
import VsMap from 'v3-map';
export default {
  components: {
    VsMap,
  },
};
</script>

Цей приклад показує, як імпортувати і використовувати компоненту карти в іншому проєкті.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme