Pan/Zoom Control

5 posts, 0 answers
  1. Matthew
    Matthew avatar
    5 posts
    Member since:
    Jul 2014

    Posted 28 Apr 2015 Link to this post

    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.
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 30 Apr 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Matthew
    Matthew avatar
    5 posts
    Member since:
    Jul 2014

    Posted 30 Apr 2015 in reply to T. Tsonev Link to this post

    I had found those examples but was trying to figure out how to do it within the .Controls() of the MVC Razor View
  5. Matthew
    Matthew avatar
    5 posts
    Member since:
    Jul 2014

    Posted 30 Apr 2015 Link to this post

    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?

  6. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 04 May 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready