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.

@alessandro don´t know who to use stackblitz and if it´s possible to install there npm libraries, sorry — B2DAW, Oct 27 '20 at 09:48
I suggest to play here: https://stackblitz.com/edit/angular-9-starter It will help you a lot All the best — ale, Oct 27 '20 at 09:53
Sorry @alessandro but can´t implement it there, it makes me nervous — B2DAW, Oct 27 '20 at 11:08

score 2 · Accepted Answer · answered Oct 27 '20 at 14:20

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.

thanks for the answer mate, I solved it yesterdey but was as you said — B2DAW, Oct 28 '20 at 09:48

Why this ngx-leaflet params are not working properly?

1 Answers1