Safari Browser, check boxes and Nokia Maps

**jasfox** · 2012-04-17, 13:53

Originally Posted by karthik7452

Hi,
I changed the code as you said, but it is not displaying. I am using Windows 7 Safari 5.0.5 browser. Please check once again.

The following code works with my version of Safari (obviously you'll need your own appId and token)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
  <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />

  <title>Nokia Maps API Example</title>
  <script src="http://api.maps.nokia.com/2.2.0/jsl.js" type="text/javascript" charset="utf-8">
</script>
  <style type="text/css">
/*<![CDATA[*/
    /* common settings checkbox and radiobutton */
    input[type="checkbox"]
    {
         -khtml-appearance: visual;
         width: 20px;
         height: 20px;
         vertical-align: middle;
    }
  /*]]>*/
  </style>
</head>

<body>
  <span id="nm_tooltip" style="float:left"><input type="checkbox" name="chk" id=
  "chk" /></span> Check box display here

  <div id="map" style=
  "z-index: -1; left:0px; top:50px; width: 50%; height: 50%; position: absolute;">
  </div><script type="text/javascript">
//<![CDATA[
  /////////////////////////////////////////////////////////////////////////////////////
  // Don't forget to set your API credentials
  //
  // Replace with your appId and token which you can obtain when you 
  // register on http://api.developer.nokia.com/ 
  //
			nokia.Settings.set( "appId", "YOUR APP ID GOES HERE"); 
			nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
  //                      
  /////////////////////////////////////////////////////////////////////////////////////   
        
        
        
  var node = document.createElement("span");

  node.id = 'nm_tooltip';
  node.style.top = 0;
  node.style.left = 0;
  node.style.position="absolute";
  node.style.color = "blue";

  var checkBox =  document.createElement("input");
  checkBox.style.zorder = -1;
  checkBox.type="checkbox";
  node.appendChild(checkBox);
  node.appendChild(document.createTextNode('Check box 2 display here'));

/// Initialise the map.
   var map = new nokia.maps.map.Display(
    document.getElementById("map"),
    {
    'zoomLevel': 4,
    'center': [52.5152, 13.380001],
            components: [ 
                    new nokia.maps.map.component.Behavior(),
                            new nokia.maps.map.component.ZoomBar(),
                            new nokia.maps.map.component.TypeSelector()
            ]
    });
 //  add the node.   
    document.getElementById("map").appendChild(node);

  //]]>
  </script>
</body>
</html>

see the attachment for the result.

**karthik7452** · 2012-04-17, 14:24

Hi Jasfox,

I applied APPID and Token to the below code, then Check box is displaying by using 2.1.1 version. Its fine. But Map is not displaying. Please check this below code...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
  <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />

  <title>Nokia Maps API Example</title>
  <script src="http://api.maps.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8">
</script>
  <style type="text/css">
/*<![CDATA[*/
    /* common settings checkbox and radiobutton */
    input[type="checkbox"]
    {
         -khtml-appearance: visual;
         width: 20px;
         height: 20px;
         vertical-align: middle;
    }
  /*]]>*/
  </style>
</head>

<body>
  <span id="nm_tooltip" style="float:left"><input type="checkbox" name="chk" id=
  "chk" /></span> Check box display here

  <div id="map" style=
  "z-index: -1; left:0px; top:50px; width: 50%; height: 50%; position: absolute;">
  </div><script type="text/javascript">
//<![CDATA[
  /////////////////////////////////////////////////////////////////////////////////////
  // Don't forget to set your API credentials
  //
  // Replace with your appId and token which you can obtain when you 
  // register on http://api.developer.nokia.com/ 
  //
			nokia.Settings.set( "appId", "your appid goes here"); 
			nokia.Settings.set( "authenticationToken", "your authentication token goes here");
  //                      
  /////////////////////////////////////////////////////////////////////////////////////    
  var node = document.createElement("span");

  node.id = 'nm_tooltip';
  node.style.top = 0;
  node.style.left = 0;
  node.style.position="absolute";
  node.style.color = "blue";

  var checkBox =  document.createElement("input");
  checkBox.style.zorder = -1;
  checkBox.type="checkbox";
  node.appendChild(checkBox);
  node.appendChild(document.createTextNode('Check box 2 display here'));

/// Initialise the map.
   var map = new nokia.maps.map.Display(
    document.getElementById("map"),
    {
    'zoomLevel': 4,
    'center': [52.5152, 13.380001],
            components: [ 
                    new nokia.maps.map.component.Behavior(),
                            new nokia.maps.map.component.ZoomBar(),
                            new nokia.maps.map.component.TypeSelector()
            ]
    });
 //  add the node.   
    document.getElementById("map").appendChild(node);

  //]]>
  </script>
</body>
</html>

**jasfox** · 2012-04-17, 14:35

The map will not display for you since you haven't replaced the appId and token as I stated in the previous post:

Originally Posted by jasfox

The following code works with my version of Safari (obviously you'll need your own appId and token)

Also the version of the authentication is for 2.2.0, not 2.1.1

Try replacing:

Code:

<script src="http://api.maps.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script>

with

Code:

<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.0/jsl.js?with=all"></script>

**karthik7452** · 2012-04-17, 14:44

Yes. Here I checked the same in safari 5.1.2 version In this version it is working fine. I need to dispaly the map and checkbox in safari 5.0.5 version.

**jasfox** · 2012-04-17, 15:19

Hmmm, it could be a bug in the specific obsolete version of the browser you are looking at. Even if you assume all Safari users are Windows users (which they aren't), Safari 5.0.5 currently holds 8% of 9% of the browser market which is approximately 3/4 of one percent of all web users (and dropping), so it might not be worth the effort to track down a solution for this one specific browser version.

Here is an alternative - try the following RESTful Map API code, again it displays fine in 5.1.2

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
  <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />

  <title>Nokia Maps API Example</title>

  <style type="text/css">
/*<![CDATA[*/
    /* common settings checkbox and radiobutton */
    input[type="checkbox"]
    {
         -khtml-appearance: visual;
         width: 20px;
         height: 20px;
         vertical-align: middle;
    }
  /*]]>*/
  </style>
</head>

<body>
  <span id="nm_tooltip" style="float:left">

<div id="map">
  <img src="http://m.nok.it/?c=50.5,15.5&amp;h=334&amp;w=540&amp;z=4&amp;nord&amp;nodot&amp;sb=k " alt="Map of Europe" />
 </div>
<script type="text/javascript">
//<![CDATA[

  var node = document.createElement("span");

  node.id = 'nm_tooltip';
  node.style.top = 0;
  node.style.left = 0;
  node.style.position="absolute";
  node.style.color = "blue";

  var checkBox =  document.createElement("input");
  checkBox.style.zorder = -1;
  checkBox.type="checkbox";
  node.appendChild(checkBox);
  node.appendChild(document.createTextNode('Check box 2 display here'));

 //  add the node.   
    document.getElementById("map").appendChild(node);

  //]]>
  </script>
</body>
</html>

If you are still having problems with 5.0.5, then it must be purely a JavaScript engine bug.

**karthik7452** · 2012-04-17, 15:31

Ok. Fine. Now in safari 5.0.5 also it's working... Thanks for your effort..

**karthik7452** · 2012-05-19, 13:01

it's not working any one reply...

**karthik7452** · 2012-05-19, 13:29

I am working with this not working..

any check and help me.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />

<title>Nokia Maps API Example</title>
<script src="http://api.maps.nokia.com/2.2.0/jsl.js" type="text/javascript" charset="utf-8">
</script>
<style type="text/css">
/*<![CDATA[*/
/* common settings checkbox and radiobutton */
input[type="checkbox"]
{
-khtml-appearance: visual;
width: 20px;
height: 20px;
vertical-align: middle;
}
/*]]>*/
</style>
</head>

<body>
<span id="nm_tooltip" style="float:left"><input type="checkbox" name="chk" id=
"chk" /></span> Check box display here

<div id="map" style=
"z-index: -1; left:0px; top:50px; width: 50%; height: 50%; position: absolute;">
</div><script type="text/javascript">
//<![CDATA[
/////////////////////////////////////////////////////////////////////////////////////
// Don't forget to set your API credentials
//
// Replace with your appId and token which you can obtain when you
// register on http://api.developer.nokia.com/
//
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
//
/////////////////////////////////////////////////////////////////////////////////////

var node = document.createElement("span");

node.id = 'nm_tooltip';
node.style.top = 0;
node.style.left = 0;
node.style.position="absolute";
node.style.color = "blue";

var checkBox = document.createElement("input");
checkBox.style.zorder = -1;
checkBox.type="checkbox";
node.appendChild(checkBox);
node.appendChild(document.createTextNode('Check box 2 display here'));

/// Initialise the map.
var map = new nokia.maps.map.Display(
document.getElementById("map"),
{
'zoomLevel': 4,
'center': [52.5152, 13.380001],
components: [
new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.TypeSelector()
]
});
// add the node.
document.getElementById("map").appendChild(node);

//]]>
</script>
</body>
</html>

Discussion Board

Thread: Safari Browser, check boxes and Nokia Maps

Thread Tools

Search Thread

Rate This Thread

Display

Similar Threads

Export TC TrustCenter certificate from safari browser

Check Boxes Not Appearing

UID for KHTML-Safari Browser

list box with check boxes ???

Posting Permissions