Pan/Zoom Control

[Matthew]

Is there a way on a @(Html.Kendo().Map() to set the size of the pan and zoom controls on a map.  Also how do you change the controls locations.

[T. Tsonev]

Hello,

The map controls can be placed on any of the four corners of the map with configuration.
They're are standard HTML elements and can be styled additionally to change their appearance or size.

I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Matthew]

I had found those examples but was trying to figure out how to do it within the .Controls() of the MVC Razor View

[Matthew]

I think what I'm looking for is how do I set a style if my code looks like this:

@using (Html.BeginForm()) {
    @(Html.Kendo().Map()
              .Name("map")
              .Center(41.668107, -95.744821)
              .Zoom(5)
                 .Events(events => events
                          .Click("onClick")
      )
              .Layers(layers => {
                  layers.Add()
                      .Type(MapLayerType.Tile)
                      .UrlTemplate("http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png")
                      .Subdomains("a", "b", "c")
                      .Attribution("© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>");
              })
              .Markers(markers => {
                  foreach (var site in Model) {
                      if (@Model != null) {
                          double[] locationInfo = new[] { Convert.ToDouble(site.Lat), Convert.ToDouble(site.Lng) };
                          markers.Add()
                              .Location(locationInfo)
                              .Shape(site.SiteColor)
                              .Title(site.SiteName)
                              .Tooltip(tooltip => tooltip.Content(site.Company + "<br/>" + site.SiteName + "<br/>" + site.SiteAddress));
                      }
                  }
              })
    )

}

How would I add a style to the Navigator to make display larger?

[T. Tsonev]

Hello,

There are no styling primitives in the helpers. Styling tweaks has to be done through CSS.
For example, to make the navigator larger you need to style the individual elements:
    <style>
      .k-map-controls .k-navigator {
        width: 100px;
        height: 100px;
      }
      
      div.k-navigator .k-button {
        padding: 8px;
     }
      
      div.k-navigator .k-navigator-n {
        margin-left: -17px;
      }
      
      div.k-navigator .k-navigator-e {
        margin-top: -17px;
      }
      
      div.k-navigator .k-navigator-s {
        margin-left: -17px;
      }
      
      div.k-navigator .k-navigator-w {
        margin-top: -17px;
      }
    </style>

I hope this helps.

Regards,
T. Tsonev
Telerik