Leaflet Draw on rectangle draw it throws error

Question

I'm using leaflet + leaflet-draw + @ngx-leaflet + @ngx-leaflet-draw in an Angular application.

I've tried everything, versions change, importing the modules .forRoot() and not, adding the js files in my angular.json file, remove node_modules, reinstall them, followed the guide on @ngx-leaflet-draw from scratch a hundred times.

No matter what I do, when I try to draw a rectangle it always throws this error:

Even though the handlers are present and ALL of them works perfectly except for the rectangle one (the only one I need)

I don't even know how to provide you with more specific informations if not for this:

• leaflet: 1.5.1
• leaflet-draw: 1.0.4
• @asymmetrik/ngx-leaflet: 6.0.1
• @asymmetrik/ngx-leaflet-draw: 5.0.1

I'm stuck on this stupid error and I don't know how to get over it. Please help!

here's a repo for demo: https://github.com/caiusCitiriga/leaflet-rect-drawer

Answer 1

There are a couple of issues:

1. The draw options aren't quite right. This isn't actually causing the error, though.
2. There's a bug leaflet-draw that causes the exception you're seeing.

Leaflet Draw Options

square is not a draw option. The correct option is rectangle. Additionally, all of the handlers are enabled by default. So, you only need to turn off the ones you don't want.

So, I think what you want is in your app.component.ts file:

public drawOptions = {
        position: 'topright',
        draw: {
            marker: {
                icon: L.icon({
                    iconSize: [25, 41],
                    iconAnchor: [13, 41],
                    iconUrl: 'assets/marker-icon.png',
                    shadowUrl: 'assets/marker-shadow.png'
                })
            },
            polygon: false,
            circlemarker: false
        }
    };

The above will make sure that marker, circle, rectangle, and polyline are enabled and the others are disabled. You want to make sure to add the leaflet assets png files to the list of assets being exported by Angular CLI in your angular.json file.

Identifying and Fixing The Error

There's something weird about leaflet-draw's build that's causing the source maps to not work. To get them working, I had to directly import the leaflet.draw-src.js file.

At the top of app.component.ts, I added:

import * as L from 'leaflet';
import '../../node_modules/leaflet-draw/dist/leaflet.draw-src.js'; // add this

That allows you to put a breakpoint in the leaflet-draw code to figure out what's going on. Upon doing that, it looks like there's a variable called type that isn't declared before it's assigned to. The code is being run in strict mode, so this will throw an exception. This looks to be a bug in leaflet-draw.

Solution 1: Disable ShowArea

First, you can disable showArea, which will prevent the problem code from running. To do this, modify the drawOptions:

public drawOptions = {
        position: 'topright',
        draw: {
            marker: {
                icon: L.icon({
                    iconSize: [25, 41],
                    iconAnchor: [13, 41],
                    iconUrl: 'assets/marker-icon.png',
                    shadowUrl: 'assets/marker-shadow.png'
                })
            },
            rectangle: { showArea: false }, // disable showArea
            polyline: true,
            polygon: false,
            circlemarker: false
        }
    };

This isn't a great solution, cause you lose the showArea functionality.

Solution 2: Disable Strict Mode

The other solution is to disable strict mode for the Typescript compiler.

To do this, edit your tsconfig.json and tsconfig.app.json files, adding "noImplicitUseStrict": true under the compilerOptions property.

This solves the problem, but now you're not running your code in strict mode, which can lead to other issues.

Answer 2

there is a typing probleme inside leaflet draw file

Unfortunatly, there is no more support on this project

You can update node-package module and fix the problem, here is my solution :

install last leaflet and leaflet-draw version

for me :

    "leaflet": "^1.7.1",
    "leaflet-draw": "^1.0.4",

And install patch-package : https://www.npmjs.com/package/patch-package

go to node-module/leaflet-draw/dist/leaflet.draw.js

update the package

replace this part of code : (I can't give you the line cause it's a minified file, so you have to ctrl+f to find the location.)

{var a,n,o=L.Util.extend({},t,o)

by this :

{var type;var a,n,o=L.Util.extend({},t,o)

After node module package updated, you have to create a node module patch

to do this, use patch-package command :

npx patch-package leaflet-draw

Last things is to tell angular to replace the correct leaflet-draw file

To do this, you have to go inside your angular package.json and add this line :

"postinstall": "patch-package"

like this:

  "scripts": {
    "postinstall": "patch-package",
    "build": "ng build",
    "lint": "ng lint",
    "ng": "ng",
  },

Remove your node-module package

Make new install (npm install)

Now you can use the rectangle draw fnunctionnality

if you just need in local, you just need to update the leaflet-draw.js file.

Answer 3

I 'fixed' it with

rectangle: <any>{ showArea: false },