Commit 88eab3cd authored by Michael Underwood's avatar Michael Underwood
Browse files

Enabled global Leaflet by default

parent df134a52

README.md

+53 −8
Original line number Diff line number Diff line
@@ -6,7 +6,7 @@ This is a Beta version! And may yet be unstable! If you want to help, please rea 
[issue](https://github.com/vue-leaflet/vue-leaflet/issues) or on [discord](https://discord.gg/uVZAfUf),

or join the [discussions](https://github.com/vue-leaflet/vue-leaflet/discussions).



## What Works:

## What Works



- LCircle

- LCircleMarker
@@ -33,11 +33,15 @@ or join the [discussions](https://github.com/vue-leaflet/vue-leaflet/discussions 


## Installation



`yarn add @vue-leaflet/vue-leaflet`

```bash

yarn add @vue-leaflet/vue-leaflet leaflet

```



or



`npm i -D @vue-leaflet/vue-leaflet`

```bash

npm i -D @vue-leaflet/vue-leaflet leaflet

```



## Usage
@@ -47,20 +51,61 @@ Until the complete documentation is ready, please check the 
Most component props mimic the vanilla [Leaflet options](https://leafletjs.com/reference-1.7.1.html) as closely as

possible, and generally remain the same as in their [Vue2Leaflet counterparts](https://vue2-leaflet.netlify.app/components/).



### Working with Leaflet

### Quickstart



```vue

<template>

  <div style="height:600px; width:800px">

    <l-map ref="map" v-model:zoom="zoom" :center="[47.41322, -1.219482]">

      <l-tile-layer

        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

        layer-type="base"

        name="OpenStreetMap"

      ></l-tile-layer>

    </l-map>

  </div>

</template>



<script>

import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";



export default {

  components: {

    LMap,

    LTileLayer,

  },

  data() {

    return {

      zoom: 2,

    };

  },

};

</script>



<style></style>

```



### Server-side Rendering (SSR)



Note that while the vue-leaflet library has the option of enabling SSR, **Leaflet itself does not**.



> **N.B.** Using `import L from "leaflet"` or `import { ... } from "leaflet"` can lead to unexpected errors.



To provide server-side rendering and tree-shaking capabilities, vue-leaflet uses async imports from the Leaflet ESM.

To provide server-side rendering and tree-shaking capabilities, vue-leaflet can be configured to use async imports from the

Leaflet ESM, by disabling the `useGlobalLeaflet` option on the map component, `<l-map :useGlobalLeaflet="false">`.



This can lead to issues when importing additional methods from Leaflet, because the two instances of the Leaflet

classes are technically no longer the same. See [Issue 48](https://github.com/vue-leaflet/vue-leaflet/issues/48) for more.



To avoid these issues, import any Leaflet methods asynchronously in response to the LMap component's `@ready` event:

```vue

<template>

  <l-map style="height:50vh">

  <div style="height:600px; width:800px">

    <p>vue-leaflet SSR Demo</p>

    <l-map :useGlobalLeaflet="false">

      <l-geo-json :geojson="geojson" :options="geojsonOptions" />

    </l-map>

  </div>

</template>



<script>

src/components/LMap.vue

+1 −1
Original line number Diff line number Diff line
@@ -150,7 +150,7 @@ export default { 
    },

    useGlobalLeaflet: {

      type: Boolean,

      default: false,

      default: true,

    },

  },

  setup(props, context) {