diff --git a/docs/assets/popup.png b/docs/assets/popup.png
index 514b633..c28121d 100644
Binary files a/docs/assets/popup.png and b/docs/assets/popup.png differ
diff --git a/docs/popups/README.md b/docs/popups/README.md
index ce11aa4..fc447a4 100644
--- a/docs/popups/README.md
+++ b/docs/popups/README.md
@@ -5,31 +5,28 @@
Popups can be added to the map using the `AddPopupAsync` method on the map. If the `OpenOnAdd` property is set to true, the popup will be opened once it has been added to the map.
```
-@page "/PopupOnReady"
+@page "/Popups/CustomizePopup"
@using AzureMapsControl.Components.Map
+ OnReady="OnMapReady"/>
@code {
- public StyleOptions StyleOptions = new StyleOptions
- {
- Style = MapStyle.GrayscaleDark
- };
-
public async Task OnMapReady(MapEventArgs eventArgs)
{
- await eventArgs.Map.AddPopupAsync(new Components.Popups.PopupOptions
- {
+ var popup = new Components.Popups.Popup(new Components.Popups.PopupOptions {
+ Content = "Hello World
",
+ Position = new Components.Atlas.Position(0, 0),
+ FillColor = "rgba(0,0,0,0.8)",
CloseButton = false,
- Content = "Please customize me",
- Position = new AzureMapsControl.Components.Atlas.Position(11.581990, 48.143534)
+ OpenOnAdd = true
});
+
+ await eventArgs.Map.AddPopupAsync(popup);
}
}
@@ -262,5 +259,168 @@ The following example reacts to the opening of a popup :
await popup.OpenAsync();
}
+}
+```
+
+### Templates
+
+String templates, `PropertyInfo` templates and the combination of both are supported. The `AddPopupAsync` method of the `Map` accepts a `PopupTemplate` and a dictionary of properties as parameters.
+
+```
+@page "/Popups/StringTemplate"
+
+@using AzureMapsControl.Components.Map
+
+
+@code {
+
+ public class PropertySubValues
+ {
+ public string SubValue { get; set; }
+ }
+
+ public async Task OnMapReady(MapEventArgs eventArgs)
+ {
+ var template = new Components.Popups.PopupTemplate
+ {
+ Content = new Components.Atlas.Either, IEnumerable>>>
+ ("This template uses a string template with placeholders.
- Value 1 = {value1}
- Value 2 = {value2/subValue}
- Array value [2] = {arrayValue/2}"),
+ NumberFormat = new Components.Atlas.FormatOptions.NumberFormatOptions
+ {
+ MaximumFractionDigits = 2
+ }
+ };
+
+ var properties = new Dictionary
+ {
+ { "title", "Template 1 - String template" },
+ { "value1", 1.2345678},
+ { "value2", new PropertySubValues { SubValue = "Pizza" } },
+ { "arrayValue", new [] { 3,4,5,6 } }
+ };
+
+ var position = new Components.Atlas.Position(0, 0);
+
+ var popup = new Components.Popups.Popup(new Components.Popups.PopupOptions {
+ Position = position,
+ OpenOnAdd = true
+ });
+
+ await eventArgs.Map.AddPopupAsync(popup, template, properties);
+ }
+
+}
+```
+
+If you want to reuse a template on an already existing popup, you can use the `ApplyTemplateAsync` method directly on the popup. You can also specify some updates which need to be applied on the options of the popup, if you want for example to change the location of the popup. If the content is specified on the options, it will be overriden by the template.
+
+```
+@page "/Popups/ReuseTemplate"
+
+@using AzureMapsControl.Components.Map
+
+
+@code {
+
+ public class PropertySubValues
+ {
+ public string SubValue { get; set; }
+ }
+
+ public async Task OnMapReady(MapEventArgs eventArgs)
+ {
+ var datasource = new Components.Data.DataSource();
+ await eventArgs.Map.AddSourceAsync(datasource);
+
+ await datasource.AddAsync(
+ new Components.Atlas.Feature(
+ "feature1",
+ new Components.Atlas.Point(new Components.Atlas.Position(-122.33, 47.6))
+ ),
+ new Components.Atlas.Feature(
+ "feature2",
+ new Components.Atlas.Point(new Components.Atlas.Position(-122.335, 47.645))
+ ),
+ new Components.Atlas.Feature(
+ "feature3",
+ new Components.Atlas.Point(new Components.Atlas.Position(-122.325, 47.635))
+ )
+ );
+
+ var template = new Components.Popups.PopupTemplate
+ {
+ Content = new Components.Atlas.Either, IEnumerable>>>
+ ("This template uses a string template with placeholders.
- Value 1 = {value1}
- Value 2 = {value2/subValue}
- Array value [2] = {arrayValue/2}"),
+ NumberFormat = new Components.Atlas.FormatOptions.NumberFormatOptions
+ {
+ MaximumFractionDigits = 2
+ }
+ };
+
+ var layer = new Components.Layers.SymbolLayer {
+ Options = new Components.Layers.SymbolLayerOptions {
+ Source = datasource.Id,
+ IconOptions = new Components.Layers.IconOptions {
+ AllowOverlap = true
+ }
+ },
+ EventActivationFlags = Components.Layers.LayerEventActivationFlags.None().Enable(Components.Layers.LayerEventType.Click)
+ };
+
+ await eventArgs.Map.AddLayerAsync(layer);
+
+ var popup = new Components.Popups.Popup();
+ await eventArgs.Map.AddPopupAsync(popup);
+
+ layer.OnClick += async clickEventArgs => {
+ if(clickEventArgs.Shapes is not null && clickEventArgs.Shapes.Any()) {
+ var shape = clickEventArgs.Shapes.First();
+ Dictionary properties = null;
+ switch (shape.Id)
+ {
+ case "feature1":
+ properties = new Dictionary {
+ { "title", "First feature" },
+ { "value1", 1.2345678},
+ { "value2", new PropertySubValues { SubValue = "Pizza" } },
+ { "arrayValue", new [] { 3,4,5,6 } }
+ };
+ break;
+ case "feature2":
+ properties = new Dictionary {
+ { "title", "Second feature"},
+ { "value1", 3.14159},
+ { "value2", new PropertySubValues { SubValue = "Donut" } },
+ { "arrayValue", new [] { 13, 34, 42, 46 } }
+ };
+ break;
+ case "feature3":
+ properties = new Dictionary {
+ { "title", "Third feature"},
+ { "value1", 100.1000001},
+ { "value2", new PropertySubValues { SubValue = "Taco" } },
+ { "arrayValue", new [] { 0, 0, 0 } }
+ };
+ break;
+ }
+ await popup.ApplyTemplateAsync(template, properties, options => {
+ options.Position = (shape.Geometry as Components.Atlas.Point).Coordinates;
+ options.PixelOffset = new Components.Atlas.Pixel(0, -18);
+ });
+ await popup.OpenAsync();
+ }
+ };
+
+ }
+
}
```
\ No newline at end of file