Why this ngx-leaflet params are not working properly?

Question

I´m trying to make everything as possible in my leaflet project in Angular with ngx-angular but can´t find the way to make them work properly.

This is my params code:

zoomControl = {position: 'bottomright'};

readonly drawOptions = {
position: 'topright',
draw: {
  circle: false,
  circlemarker: false
},
edit: {
  featureGroup: this.drawItems,
  remove: false
  }
};

As you can see on this snapshot, this doesn´t works, position params are ignored and circle and circlemarker properties are ignored too.

Of course, they are included into the div map tag that has the ngx-leaflet properties calls, I wish to know if it´s possible to make them work without using pure JS on the way.

Answer 1

Use ngx-leaflet-draw library to be able to achieve what you are trying to.

Here include leafletDrawOptions to equal a variable drawOptions defined on your component:

<div
  leaflet
  style="height: 400px;"
  leafletDraw
  [leafletOptions]="options"
  [leafletDrawOptions]="drawOptions"
  (leafletDrawCreated)="onDrawCreated($event)"
>
  <div [leafletLayer]="drawnItems"></div>
</div>

In your component you are able to define which options will be visible like you are trying to in your example above:

{
    position: "topleft",
    draw: {
      ...,
      polyline: false,
      circle: false,
      circlemarker: false,
      rectangle: {
        shapeOptions: {
          color: "#85bb65"
        }
      }
    },
    edit: {
      featureGroup: this.drawnItems,
      remove: false
    }
  };

Here is the guide on how to install ngx-leaflet-draw and here is a demo to see it live. Do not worry regarding the drawing icons not being visible. In your app it should be fine. It has to do with codesandbox.