1. Advisor
  2. vue2-leaflet
  3. vue2-leaflet code examples
View all vue2-leaflet analysis

How to use vue2-leaflet - 10 common examples

To help you get started, we’ve selected a few vue2-leaflet examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github yunity / karrot-frontend / src / maps / components / StandardMap.spec.js View on Github external
it('renders markers with popups', async () => {
    const wrapper = mountWithDefaults(StandardMap, {
      propsData: {
        markers,
      },
    })
    await nextTicks(1)
    expect(wrapper.findAll(Vue2Leaflet.LMap).length).toBe(1)
    expect(wrapper.findAll(ExtendedMarker).length).toBe(markers.length)
    expect(wrapper.findAll(Vue2Leaflet.LPopup).length).toBe(markers.length)

    // add and remove some markers
    for (let i = 0; i < 3; i++) {
      wrapper.setProps({ markers: markers.filter((e, idx) => idx !== i) })
      await nextTicks(1)
      expect(wrapper.findAll(ExtendedMarker).length).toBe(markers.length - 1)
      expect(wrapper.findAll(Vue2Leaflet.LPopup).length).toBe(markers.length - 1)
    }
  })
})
github yunity / karrot-frontend / src / maps / components / StandardMap.spec.js View on Github external
it('renders markers with popups', async () => {
    const wrapper = mountWithDefaults(StandardMap, {
      propsData: {
        markers,
      },
    })
    await nextTicks(1)
    expect(wrapper.findAll(Vue2Leaflet.LMap).length).toBe(1)
    expect(wrapper.findAll(ExtendedMarker).length).toBe(markers.length)
    expect(wrapper.findAll(Vue2Leaflet.LPopup).length).toBe(markers.length)

    // add and remove some markers
    for (let i = 0; i < 3; i++) {
      wrapper.setProps({ markers: markers.filter((e, idx) => idx !== i) })
      await nextTicks(1)
      expect(wrapper.findAll(ExtendedMarker).length).toBe(markers.length - 1)
      expect(wrapper.findAll(Vue2Leaflet.LPopup).length).toBe(markers.length - 1)
    }
  })
})
github yunity / karrot-frontend / src / maps / components / GroupMap.spec.js View on Github external
import GroupMap from './GroupMap'
import { usersMock, placesMock } from '>/mockdata'

import * as Vue2Leaflet from 'vue2-leaflet'
import ExtendedMarker from './ExtendedMarker'
import { mountWithDefaults } from '>/helpers'
import Vue from 'vue'

/* vue2-leaflet library does not name its components, which vue-test-utils needs to find them
   so we give them names here... */
Vue2Leaflet.LMap.name = 'Vue2LeafletMap'
Vue2Leaflet.LTileLayer.name = 'Vue2LeafletTileLayer'
Vue2Leaflet.LPopup.name = 'Vue2LeafletPopup'
Vue2Leaflet.LMarker.name = 'Vue2LeafletMarker'

const defaultProps = {
  users: usersMock,
  places: placesMock,
  showUsers: true,
  showPlaces: true,
  currentGroup: {
    membership: {
      isEditor: true,
    },
  },
}

describe('GroupMap', () => {
  beforeEach(() => jest.resetModules())
  it('renders users and places', async () => {
github yunity / karrot-frontend / src / maps / components / GroupMap.spec.js View on Github external
import GroupMap from './GroupMap'
import { usersMock, placesMock } from '>/mockdata'

import * as Vue2Leaflet from 'vue2-leaflet'
import ExtendedMarker from './ExtendedMarker'
import { mountWithDefaults } from '>/helpers'
import Vue from 'vue'

/* vue2-leaflet library does not name its components, which vue-test-utils needs to find them
   so we give them names here... */
Vue2Leaflet.LMap.name = 'Vue2LeafletMap'
Vue2Leaflet.LTileLayer.name = 'Vue2LeafletTileLayer'
Vue2Leaflet.LPopup.name = 'Vue2LeafletPopup'
Vue2Leaflet.LMarker.name = 'Vue2LeafletMarker'

const defaultProps = {
  users: usersMock,
  places: placesMock,
  showUsers: true,
  showPlaces: true,
  currentGroup: {
    membership: {
      isEditor: true,
    },
  },
}

describe('GroupMap', () => {
  beforeEach(() => jest.resetModules())
github yunity / karrot-frontend / src / maps / components / StandardMap.spec.js View on Github external
const wrapper = mountWithDefaults(StandardMap, {
      propsData: {
        markers,
      },
    })
    await nextTicks(1)
    expect(wrapper.findAll(Vue2Leaflet.LMap).length).toBe(1)
    expect(wrapper.findAll(ExtendedMarker).length).toBe(markers.length)
    expect(wrapper.findAll(Vue2Leaflet.LPopup).length).toBe(markers.length)

    // add and remove some markers
    for (let i = 0; i < 3; i++) {
      wrapper.setProps({ markers: markers.filter((e, idx) => idx !== i) })
      await nextTicks(1)
      expect(wrapper.findAll(ExtendedMarker).length).toBe(markers.length - 1)
      expect(wrapper.findAll(Vue2Leaflet.LPopup).length).toBe(markers.length - 1)
    }
  })
})
github yunity / karrot-frontend / src / maps / components / GroupMap.spec.js View on Github external
import GroupMap from './GroupMap'
import { usersMock, placesMock } from '>/mockdata'

import * as Vue2Leaflet from 'vue2-leaflet'
import ExtendedMarker from './ExtendedMarker'
import { mountWithDefaults } from '>/helpers'
import Vue from 'vue'

/* vue2-leaflet library does not name its components, which vue-test-utils needs to find them
   so we give them names here... */
Vue2Leaflet.LMap.name = 'Vue2LeafletMap'
Vue2Leaflet.LTileLayer.name = 'Vue2LeafletTileLayer'
Vue2Leaflet.LPopup.name = 'Vue2LeafletPopup'
Vue2Leaflet.LMarker.name = 'Vue2LeafletMarker'

const defaultProps = {
  users: usersMock,
  places: placesMock,
  showUsers: true,
  showPlaces: true,
  currentGroup: {
    membership: {
      isEditor: true,
    },
  },
}
github yunity / karrot-frontend / src / components / Map / GroupMapUI.vue View on Github external
import Vue2Leaflet from 'vue2-leaflet'
import L from 'leaflet'
import 'leaflet.awesome-markers/dist/leaflet.awesome-markers.js'

// fix default marker icon. Should hopefully get fixed in Leaflet 1.3
// https://github.com/Leaflet/Leaflet/issues/4968
delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
})

