<EjsMaps Height="@height" Width="@width" @ref="Mapp">
<MapsBorder Color="black" Width="1"></MapsBorder>
<MapsZoomSettings Enable="true" ZoomFactor="1"></MapsZoomSettings>
<MapsLayers>
<MapsLayer UrlTemplate="http://mt1.google.com/vt/lyrs=m@129&hl=en&x=tileX&y=tileY&z=level?authuser=0" LayerType="ShapeLayerType.OSM">
<MapsShapeSettings Fill="#E5E5E5">
<MapsShapeBorder Width="0.2" Color="black"></MapsShapeBorder>
</MapsShapeSettings>
<MapsMarkerSettings>
<MapsMarker DataSource="MarkerDataSource" Visible="true" Height="20" Width="20">
<MapsMarkerTooltipSettings Visible="true" ValuePath="name"></MapsMarkerTooltipSettings>
</MapsMarker>
</MapsMarkerSettings>
</MapsLayer>
</MapsLayers>
</EjsMaps>
@code {
EjsMaps Mapp { get; set; }
private string height { get; set; } = "100%";
private string width { get; set; } = "100%";
public ObservableCollection<MarkerData> MarkerDataSource { get; set; }
public class MarkerData
{
public double latitude { get; set; }
public double longitude { get; set; }
public string name { get; set; }
public static ObservableCollection<MarkerData> GetData()
{
ObservableCollection<MarkerData> MarkerDataSource = new ObservableCollection<MarkerData>() {
new MarkerData{ latitude= 45.240416, longitude= -100.310779, name= "South Dakota" }
};
return MarkerDataSource;
}
}
protected override void OnInitialized()
{
this.MarkerDataSource = MarkerData.GetData();
}
public void add()
{
this.MarkerDataSource.Add(new MarkerData { latitude = 19.1555762, longitude = 72.8849595, name = "Mumbai" });
}
}
|