All Projects → brandonxiang → Vueleaflet

brandonxiang / Vueleaflet

Vue components for Leaflet maps

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vueleaflet

Iview
A high quality UI Toolkit built on Vue.js 2.0
Stars: ✭ 23,930 (+13419.77%)
Mutual labels:  components, vue-components
Cordovue
A sample Apache Cordova application using VueJS.
Stars: ✭ 66 (-62.71%)
Mutual labels:  webpack, vue-components
Awesome Ui Component Library
Curated list of framework component libraries for UI styles/toolkit
Stars: ✭ 702 (+296.61%)
Mutual labels:  components, vue-components
Vux
Mobile UI Components based on Vue & WeUI
Stars: ✭ 17,573 (+9828.25%)
Mutual labels:  components, vue-components
Vue Form Components
Clean & minimal vue form elements and form builder with validation
Stars: ✭ 120 (-32.2%)
Mutual labels:  components, vue-components
Vue Goodshare
🍿 Vue.js component for social share. A simple way to share a link on the pages of your website in the most popular (and not so) social networks. Powered by goodshare.js project.
Stars: ✭ 345 (+94.92%)
Mutual labels:  components, vue-components
Stylable
Stylable - CSS for components
Stars: ✭ 1,109 (+526.55%)
Mutual labels:  webpack, components
Nutui
京东风格的移动端 Vue2、Vue3 组件库 (A Vue.js UI Toolkit for Mobile Web)
Stars: ✭ 3,870 (+2086.44%)
Mutual labels:  components, vue-components
React Workshop
⚒ 🚧 This is a workshop for learning how to build React Applications
Stars: ✭ 114 (-35.59%)
Mutual labels:  webpack, components
Pd Select
vue components ,like ios 3D picker style,vue 3d 选择器组件,3D滚轮
Stars: ✭ 101 (-42.94%)
Mutual labels:  components, vue-components
Coreui Vue
Over 90 Bootstrap based Vue.js components and directives. CoreUI React.js UI Components. CoreUI for Vue.js replaces and extends the Bootstrap javascript. Components have been built from scratch as true Vue components, without jQuery and unneeded dependencies.
Stars: ✭ 318 (+79.66%)
Mutual labels:  components, vue-components
X0
Document & develop React components without breaking a sweat
Stars: ✭ 1,706 (+863.84%)
Mutual labels:  webpack, components
Vue Project
基于vue-cli构建的财务后台管理系统(vue2+vuex+axios+vue-router+element-ui+echarts+websocket+vue-i18n)
Stars: ✭ 301 (+70.06%)
Mutual labels:  webpack, vue-components
Vue Svg Loader
🔨 webpack loader that lets you use SVG files as Vue components
Stars: ✭ 514 (+190.4%)
Mutual labels:  webpack, vue-components
Vue Cnodejs
基于vue.js重写Cnodejs.org社区的webapp
Stars: ✭ 3,065 (+1631.64%)
Mutual labels:  webpack, vue-components
Semantic Ui Vue
Semantic UI integration for Vue
Stars: ✭ 914 (+416.38%)
Mutual labels:  components, vue-components
vuestic-ui
Free and Open Source UI Library for Vue 3 🤘
Stars: ✭ 1,501 (+748.02%)
Mutual labels:  components, vue-components
Tui
This is a high quanlity components library for VUE
Stars: ✭ 258 (+45.76%)
Mutual labels:  webpack, vue-components
Cdk
🎁 Vue Component Development Kit
Stars: ✭ 75 (-57.63%)
Mutual labels:  webpack, vue-components
Redux React Starter
DEPRECATED use the new https://github.com/didierfranc/react-webpack-4
Stars: ✭ 137 (-22.6%)
Mutual labels:  webpack, components

vue-leaflet

Here is Vue components for Leaflet maps, which is inspired by react-leaflet and vue-google-maps.

A vue component for leaflet.js

This branch adapts with vue 2.0, vuex 2.0 and leaflet 1.0.3.

Completion of components

  • [x] Map
  • [x] Marker
  • [x] Popup
  • [x] Tooltip
  • [x] TileLayer

Installation

npm install vueleaflet -save

Startup

You can input some Vue-styled components in a .vue file in order to use leaflet.js, like Layout.vue.

<l-map :zoom="zoom" :center="center" :min-zoom="minZoom" :max-zoom="maxZoom">
  <l-tilelayer :url="url" :attribution="attribution"></l-tilelayer>
  <l-marker :position="center" :title="title" :opacity="opacity" :draggable="draggable">
    <l-tooltip content="a tooltip"></l-tooltip>
  </l-marker>
  <l-marker :position="marker" :title="title" :opacity="opacity" :draggable="false">
    <l-popup content="a popup"></l-popup>
  </l-marker>
</l-map>

Before that, you should config the vuex, see main.js

import Vue from 'vue';
import Vuex from 'vuex';
import VueLeaflet from './index'
import App from './Layout';

Vue.use(Vuex);

const store = new Vuex.Store({});

Vue.use(VueLeaflet.plugin,store);

new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App },
});

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

Contribute

All the developments are on the develop branch, while the stable version is on the master branch.

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].