Hello
Is it possible to get the map to support Geolocation? Something like whats on the openstreetmap website map where you can click the location button and the map then moves to where your location is. Maybe some event that we can listen on to get the Latitude and Longitude of the users location which we can then use to manipulate the map?
Phil
Currently, the marker tooltip can be shown only when hovering the marker. I want to show the tooltip when the user clicks the marker.
Example use case:
I've included clickable elements in the tooltip. The tooltip is hidden as soon as the mouse leaves the marker and the user cannot interact with the tooltip elements.
If I set a global font icon type, the Map icons are broken, because they are missing the k-font-icon CSS class. A possible workaround is to apply the missing styles to the rendered k-icon class:
In the meantime, one can use SVG icons or the following CSS rule as a workaround:
.k-map .k-icon {
width: 1em;
height: 1em;
outline: 0;
font-size: 16px;
font-family: "WebComponentsIcons";
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
speak: none;
text-transform: none;
text-decoration: none;
flex-shrink: 0;
display: inline-flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
vertical-align: middle;
position: relative;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
under the class k-map-controls k-pos-top k-pos-left
like the navigator and zoom controlls. I like to add some specified Button with my own events like an mylocationBtn something like this..
Ability to refresh data for specific Map Layers. Currently the only way to update markers on Map is by calling Refresh on the Map component or issuing a StateHasChanged call.
Currently Maps does not support observable data, according to documentation: Databind to Observable Collection - Telerik UI for Blazor
Purpose: Ability to have "live" updating markers and/or shapes without calling MapRef.Refresh() which causes a full component "blink" and refresh in Edge, and to avoid StateHasChanged.
Example/Pseduo-Razor code:<TelerikMap @ref="MapRef">
<MapLayers>
<MapLayer Type="@MapLayersType.Marker" Data=@MyData" @ref="LayerRef" />
</MapLayers>
</TeleriKMap>Example/Pseudo C# example
@code {
TelerikMap MapRef {get; set; }
TelerikMapLayer LayerRef { get; set; }
MyData = new List<MapMarker>() {
// Data in here
};
private void WholeComponentRefresh() {
MapRef.Refresh(); // Existing functionality
}
private void AddMarker() {
MyData.Add(new MapMarker()); // Map ignores this because it does not treat as observable
}
private void MyLayerRefresh() {
LayerRef.Refresh(); // If we don't have observable, could we at least get per-layer Refresh?
}
}
Hi
Can bounding box support be considered for the map please. It would be great if we can reference at runtime the current bounds that are displayed on the screen in bounding box format (https://wiki.openstreetmap.org/wiki/Bounding_Box) such as the open street map format below.
Im hoping as the map uses open street map this can be made available to the component.
Hello,
i am came into scenario, where user wants multiple "colored" bubbles, the only option in current version is:
- use multiple bubble layers
But only ONE of the layer(the last one?) is firing the OnShapeClick event.
Expected:
Clicking on any "bubble"/shape should always fire the event OnShapeClick()
Is there any workaround, or idea how to force event to fire?
Dynamic loading of multiple colored layers/bubbles, but same problem is when you "statically" put 2 or more layers on map:
<TelerikMap Center="@Center"
MinZoom="3" Height="80vh"
Zoomable="true" Pannable="true"
Zoom="7"
OnMarkerClick="@( (args) => OZRowCmd((CrmMapOrgModel)args.DataItem,15))"
OnShapeClick="@( (args) => OZRowCmd((CrmMapOrgModel)args.DataItem,15))"
>
<MapLayers>
<MapLayer Type="@MapLayersType.Tile"
Attribution="@Attribution"
Subdomains="@Subdomains"
UrlTemplate="@UrlTemplate">
</MapLayer>
@if (MarkerList != null) foreach (var it in MarkerList)
{
@if (it.MarkerType == (int)MapLayersType.Marker)
{
<MapLayer Type="@MapLayersType.Marker"
Data="@MarkerData1.Where(x=>x.MarkerType==it.MarkerType)"
LocationField="@nameof(CrmMapOrgModel.LatLng)"
TitleField="@nameof(CrmMapOrgModel.CisloOrgNazev)"
/>
}
@if (it.MarkerType == (int)MapLayersType.Bubble && MarkerData1.Any(x => x.MarkerType == it.MarkerType & x.StavTr == it.StavTr))
{
<MapLayer Type="@MapLayersType.Bubble"
Data="@MarkerData1.Where(x=>x.MarkerType==it.MarkerType & x.StavTr==it.StavTr)"
LocationField="@nameof(CrmMapOrgModel.LatLng)"
ValueField="@nameof(CrmMapOrgModel.MarkerValue)" MinSize=@it.MinMarkerValue MaxSize=@it.MaxMarkerValue
>
<MapLayerBubbleSettings>
<MapLayerBubbleSettingsStyle >
<MapLayerBubbleSettingsStyleFill Color="@it.MarkerColor"></MapLayerBubbleSettingsStyleFill>
<MapLayerBubbleSettingsStyleStroke Color="@it.MarkerStrokeColor"></MapLayerBubbleSettingsStyleStroke>
</MapLayerBubbleSettingsStyle>
</MapLayerBubbleSettings>
</MapLayer>
}
}
</MapLayers>
</TelerikMap>
Add marker clustering support to the Telerik UI for Blazor Map control. When a map with many close to each other markers is viewed, they should group together.
