How to use Leaflet Fullscreen in Vue2Leaflet

Question

Does anyone have example of how to integrate Leaflet Fullscreen with Vue2 Leaflet

I use Vue2Leaflet in a component (loaded thru npm), and added the CDN link to the Fullscreen js in index.html. But when fullscreen js loaded, it couldn't find a reference to Leaflet as its not loaded yet. So I'm not sure how to use them in proper order.

Answer 1

You need to access the map object with this.$refs.mymap.mapObject and add the control in the mounted hook.

First add a ref attribute to the <l-map /> element:

<l-map :zoom="zoom" :center="center" ref="mymap">
  ...
</l-map>

Then add the control in the mounted hook:

mounted() {
  const map = this.$refs.mymap.mapObject;
  map.addControl(new L.Control.Fullscreen());
}

See this Fiddle

If you are using webpack, it's a bit different:

1) Install with npm install leaflet-fullscreen --save

2) Import the js and css files in your main.js file (app entry point) or use <script> in index.html:

import 'leaflet-fullscreen/dist/leaflet.fullscreen.css';
import 'leaflet-fullscreen/dist/Leaflet.fullscreen';

3) In your component, use window.L instead of L:

mounted() {
  const map = this.$refs.mymap.mapObject;
  map.addControl(new window.L.Control.Fullscreen());
}