Native Components
    Wrapper Components
      Introduction
    • Barcodes
    • Buttons
    • Charts
    • Chat
    • DataSource
    • Date Inputs
    • Diagram
    • Dialog
    • Dropdowns
    • DropDownTree
    • Editor
    • Gantt
    • Gauges
    • Grid (wrapper)
    • Inputs
    • Layout
    • List Views
    • ListBox
    • Map
    • MediaPlayer
    • PivotGrid
    • Popups
    • Scheduler
    • ScrollView
    • Spreadsheet
    • TreeList
    • TreeMap
    • TreeView
    • Upload
    • Validator
    • Window
    • Framework & Features
    • Globalization
    • Accessibility
    • Troubleshooting
    Styling & Themes
    Common Features
    Changelog

Map Overview

The Map displays geospatial information which is organized in layers and is supported by both desktop and mobile devices.

The Map wrapper for Vue is a client-side wrapper for the Kendo UI Map widget.

Basic Usage

The following example demonstrates how to initialize the Mapaaa.

Example
View Source
Change Theme:

Installation

To initialize the Map, either:

Initializing with Webpack

  1. Install Kendo UI and add a theme:

    npm install --save @progress/kendo-ui
    npm install --save @progress/kendo-theme-default
  2. Install the Kendo UI for Vue Map package.

    npm install --save @progress/kendo-map-vue-wrapper
  3. Import the Kendo UI packages to the App component. If you use the Kendo UI components more than once in your application, add all Kendo UI-related files to the main.js file. If you use the Kendo UI components once in your application, add the Kendo UI-related files the component where they will be referred.

    import '@progress/kendo-ui' // This will import the entire Kendo UI library
    // As an alternative, you could import only the scripts that are used by a specific widget:
    // import '@progress/kendo-ui/js/kendo.dataviz.map' // Imports only the Map script and its dependencies
    
    import '@progress/kendo-theme-default/dist/all.css'
    
    import { Map,
             MapMarker,
             MapLayer,
             MapInstaller } from '@progress/kendo-map-vue-wrapper'
    
    Vue.use(MapInstaller)
    
    new Vue({
        el: '#app',
        components: {
            Map,
            MapMarker,
            MapLayer,
            MapInstaller
        }
    })

Functionality and Features

In this article

Not finding the help you need?