wmap-ui

Here is Vue components for map, which is inspired by leaflet;

A map components for vue

This branch adapts with vue 2.5.11, vuex 3.0.1 and leaflet 1.0.3.

Completion of components

• map
• flow
• wind
• popup
• marker
• control
• tooltip
• tileLayer
• colorBlind
• contourLine
• gridPoint

Installation

npm install wmap-ui -S

API document

More ways to use, please move here.

Changelog

Added map layer control. So, you can customize multiple tile layer map services

Startup

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

<template lang="html">
<div class="full">
  <l-map :zoom="map.zoom" :center="map.center" :min-zoom="map.minZoom" :max-zoom="map.maxZoom"
    :themeControl="map.themeControl" :attribution="map.attribution"  @zoomend="zoomend" :zoomControl="map.zoomControl">
      <l-marker :position="markerPosition" :title="markerTitle"></l-marker>
  </l-map>
  <l-control></l-control>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map:{
        zoom: 11,
        isShow:true,
        center: [39.905, 116.391],
        attribution: '<a href="http://ui.fw121.com">wmap-ui</a>',
        title: 'wmap-ui',
        opacity: 1,
        draggable: true,
        zoomControl:true,
        themeControl:true,
      },
      markerPosition:[39.905, 116.391],
      markerTitle:'北京',
    };
  },
  methods: {
    zoomend(e) {
    }
  },
};
</script>

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 './WMap';

Vue.use(Vuex);

// Add your customized store
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