Vue2 - this.map has no pm object

[hkeidesen]

Hello!
My team just moved from leaflet.pm to leaflet-geoman, but after the migrating, the .pm object in this.map is no longer found. I have tried to reInitLayer, but to no avail.

We have not made any changes to the code itself, just the dependencies in packages.json. How have other people solved this? We use the .pm object is used to addControls (amongst other), as below:

loadMapControls() {
        this.map.pm.addControls({
        position: 'topleft',
        drawMarker: false,
        drawCircleMarker: false,
        drawPolyline: this.editMode,
         })
  },

[Falke-Design]

Hi @hkeidesen,

can you please check if the geoman script is imported before creating the map.

What do you get if you run console.log(L.PM.version)? -> This checks if Geoman is available.

You can try to use [email protected], it's the same version as leaflet.pm@latest. If that works increase the version number until you facing the issue.

[hkeidesen]

Thank you for the reply! We are importing Leaflet and geoman in the .vue-file as follows:

import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'

Is this what you mean by script is imported before creating the map?

We get undefinde when we console.log(L.PM.version), so that seems to me that we are not importing it correctly

[Falke-Design]

You only import the .css file. You need to import the .js file too:

import L from 'leaflet'
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.min.js'
import 'leaflet/dist/leaflet.css'
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'