MapLayerBuilder
Methods
DataSource(System.Action)
Defines the DataSource of the Map layer.
Parameters
configurator - System.Action<MapLayerDataSourceBuilder>
The action that configures of the DataSource settings.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Marker)
.DataSource(dataSource => dataSource.Read(read => read.Action("_StoreLocations", "Map")))
);
})
)
Subdomains(System.String[])
Defines a list of subdomains to use for loading tiles. Alternating between different subdomains allows more requests to be executed in parallel.
Parameters
subdomains - System.String[]
The array of subdomains
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Tile)
.UrlTemplate("https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png")
.Subdomains("a", "b", "c");
})
)
Attribution(System.String)
Defines the attribution for the layer. Accepts valid HTML.
Parameters
value - System.String
The value that configures the attribution.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Tile)
.UrlTemplate("https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png")
.Attribution("<a href='https://osm.org/copyright'>OpenStreetMap contributors</a>");
})
)
AutoBind(System.Boolean)
If set to "false", the layer will not bind to the DataSource during the initialization. In this case, the data binding will occur when the Change event of the DataSource fires. By default, the Map will bind to its DataSource.
Parameters
value - System.Boolean
The value that configures the AutoBind option.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Marker)
.AutoBind(false)
.DataSource(dataSource => dataSource.Read(read => read.Action("_StoreLocations", "Map")))
);
})
)
Extent(System.Double[])
Specifies the extent of the region covered by the layer. The layer will be hidden when the specified area is out of view. Accepts a four-element array that specifies the extent covered by this the: North-West latitude, longitude, South-East latitude, longitude. If not specified, the layer is always visible.
Parameters
value - System.Double[]
The value that configures the extent option.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Tile)
.Extent(new double[]{43.4350, 22.2556, 42.2265, 27.4850});
})
)
Key(System.String)
Sets the API key for the layer. Currently, the option is supported only for Bing (tm) tile layers.
Parameters
value - System.String
The value that configures the API key.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Bing)
.Key("API key value");
})
)
Culture(System.String)
Defines the culture for the Bing map tiles.
Parameters
value - System.String
The value that configures the culture.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Bing)
.Culture("de-DE");
})
)
LocationField(System.String)
Defines the data item field that contains the marker (symbol) location. The field must be an array with two numbers - latitude and longitude in decimal degrees. It is required to define a DataSource for the layer. The option is applicable only to Marker and Bubble layers.
Parameters
value - System.String
The value that configures the location field.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Marker)
.LocationField("LatLng")
.DataSource(dataSource => dataSource.Read(read => read.Action("_StoreLocations", "Map")))
);
})
)
TileSize(System.Double)
Sets the size of the image tile in pixels.
Parameters
value - System.Double
The value that configures the tile size.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Tile)
.TileSize(200);
})
)
TitleField(System.String)
Defines the data item field that contains the marker title. It is required to define a DataSource for the layer.
Parameters
value - System.String
The value that configures the title field.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Marker)
.TitleField("Name")
.DataSource(dataSource => dataSource.Read(read => read.Action("_StoreLocations", "Map")))
);
})
)
MaxSize(System.Double)
Sets the maximum symbol size for Bubble layer symbols.
Parameters
value - System.Double
The value that configures the maximum symbol size.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Bubble)
.MaxSize(50)
.DataSource(dataSource => dataSource.Read(read => read.Action("_UrbanAreas", "Map")))
);
})
)
MinSize(System.Double)
Sets the minimum symbol size for the Bubble layer symbols.
Parameters
value - System.Double
The value that configures the minimum symbol size.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Bubble)
.MinSize(10)
.DataSource(dataSource => dataSource.Read(read => read.Action("_UrbanAreas", "Map")))
);
})
)
MaxZoom(System.Double)
Sets the maximum zoom level at which to show the layer.
Parameters
value - System.Double
The value that configures the maximum zoom level.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Tile)
.MaxZoom(13);
})
)
MinZoom(System.Double)
Sets the minimum zoom level at which to show the layer.
Parameters
value - System.Double
The value that configures the minimum zoom level.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Tile)
.MinZoom(14);
})
)
Opacity(System.Double)
Defines the opacity for the layer.
Parameters
value - System.Double
The value that configures the opacity.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Tile)
.Opacity(1);
})
)
Style(System.Action)
Configures the default style for shapes.
Parameters
configurator - System.Action<MapLayerStyleSettingsBuilder>
The action that configures the style settings.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Shape)
.Style(style => style.Fill(fill => fill.Opacity(0.7)));
})
)
UrlTemplate(System.String)
Defines the URL template for tile layers. The template variables are: x - X coordinate of the tile; y - Y coordinate of the tile; zoom - zoom level or subdomain - Subdomain for this tile.
Parameters
value - System.String
The value that configures the tile layer URL template.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Tile)
.UrlTemplate("https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png");
})
)
UrlTemplateId(System.String)
Defines the URL template for tile layers. The template variables are: x - X coordinate of the tile; y - Y coordinate of the tile; zoom - zoom level or subdomain - Subdomain for this tile.
Parameters
value - System.String
The name of the external Kendo UI template.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Tile)
.UrlTemplateId("urlMapTemplate");
})
)
<script id="urlMapTemplate" type="text/x-kendo-template">
http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png
</script>
UrlTemplateView(System.Web.Mvc.MvcHtmlString)
Defines the URL template for tile layers. The template variables are: x - X coordinate of the tile; y - Y coordinate of the tile; zoom - zoom level or subdomain - Subdomain for this tile.
Parameters
value - System.Web.Mvc.MvcHtmlString
The Razor View that will be used for rendering the tile layer URL template.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Tile)
.UrlTemplateView(Html.Partial("MapUrlTemplateView"));
})
)
UrlTemplateHandler(System.String)
Defines the URL template for tile layers. The template variables are: x - X coordinate of the tile; y - Y coordinate of the tile; zoom - zoom level or subdomain - Subdomain for this tile.
Parameters
value - System.String
The JavaScript function that will return the tile layer URL template.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Tile)
.UrlTemplateHandler("getUrlTemplate");
})
)
<script>
function getUrlTemplate(data) {
return `http://${data.subdomain}.tile.openstreetmap.org/${data.zoom}/${data.x}/${data.y}.png`;
}
</script>
UrlTemplate(Kendo.Mvc.UI.Fluent.TemplateBuilder)
Defines the URL template for tile layers. The template variables are: x - X coordinate of the tile; y - Y coordinate of the tile; zoom - zoom level or subdomain - Subdomain for this tile.
Parameters
template - TemplateBuilder<TModel>
A Template component that configures the URL template.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Tile)
.UrlTemplate(Html.Kendo().Template().AddHtml("http://${data.subdomain}.tile.openstreetmap.org/${data.zoom}/${data.x}/${data.y}.png"));
})
)
ValueField(System.String)
Defines the value field for Bubble layer symbols. The data item field must be a number.
Parameters
value - System.String
The value that configures the value field.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Bubble)
.ValueField("Val")
.DataSource(dataSource => dataSource.Read(read => read.Action("_UrbanAreas", "Map")))
);
})
)
ZIndex(System.Double)
Defines the z-index for the layer. The layers are normally stacked in a declaration order (the last one is on top).
Parameters
value - System.Double
The value that configures the z-index of the layer.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Tile)
.ZIndex(1);
})
)
Type(Kendo.Mvc.UI.MapLayerType)
Defines the layer type.
Parameters
value - MapLayerType
The enum value that configures the type of the layer.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add().Type(MapLayerType.Tile);
})
)
ImagerySet(Kendo.Mvc.UI.MapLayersImagerySet)
Sets the type of tiles in the Bing Map.
Parameters
value - MapLayersImagerySet
The value that configures the type of the Bing map tiles.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add().Type(MapLayerType.Bing).ImagerySet(MapLayersImagerySet.AerialWithLabels);
})
)
Shape(Kendo.Mvc.UI.MapMarkersShape)
Sets the marker shape. The available shapes are "Pin" and "PinTarget".
Parameters
value - MapMarkersShape
The enum value that configures the shape.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add().Shape(MapMarkersShape.PinTarget);
})
)
Symbol(Kendo.Mvc.UI.MapSymbol)
Defines the Bubble layer symbol type. The possible values are "Circle" and "Square".
Parameters
value - MapSymbol
The enum value that configures the symbol.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Bubble)
.Symbol(MapSymbol.Square);
})
)
Shape(System.String)
Sets the marker shape. The available shapes are "pin" and "pinTarget".
Parameters
name - System.String
The name of the marker shape.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add().Shape("pin");
})
)
Symbol(System.String)
Defines the Bubble layer symbol type. The possible values are "circle" and "square".
Parameters
symbol - System.String
The value that configures the symbol type.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Bubble)
.Symbol("square");
})
)
SymbolHandler(System.String)
Sets a client-side function that will draw the Bubble layer symbol type.
Parameters
handler - System.String
The name of the JavaScript function that will draw the symbol.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Bubble)
.SymbolHandler("getSymbolType");
})
)
<script>
function getSymbolType(data) {
...//return kendo.drawing.Shape
}
</script>
Tooltip(System.Action)
Configures the Tooltip component options for data-bound markers.
Parameters
configurator - System.Action<MapMarkerTooltipBuilder>
The action that configures the tooltip settings.
Example
@(Html.Kendo().Map()
.Name("map")
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Marker)
.Tooltip(tooltip => tooltip.Content("City X"));
})
)