2

I'm working with ngx-leaflet. By default the map shows the zoom controls on the top left. However I cannot find how the positioning of this can be changed.

Here is an outdated method:

options = {
  layers: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 10, attribution: '...' }),
  zoom: 5,
  zoomControl: false,
  center: L.latLng(46.879966, -121.726909)
};

mapReady(map: L.Map) {
  map.addControl(L.control.zoom({ position: 'bottomright' }));
}

.

<div class="leaflet-container grow z-0" leaflet [leafletZoom]="leafletZoom" [leafletCenter]="leafletCenter" (leafletMapReady)="($event)">
    <div [leafletLayer]="tileLayer"></div>
    <div *ngFor="let marker of markerLayers " [leafletLayer]="marker"></div>
  </div>

source

Is there an updated way to do this with the latest version of ngx-leaflet (3.0)?

Here's a screenshot that shows that there isn't a zoom method on the control object: enter image description here

Kode_12
  • 4,506
  • 11
  • 47
  • 97
  • What happens when you try the above? That should work, unless they broke it in a minor version update on Leaflet 1.x. – reblace Jun 14 '18 at 03:42
  • that's the thing, the map class doesn't have the 'control' property on it – Kode_12 Jun 14 '18 at 04:34
  • please refer to the screencap I took to show you why I don't think I can use this in my angular component – Kode_12 Jun 14 '18 at 04:39
  • @reblace I'm using leaflet 1.3, ngx-leaflet 3.0.2, if that helps, any ideas? – Kode_12 Jun 14 '18 at 21:27
  • 1
    Yeah, I think all you need to do is update the import statement to `import { control, Map } from 'leaflet';` and then the reference is `control.zoom` for the factory method. The difference in the example you tried originally is that it is importing all of Leaflet into the `L` namespace. – reblace Jun 15 '18 at 00:55
  • ah, that was precisely it, thank you, cheers! – Kode_12 Jun 15 '18 at 01:35
  • @reblace I was curious if you had any answers for another question i have here https://stackoverflow.com/questions/50923267/bounds-is-not-valid – Kode_12 Jun 19 '18 at 17:13

1 Answers1

4

Since you're using direct imports, you want to do the following:

import { control, Map, latLng, tileLayer } from 'leaflet';

  options = {
    layers: tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 10, attribution: '...' }),
    zoom: 5,
    zoomControl: false,
    center: latLng(46.879966, -121.726909)
  };

  mapReady(map: Map) {
    map.addControl(control.zoom({ position: 'bottomright' }));
  }
reblace
  • 4,115
  • 16
  • 16
  • Is there any way to do it without using ```mapReady``` ? by ```zoomOptions```? – Ghizlane Lotfi Jan 23 '19 at 10:28
  • I recall there being an issue in the more recent versions of Leaflet (v1+) where you can't just use the map options to set the placement of the zoom control. You have to tell the options to remove it and then manually add a new one. Back in the day (v0.7), it used to work the way you would expect. That's my best recollection when I looked into this – reblace Jan 27 '19 at 22:57