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.