title: Map displayed_sidebar: devDocsSidebar

Map

Бібліотека готовиї компонент мап для аналізу та відображення геометричних даних.

Підключення

Import

import Vue from "vue";
import { install } from "softpro-vue-map";

install(Vue);

// or

import Vue from "vue";
import { VsSimpleMap, VsDatasetMap, VsEditorMap } from "softpro-vue-map";

Vue.component("VsSimpleMap", VsSimpleMap);
Vue.component("VsDatasetMap", VsDatasetMap);
Vue.component("VsDatasetMap", VsDatasetMap);

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.softpro.ua/vue/map/dev/map.softpro.bundle.js"></script>
<script>
  // Will invoke vsMap from global object
  vsMap.install(Vue);

  new Vue({
    el: "#app",
    template: `<div> <VsSimpleMap /> </div>`,
  });
</script>

Структура проекту

#src
├── App.vue
├── assets
|  ├── filters_example.jpg
|  ├── fonts
|  |  ├── tabler-icons.eot
|  |  ├── tabler-icons.ttf
|  |  ├── tabler-icons.woff
|  |  └── tabler-icons.woff2
|  ├── logo.png
|  ├── tabler-icons.css
|  └── tailwind
|     ├── preline.js
|     └── tailwind.js
├── components
|  └── simple-map
|     ├── components
|     ├── map
|     ├── vs-simple-map-dataset.vue
|     ├── vs-simple-map-layers.vue
|     └── vs-simple-map.vue
├── main.js
├── misc
|  └── map-bundle.js
├── output.txt
└── vendor
   └── head.js