nuxt-leaflet-draw
v0.0.43
Published
Nuxt module for leafletjs
Downloads
3
Readme
nuxt-leaflet
Nuxt module for leafletjs
Features
Nuxt module for vue2-leaflet.
See vue2-leaflet for more details.
Setup
- Add
nuxt-leaflet
dependency using yarn or npm to your project - Add
nuxt-leaflet
tomodules
section ofnuxt.config.js
{
modules: [
// Simple usage
'nuxt-leaflet',
// With options
['nuxt-leaflet', { /* module options */ }],
]
}
Usage
Add the map to your page
<div id="map-wrap" style="height: 100vh">
<client-only>
<l-map :zoom=13 :center="[55.9464418,8.1277591]">
<l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
<l-marker :lat-lng="[55.9464418,8.1277591]"></l-marker>
</l-map>
</client-only>
</div>
The Leaflet 'L' object can be found on vue component: this.$L
Typescript
If you're using TypeScript, you'll need to add nuxt-leaflet in your compilerOptions of your tsconfig.json :
{
"compilerOptions": {
"types": [
"@types/node",
"@nuxt/vue-app",
"nuxt-leaflet"
]
}
}
You'll then be able to have autocompletion in Vue instances (this.$L
).
List of currently implemented components
See components supported
Development
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
npm run dev
License
Copyright (c) Rasmus Schlunsen