<|start_filename|>src/demo/app/leaflet/core/multi-map-demo.component.html<|end_filename|>
<div class="card">
	<div class="card-body">

		<h1 class="card-title">Adding Multiple Maps</h1>
		<p>
			This is a demonstration of creating and managing multiple maps on a single template.
			This code demonstrates the proper way of making sure to not reuse Leaflet objects between multiple maps.
		</p>

		<div class="card bg-light">
			<div class="card-body">

<pre>
&lt;div *ngFor="let m of maps"
	leaflet style="height: 300px;"
	[leafletOptions]="m.options"&gt;
&lt;/div&gt;
</pre>

			</div>
		</div>

	</div>
	<div class="card-body">

		<div class="row">

			<!-- Control Form -->
			<div class="col">

				<form>
					<button type="button" class="btn btn-primary m-1" (click)="doAddMap()">Add Map</button>
					<button type="button" class="btn btn-secondary m-1" (click)="doRemoveMap()">Remove Map</button>
				</form>

			</div>

		</div>

		<div class="row">

			<!-- Map -->
			<div class="col-sm-12 col-md-5 col-lg-3 m-1" *ngFor="let m of maps">

				<div style="height: 300px;"
					 leaflet
					 [leafletOptions]="m.options">
				</div>

			</div>

		</div>

	</div>
</div>






<|start_filename|>src/demo/app/leaflet/layers/ngfor-layers-demo.component.html<|end_filename|>
<div class="card">
	<div class="card-body">

		<h1 class="card-title">Layers and *ngFor</h1>
		<p>
			You can also use *ngFor or *ngIf to show/hide individual layers by nesting them inside the map element.
			In this case, you can use [leafletLayer] to bind an individual layer.
		</p>

		<div class="card bg-light">
			<div class="card-body">

<pre>
&lt;div leaflet style="height: 300px;" [leafletOptions]="options"&gt;
	&lt;div *ngFor="let m of markers" [leafletLayer]="m"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>

			</div>
		</div>

	</div>
	<div class="card-body">

		<div class="row">
			<form class="col">

				<button type="button"
					class="btn btn-primary mr-1"
					(click)="addMarker()">Add Marker</button>

				<button type="button"
					class="btn btn-primary"
					(click)="removeMarker()">Remove Marker</button>

			</form>
		</div>
		<div class="row">
			<label class="col col-form-label">{{markers?.length}} Markers</label>
		</div>

		<!-- Map -->
		<div leaflet style="height: 300px;" [leafletOptions]="options">
			<div *ngFor="let m of markers" [leafletLayer]="m"></div>
		</div>


	</div>

</div>






<|start_filename|>src/demo/app/leaflet/events/events-demo.component.html<|end_filename|>
<div class="card">
	<div class="card-body">

		<h1 class="card-title">Map and Layer Events</h1>
		<p>
			In this example, we demonstrate how to use the various Map and Layer events using output binding.
			Mouse events are exposed using a pattern similar to <code>(leafletClick)</code>, <code>(leafletMouseDown)</code>, etc.
			The map Zoom/Move events are exposed using <code>(leafletMapMove)</code>, <code>(leafletMapZoom)</code>, etc.
		</p>

		<div class="card bg-light">
			<div class="card-body">

