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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(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

Razor
 
             @(Html.Kendo().Map()
               .Name("map")
               .Layers(layers =>
               {
                  layers.Add()
                    .Type(MapLayerType.Marker)
                    .Tooltip(tooltip => tooltip.Content("City X"));
                })
             )