Issue with "ZoomBar" component display

**jkemailtest** · 2012-11-20, 15:38

I have pieced together a map where I pass in a string of addresses and it creates markers for the various locations. For UI tools/components I have only added the following:

components: [
new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.ZoomBar()
]

This works and displays properly on my development server but when I publish the same exact code to my production server the map still pulls up the locations but also has what appears to be an extra layer over the top and right side of the map that displays a black box across the top 25% of the map and the following string 5 times with the last number incrementing each time along the right:

"__i18n_ovi.service.map_t17__"
"__i18n_ovi.service.map_t18__"
"__i18n_ovi.service.map_t19__"

...and so on.

If I remove the ZoomBar() from the components list the extra layer disappears and the map is clean and functional but obviously does not have the visible ZoomBar which my users would like to see, especially if they do not have a scroll wheel to zoom with on their mouse or laptop.

I would be glad to post a small screen shot but my forum permissions state I cannot add an attachment.

Any idea why the ZoomBar would display properly on one server and not another?

Thanks!

**jasfox** · 2012-11-21, 10:50

That's a difficult one to diagnose without pictures -could you try posting some code instead?

My guess is that this is a browser/HTML valdiation issue. Firstly if you are testing on IE, ensure the following line is in the<head>

Code:

<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />

Secondly, try validating your HTML using something like: http://infohound.net/tidy/, if you have an unclosed <div> on your page different browsers will treat this in different ways. For the Zoombar and other visible controls, the API is injecting various html elements into the DOM - the effect of using invalid HTML will be to display the controls incorrectly.

**jkemailtest** · 2012-11-30, 20:11

Jason,

Thank you for your time in looking at this issue.

You are correct in that I am using IE and I have the <meta> tag you referenced in my <head> tag.
I will try the validation link you added as well but I use the same browser to view both the development server and live server so I don't know why the same page would display differently just because it is hosted in another location.

Here is a screen shot of the issue:

http://i.imgbox.com/adqoKHXs.png

Any ideas?

**jkemailtest** · 2012-12-19, 14:48

Anyone have any ideas why the map works in the same browser on the same computer when I am accessing it from one server but then does not work properly when accessing the same page on another server?

Thanks again!

**jasfox** · 2012-12-20, 13:12

Hmmm, very tricky without analysing your server set up and the code. It appears that for some reason, the labels for the localization of the API are not being downloaded. Here are a series of suggestions.(of increasing difficulty)

1) Try loading the basic example with components here, and see if it causes you the same error. A copy of this example can be used as a basis for further discussion
and removes any doubt as to where the issue lies.
2) Try making a local copy of the "basic example with components " example and see what happens when accessed as a local file and when hosted on your server.
3) Try forcing the language to German say, by adding the following line after your app id and token:

Code:

nokia.Settings.set("defaultLanguage", "de-DE");

4) Open the example localhost and on the server in Google Chrome , press F12 to open the debugger and press the Scripts tab then reload the page, you should see a language-en-US.js script being loaded. This holds the missing texts.

chrome-debug.jpg

For each of these ensure that the local cache has been cleared so that there aren't any side effects from residual code.

If for some reason your server or a proxy is blocking the language-en-US.js script then this is potentially the cause of your problem.

**r60600** · 2012-12-21, 05:52

Had better give more code.

**r60600** · 2012-12-21, 06:07

I think it's a javascript runtime error.

**jasfox** · 2013-01-03, 10:35

Originally Posted by jkemailtest

Anyone have any ideas why the map works in the same browser on the same computer when I am accessing it from one server but then does not work properly when accessing the same page on another server?

On further investigation, I think I've cracked this. I think you must be testing your map using Internet Explorer, and the browser has been forced into quirks mode somehow.

The API does not support quirks mode since by definition it doesn't support web standards. It only exists in order to avoid “breaking” pages authored according to practices that were prevalent in the late 1990s.

I can deliberately "break" the map by forcing Internet explorer into quirks mode (try your working local map in IE 8, press F12 and set Document Mode:Quirks)

The MSDN blog explains which mode the browser will use. It is likely your rogue server is somehow forcing browsers into using quirks. If you set up the server to use standards mode all will be well.

**jkemailtest** · 2013-01-08, 22:05

Originally Posted by jasfox

On further investigation, I think I've cracked this.

That was it! After following the flowchart in the MSDN blog you provided I was able to have the page change the mode in the browser and the zoombar displayed properly.

Thanks again!

Discussion Board

Thread: Issue with "ZoomBar" component display

Thread Tools

Search Thread

Rate This Thread

Display

Similar Threads

self-signed SIS pops "unable to install, component already built-in", using plugin

[Moved] "Unable to install. Component is built in." on N86 8mp nokia phone

[moved] "unable to install. component is already built in" message on emulator.

Self-signed application error :"Unable to install. Component is built-in"

change the display "Options" and "Cancel"

Posting Permissions