<pre>
&lt;div leaflet style="height: 300px;"
        [leafletOptions]="options"
        (leafletClick)="handleEvent('click', $event)"
        (leafletMapMoveEnd)="handleEvent('mapMoveEnd', $event)"
        (leafletMapZoomEnd)="handleEvent('mapZoomEnd', $event)"&gt;
    &lt;div [leafletLayer]="baselayer"
         (leafletLayerAdd)="handleEvent('layerAdd', $event)"&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>

			</div>
		</div>

	</div>
	<div class="card-body">

		<div class="row">

			<!-- Event Log -->
			<div class="col-sm-12 col-md-6 col-lg-4">

				<form>

					<div class="form-group">
						<label class="col-form-label">Event Log:</label>
						<textarea type="textarea"
						          class="form-control"
						          name="eventLog"
						          rows="8"
						          disabled
						          [ngModel]="eventLog"></textarea>
					</div>

				</form>

			</div>

			<!-- Map -->
			<div class="col-sm-12 col-md-6 col-lg-8 m-2">

				<div leaflet style="height: 300px;"
					 [leafletOptions]="options"
				     (leafletClick)="handleEvent('click', $event)"
					 (leafletMapMoveEnd)="handleEvent('mapMoveEnd', $event)"
					 (leafletMapZoomEnd)="handleEvent('mapZoomEnd', $event)">

					<div [leafletLayer]="baselayer"
					     (leafletLayerAdd)="handleEvent('layerAdd', $event)">
					</div>

				</div>

			</div>

		</div>

	</div>
</div>






<|start_filename|>src/demo/app/leaflet/layers/layers-demo.component.html<|end_filename|>
<div class="card">
	<div class="card-body">

		<h1 class="card-title">Layers and Layer Controls</h1>
		<p>
			This example demonstrates how to add/remove arbitrary layers to the map using the <code>[leafletLayers]</code> directive
			together with the layers control using the <code>[leafletLayersControl]</code> directive.
		</p>

		<div class="card bg-light">
			<div class="card-body">

<pre>
&lt;div leaflet style="height: 300px;"
        [leafletOptions]="options"
        [leafletLayers]="layers"
        [leafletLayersControl]="layersControl"&gt;
&lt;/div&gt;
</pre>

			</div>
		</div>

	</div>
	<div class="card-body">

		<div class="row">

			<!-- Control Form -->
			<div class="col-sm-12 col-md-6 col-lg-4">

				<form>

					<!-- Base Layers -->
					<div class="form-group row">
						<label class="col-12 col-form-label">Base Layers</label>
						<div class="col-11 offset-1" *ngFor="let layer of model.baseLayers">
							<div class="form-check">
								<label class="form-check-label">
									<input class="form-check-input" type="radio"
										   [name]="layer.id"
										   [(ngModel)]="model.baseLayer"
										   (ngModelChange)="apply()"
										   [value]="layer.id">
									{{layer.name}}
								</label>
							</div>
						</div>
					</div>

					<!-- Overlay Layers -->
					<div class="form-group row" *ngIf="model.overlayLayers?.length > 0">
						<label class="col-12 col-form-label">Overlay Layers</label>
						<div class="col-11 offset-1" *ngFor="let layer of model.overlayLayers; let i = index;">
							<div class="form-check">
								<label class="form-check-label">
									<input class="form-check-input" type="checkbox"
									       [name]="layer.id"
									       [(ngModel)]="model.overlayLayers[i].enabled"
										   (ngModelChange)="apply()">
									{{layer.name}}
								</label>
							</div>
						</div>
					</div>

				</form>

			</div>

		<!-- Map -->
		<div class="col-sm-12 col-md-6 col-lg-8 m-2">

			<div leaflet style="height: 300px;"
			     [leafletOptions]="options"
			     [leafletLayers]="layers"
			     [leafletLayersControl]="layersControl">
			</div>

		</div>

	</div>

</div>






