6 | In this example, we create a map with multiple base layers using [leafletBaseLayers].
7 | The [leafletBaseLayers] directive automatically adds the layers control so the user can switch between base layers.
8 | You can optionally provide options for the layers control using [leafletLayersControlOptions].
9 |
15 | <div leaflet style="height: 300px;" 16 | [leafletOptions]="options" 17 | [leafletBaseLayers]="baseLayers" 18 | [leafletLayersControlOptions]="layersControlOptions"> 19 | </div> 20 |21 | 22 |
6 | Markers are just like any other layer.
7 | You can add them to a map by creating them and adding them to an array bound to leafletLayers.
8 |
14 | <div leaflet style="height: 300px;" 15 | [leafletOptions]="options" 16 | [leafletLayers]="markers"> 17 | </div> 18 |19 |
6 | You can also use @for or @if to show/hide individual layers by nesting them inside the map element. 7 | In this case, you can use [leafletLayer] to bind an individual layer. 8 |
9 | 10 |
14 | <div leaflet style="height: 300px;" [leafletOptions]="options">
15 | @for(m of markers; track $index) {{ "{" }}
16 | <div [leafletLayer]="m"></div>
17 | {{ "}" }}
18 | </div>
19 |
20 |
21 | 6 | This is a demonstration of creating and managing multiple maps on a single template. 7 | This code demonstrates the proper way of making sure to not reuse Leaflet objects between multiple maps. 8 |
9 | 10 |
14 | @for(m of maps; track $index) {{ "{}" }}
15 | <div leaflet style="height: 300px;"
16 | [leafletOptions]="m.options">
17 | </div>
18 | {{ "}" }}
19 |
20 |
21 | 5 | We currently use iterable and key/value differs to track changes to allow mutable changes to the bound objects/arrays. 6 | This can become inefficient for large layer arrays because we have to compare the contents of the arrays to tell if they are different. 7 |
8 |9 | There are several strategies for mitigating this performance impact if it becomes an issue: 10 |
11 |LayerGroup layers to keep the bound array size small.
18 | But, this will be difficult to manage
19 | 22 | This example shows how to use OnPush to improve change detection efficiency. See the README for more details. 23 |
24 | 25 |
6 | In this example, we demonstrate how to use the various Map and Layer events using output binding.
7 | Mouse events are exposed using a pattern similar to (leafletClick), (leafletMouseDown), etc.
8 | The map Zoom/Move events are exposed using (leafletMapMove), (leafletMapZoom), etc.
9 |
15 | <div leaflet style="height: 300px;"
16 | [leafletOptions]="options"
17 | (leafletClick)="handleEvent('click', $event)"
18 | (leafletMapMoveEnd)="handleEvent('mapMoveEnd', $event)"
19 | (leafletMapZoomEnd)="handleEvent('mapZoomEnd', $event)">
20 | <div [leafletLayer]="baselayer"
21 | (leafletLayerAdd)="handleEvent('layerAdd', $event)">
22 | </div>
23 | </div>
24 |
25 |
26 |
6 | This example demonstrates how to add/remove arbitrary layers to the map using the [leafletLayers] directive
7 | together with the layers control using the [leafletLayersControl] directive.
8 |
14 | <div leaflet style="height: 300px;" 15 | [leafletOptions]="options" 16 | [leafletLayers]="layers" 17 | [leafletLayersControl]="layersControl"> 18 | </div> 19 |20 | 21 |
6 | This is a demonstration of setting up a basic map with initial options, including a base layer, an initial zoom level, and a center LatLng position.
7 | The zoom level and center position are bound as inputs - [leafletZoom] and [leafletCenter] respectively - so changes are automatically applied to the map.
8 | There are also outputs for (leafletZoomChange) and (leafletCenterChange) as well, so changes to the map are communicated to the component.
9 | The map is initialized with the options bound to [leafletOptions].
10 | After initialization, changes to the options are ignored.
11 |
17 | <div leaflet style="height: 300px;" 18 | [leafletOptions]="options" 19 | [leafletZoom]="zoom" 20 | (leafletZoomChange)="onZoomChange($event)" 21 | [leafletCenter]="center" 22 | (leafletCenterChange)="onCenterChange($event)"> 23 | </div> 24 |25 | 26 |