export default {
  components: {
    'v-map': Vue2Leaflet.Map,
    'v-tilelayer': Vue2Leaflet.TileLayer,
    'v-marker': Vue2Leaflet.Marker,
    'v-popup': Vue2Leaflet.Popup,
  },
  data () {
    return {
      zoom: 13,
      center: L.latLng(49.9105778076202, 8.65834236145019),
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    }
  },
  props: {
    users: { required: false, default: () =&gt; [] },
    stores: { required: false, default: () =&gt; [] },
    showUsers: { required: false, default: true },
github sitewhere / sitewhere / sitewhere-ui / src / router / index.js View on Github external
Vue.use(Vuetify, {
  theme: {
    primary: '#1565c0',
    secondary: '#b0bec5',
    accent: '#8c9eff',
    error: '#b71c1c'
  }
})
Vue.use(VueMoment)
Vue.use(VueClipboards)
Vue.use(VueHighlightJS)
Vue.use(VueFlatPickr)
Vue.use(Tree)
// Vue.use(VeeValidate)

Vue.component('v-map', Vue2Leaflet.Map)
Vue.component('v-tilelayer', Vue2Leaflet.TileLayer)
Vue.component('v-marker', Vue2Leaflet.Marker)

// BEGIN HACK to get around problems with Leaflet issues.
import L from 'leaflet'

delete L.Icon.Default.prototype._getIconUrl

L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
})

customize(L.Draw.Polyline.prototype)
customize(L.Edit.PolyVerticesEdit.prototype)
github sitewhere / sitewhere / sitewhere-ui / src / router / index.js View on Github external
primary: '#1565c0',
    secondary: '#b0bec5',
    accent: '#8c9eff',
    error: '#b71c1c'
  }
})
Vue.use(VueMoment)
Vue.use(VueClipboards)
Vue.use(VueHighlightJS)
Vue.use(VueFlatPickr)
Vue.use(Tree)
// Vue.use(VeeValidate)

Vue.component('v-map', Vue2Leaflet.Map)
Vue.component('v-tilelayer', Vue2Leaflet.TileLayer)
Vue.component('v-marker', Vue2Leaflet.Marker)

// BEGIN HACK to get around problems with Leaflet issues.
import L from 'leaflet'

delete L.Icon.Default.prototype._getIconUrl

L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
})

customize(L.Draw.Polyline.prototype)
customize(L.Edit.PolyVerticesEdit.prototype)

function customize (prototype) {
github yunity / karrot-frontend / src / components / Map / GroupMapUI.vue View on Github external
import 'leaflet.awesome-markers/dist/leaflet.awesome-markers.js'

// fix default marker icon. Should hopefully get fixed in Leaflet 1.3
// https://github.com/Leaflet/Leaflet/issues/4968
delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
})

export default {
  components: {
    'v-map': Vue2Leaflet.Map,
    'v-tilelayer': Vue2Leaflet.TileLayer,
    'v-marker': Vue2Leaflet.Marker,
    'v-popup': Vue2Leaflet.Popup,
  },
  data () {
    return {
      zoom: 13,
      center: L.latLng(49.9105778076202, 8.65834236145019),
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    }
  },
  props: {
    users: { required: false, default: () =&gt; [] },
    stores: { required: false, default: () =&gt; [] },
    showUsers: { required: false, default: true },
    showStores: { required: false, default: true },
  },

vue2-leaflet

Vue2 leaflet library

GitHub
MIT
Latest version published 3 years ago

Package Health Score

62 / 100
Full package analysis

Popular vue2-leaflet functions

Similar packages