This is a migrated thread and some comments may be shown as answers.

Pan/Zoom Control

4 Answers 41 Views
Map
This is a migrated thread and some comments may be shown as answers.
Matthew
Top achievements
Rank 1
Matthew asked on 28 Apr 2015, 09:34 PM
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.

4 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 30 Apr 2015, 03:38 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Matthew
Top achievements
Rank 1
answered on 30 Apr 2015, 03:57 PM
I had found those examples but was trying to figure out how to do it within the .Controls() of the MVC Razor View
0
Matthew
Top achievements
Rank 1
answered on 30 Apr 2015, 04:10 PM

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?

0
T. Tsonev
Telerik team
answered on 04 May 2015, 02:42 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Map
Asked by
Matthew
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Matthew
Top achievements
Rank 1
Share this question
or