CODEWITHSUNDEEP
vue.jsleafletfullscreen
AndyC
AndyC

Reputation: 151

How to use Leaflet Fullscreen in Vue2Leaflet

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.

Upvotes: 4

Views: 3579

Answers (2)

Thorvald
Thorvald

Reputation: 665

For those using Nuxt with vue2-leaflet (and don't want to use a plugin but instead import it locally for performance reasons), this is how you can do it:

npm install leaflet-fullscreen

Require the needed files, create a method that runs when the map loads.

         <l-map
                @ready="LoadFullscreen()"
                ref="myMap"
              >
        
        <script>
let LMap,
  LTileLayer,
  LMarker,
  LPopup,
  LIcon,
  LControlAttribution,
  LControlZoom,
if (process.client) {
  require("leaflet");
  ({
    LMap,
    LTileLayer,
    LMarker,
    LPopup,
    LIcon,
    LControlAttribution,
    LControlZoom,
  } = require("vue2-leaflet/dist/vue2-leaflet.min"));
  require("leaflet-fullscreen/dist/leaflet.fullscreen.css");
  require("leaflet-fullscreen/dist/Leaflet.fullscreen");
}
import "leaflet/dist/leaflet.css";

... export defaults etc ... set your components

methods: {
LoadFullscreen() {
  if (!process.server) {
    const map = this.$refs.listingsMap.mapObject;
    map.addControl(
      new window.L.Control.Fullscreen({
        position: "topright",
      })
    );
  }
},

},

Upvotes: 0

thibautg
thibautg

Reputation: 2042

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());
}

Upvotes: 10

Related Questions