<|start_filename|>src/demo/app/leaflet/performance/performance-demo.component.html<|end_filename|>
<div class="card">
	<div class="card-body">
		<h1 class="card-title">Efficient Change Detection</h1>
		<p>
			We currently use iterable and key/value differs to track changes to allow mutable changes to the bound objects/arrays.
			This can become inefficient for large layer arrays because we have to compare the contents of the arrays to tell if they are different.
		</p>
		<p>
			There are several strategies for mitigating this performance impact if it becomes an issue:
		</p>
		<ul>
			<li>
				First, you can wrap the directive in a compoment that uses the <a href="https://angular.io/api/core/ChangeDetectionStrategy">OnPush change detection strategy</a>.
				That way, you can ensure that change detection is only applied when you want.
			</li>
			<li>
				Second, you can wrap large sets of layers (e.g., markers) in Leaflet <code>LayerGroup</code> layers to keep the bound array size small.
				But, this will be difficult to manage
			</li>
		</ul>
		<p>
			This example shows how to use OnPush to improve change detection efficiency. See the README for more details.
		</p>

	</div>
	<div class="card-body">

		<div class="row">
			<form class="col">
				<button type="button"
						class="btn btn-primary mr-1"
						(click)="mutableAdd()">Mutable Add Marker</button>

				<button type="button"
						class="btn btn-primary mr-1"
						(click)="mutableRemove()">Mutable Remove Marker</button>

				<button type="button"
						class="btn btn-primary"
						(click)="newArray()">Update Array Instance</button>
			</form>
		</div>
		<div class="row">
			<label class="col col-form-label">{{markers?.length}} Markers</label>
		</div>

		<leafletWrapper [leafletMarkers]="markers"></leafletWrapper>

	</div>
</div>






<|start_filename|>src/demo/app/leaflet/core/core-demo.component.html<|end_filename|>
<div class="card">
	<div class="card-body">

		<h1 class="card-title">Core - Using options</h1>
		<p>
			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.
			The zoom level and center position are bound as inputs - <code>[leafletZoom]</code> and <code>[leafletCenter]</code> respectively - so changes are automatically applied to the map.
			There are also outputs for <code>(leafletZoomChange)</code> and <code>(leafletCenterChange)</code> as well, so changes to the map are communicated to the component.
			The map is initialized with the options bound to <code>[leafletOptions]</code>.
			After initialization, changes to the options are ignored.
		</p>

		<div class="card bg-light">
			<div class="card-body">

<pre>
&lt;div leaflet style="height: 300px;"
        [leafletOptions]="options"
        [leafletZoom]="zoom"
        (leafletZoomChange)="onZoomChange($event)"
        [leafletCenter]="center"
        (leafletCenterChange)="onCenterChange($event)"&gt;
&lt;/div&gt;
</pre>

			</div>
		</div>

	</div>
	<div class="card-body">

		<div class="row">

			<!-- Control Form -->
			<div class="col-sm-12 col-md-6 col-lg-4">

				<form>

					<div class="form-group">
						<label class="col-form-label">Options:</label>
						<small class="form-text">{{ optionsSpec | json }}</small>
					</div>

					<!-- Zoom Levels -->
					<div class="form-group row">
						<div class="col-4">
							<label class="col-form-label float-right">
								Zoom
							</label>
						</div>
						<div class="col">
							<select class="form-control" name="zoom" [(ngModel)]="formZoom" required>
								<option *ngFor="let z of zoomLevels" [value]="z">{{z}}</option>
							</select>
						</div>
					</div>

					<!-- Lat/Long -->
					<div class="form-group row">
						<div class="col-4">
							<label class="col-form-label float-right">Latitude</label>
						</div>
						<div class="col">
							<input type="text" class="form-control" name="lat" [(ngModel)]="lat" required>
						</div>
					</div>
					<div class="form-group row">
						<div class="col-4">
							<label class="col-form-label float-right">
								Longitude
							</label>
						</div>
						<div class="col">
							<input type="text" class="form-control" name="lng" [(ngModel)]="lng" required>
						</div>
					</div>

					<div class="form-group row">
						<div class="col offset-4">
							<div class="clearfix">
								<button type="button"
										class="btn btn-primary"
										(click)="doApply()">Apply</button>
							</div>
						</div>
					</div>
				</form>

			</div>

			<!-- Map -->
			<div class="col-sm-12 col-md-6 col-lg-8">

				<div leaflet style="height: 300px;"
					 [leafletOptions]="options"
					 [leafletZoom]="zoom"
					 (leafletZoomChange)="onZoomChange($event)"
					 [leafletCenter]="center"
				     (leafletCenterChange)="onCenterChange($event)">
				</div>

			</div>

		</div>

	</div>
</div>




