×

Discussion Board

Results 1 to 5 of 5
  1. #1
    Registered User
    Join Date
    Mar 2012
    Posts
    5

    How to change ZoomBar position in the map

    Hi,
    I have recently upgraded my app from Ovi Map Api to the new Nokia.map api and noticed that the zoomBar is actually being placed on the right side of the map instead of left. Is there a way to customize that?

    Thanks

  2. #2
    Nokia Developer Moderator
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    288

    Re: How to change ZoomBar position in the map

    Currently you'll have to do this by manipulating the CSS of the appropriate DOM element.

    There are two levels of control you might want to use whilst doing this. If you need absolute control, you could find the element you want to use (by using FireBug for instance). For the zoombar this is held in nm_zoomWrap You could then programmatically alter the CSS style yourself

    Code:
    document.getElementsByClassName("nm_zoomWrap")[0].style.top = "0"
    document.getElementsByClassName("nm_zoomWrap")[0].style.left = "-1000px"
    document.getElementsByClassName("nm_zoomWrap")[0].style.position = "relative"
    The API already defines two style classes nm_left and nm_right, so you can also shift the zoom bar through updating the style class of the zoombar element.

    Code:
    document.getElementsByClassName("nm_zoomWrap")[0].className  = "nm_zoomWrap nm_wrap nm_left"
    document.getElementsByClassName("nm_zoomWrap")[0].className  = "nm_zoomWrap nm_wrap nm_right"
    As you have noticed there are currently no methods in the API itself to move the zoom bar component around. It is expected that the API will be introducing a convenience method to do this in a version in the near future.

  3. #3
    Registered User
    Join Date
    Mar 2012
    Posts
    5

    Re: How to change ZoomBar position in the map

    Thank you very much. Hopefully the method will be implemented soon.

  4. #4
    Registered User
    Join Date
    Dec 2012
    Posts
    2

    Re: How to change ZoomBar position in the map

    Any more news on when this might get added to the api? Also I seem to get a different zoom control in IE compared to Firefox, the IE one appears on the left and is larger, whilst in Firefox I am just getting simple + and - buttons on the right. The IE zoom bar is positioned quite far from the left edge so I would like to move it further left.

  5. #5
    Nokia Developer Moderator
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    288

    Re: How to change ZoomBar position in the map

    Quote Originally Posted by islands View Post
    The IE zoom bar is positioned quite far from the left edge so I would like to move it further left.
    The current +/- zoom bar is displayed on the right in current browsers, but the old legacy zoom bar on the left is used by older browsers such as IE7
    to maintain backward compatibility where possible. IE7 currently represents under 3% of browser usage.

    To use the current zoom bar, ensure that you have the following <meta> tag in the <head> of your page
    Code:
    <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9"/>
    If you have IE8 also ensure that you are not forcing the page to render as IE7 through invoking developer tools (F12) -> browser mode.

    The "trick" to move the current zoom bar has been described earlier in the thread.

Similar Threads

  1. change position in form
    By mohit28garg in forum Mobile Java General
    Replies: 0
    Last Post: 2010-03-13, 07:00
  2. change the position of a listbox...
    By nital_shah in forum Symbian
    Replies: 14
    Last Post: 2009-10-07, 13:58
  3. How to change position of ScrollBar?
    By zhangwei_Nirvana in forum Symbian User Interface
    Replies: 1
    Last Post: 2009-06-12, 14:33
  4. Change icon position
    By ajsanchez in forum Symbian
    Replies: 3
    Last Post: 2006-03-19, 20:01

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •