Safari Browser, check boxes and Nokia Maps

**Ulala** · 2012-02-28, 09:33

--- splitting from previous issue.

**karthik7452** · 2012-04-13, 10:14

Hi Jasfox...

verify this code.. still I am not getting check box in safari browser.

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=UTF-8" />
    <title>Ovi 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">
    .nm_bubble_content{
          color:black;
          background:white;
          border: 1px solid white;
          padding:0px;			  	  			  	  
    }
    
    /* 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">
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'));
document.getElementById("map").appendChild(node);

var infoBubbles = new nokia.maps.map.component.InfoBubbles();        
var     infoBubble;
var	restore_bubble = false;

var arr = new Array();
        arr.push(new nokia.maps.geo.Coordinate(52.5152, 13.380001));
        arr.push(new nokia.maps.geo.Coordinate(52.6162, 13.380341));
        arr.push(new nokia.maps.geo.Coordinate(52.5172, 13.387701));

var info = new Array();
        info.push("\"The time has come,\" the Walrus said");
        info.push("\"To talk of many things:");
        info.push("Of shoes--and ships--and sealing-wax-- Of cabbages--and kings--");

   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(),
                    infoBubbles
            ]
    });

       for (var i = 0; i < arr.length; i++){       
            var markersIconsUrl = "http://www.mobilesroom.com/wp-content/uploads/2012/01/Yahoo-Logo-Images.jpg";
            startIcon = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 20, 20, 25, 95);
            startMarker = new nokia.maps.map.Marker(arr[i], {                        
                            icon: startIcon,
                            anchor: new nokia.maps.util.Point(12, 12)

                    });
                    startMarker.html = info[i];
                    startMarker.coordinate = arr[i];
                   // alert(arr[i]);
                    startMarker.addListener("mouseover", function(evt) {
                    infoBubble = infoBubbles.addBubble(evt.target.html, evt.target.coordinate);
                    restore_bubble = true;
             });
            map.objects.add(startMarker);
       }

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

**Maveric** · 2012-04-13, 10:29

Hi there,

Please try this http://api.maps.nokia.com/2.2.0/jsl.js instead of your http://api.maps.nokia.com/2.1.1/jsl.js

Let me know how it goes?

Best Regards,
Marko

**karthik7452** · 2012-04-13, 10:50

No.. it's not working

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=UTF-8" />
    <title>Ovi 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">
    .nm_bubble_content{
          color:black;
          background:white;
          border: 1px solid white;
          padding:0px;			  	  			  	  
    }
    
    /* 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">
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'));
document.getElementById("map").appendChild(node);

var infoBubbles = new nokia.maps.map.component.InfoBubbles();        
var     infoBubble;
var	restore_bubble = false;

var arr = new Array();
        arr.push(new nokia.maps.geo.Coordinate(52.5152, 13.380001));
        arr.push(new nokia.maps.geo.Coordinate(52.6162, 13.380341));
        arr.push(new nokia.maps.geo.Coordinate(52.5172, 13.387701));

var info = new Array();
        info.push("\"The time has come,\" the Walrus said");
        info.push("\"To talk of many things:");
        info.push("Of shoes--and ships--and sealing-wax-- Of cabbages--and kings--");

   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(),
                    infoBubbles
            ]
    });

       for (var i = 0; i < arr.length; i++){       
            var markersIconsUrl = "http://www.mobilesroom.com/wp-content/uploads/2012/01/Yahoo-Logo-Images.jpg";
            startIcon = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 20, 20, 25, 95);
            startMarker = new nokia.maps.map.Marker(arr[i], {                        
                            icon: startIcon,
                            anchor: new nokia.maps.util.Point(12, 12)

                    });
                    startMarker.html = info[i];
                    startMarker.coordinate = arr[i];
                   // alert(arr[i]);
                    startMarker.addListener("mouseover", function(evt) {
                    infoBubble = infoBubbles.addBubble(evt.target.html, evt.target.coordinate);
                    restore_bubble = true;
             });
            map.objects.add(startMarker);
       }

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

**Maveric** · 2012-04-13, 11:31

Ok thanks for the update - looking to this right now - back as soon as I can.

best
Marko

**jasfox** · 2012-04-13, 16:36

Your problem is that you are adding the checkbox before the map has been initialised.

The line:

Code:

document.getElementById("map").appendChild(node);

must be after

Code:

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(),
infoBubbles
]
});

or else the checkbox is displayed behind the map.

**karthik7452** · 2012-04-17, 06:11

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 agin.

**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.

**Ulala** · 2012-03-07, 14:00

Hi,

In safari Browser, wherever the web page having check boxes, they are not displaying by displaying Nokia maps. No Errors are appearing. Please tell me what is the problem. In other browsers check boxes are displaying?

**jasfox** · 2012-03-08, 10:25

Originally Posted by Ulala

Hi,

In safari Browser, wherever the web page having check boxes, they are not displaying by displaying Nokia maps. No Errors are appearing. Please tell me what is the problem. In other browsers check boxes are displaying?

There is no known issue with displaying the map in safari with check boxes. Indeed I've just run a test example with a map and check boxes and it displays fine. My guess is that in your CSS you are styling the checkboxes to display behind the map due to a CSS quirk on Safari or something. Assuming there is no more obvious cause, the following debug procedure should help.

Try running your documents through a prettifier such as HTML tidy http://infohound.net/tidy/
Ensure the mark up is valid before assuming the API is at fault. e.g. http://validator.w3.org/
Slowly remove all CSS styling until the problem goes away.
Start off by just displaying a simple map (with no markers or anything fancy) and make sure you use var when defining the map.

Personally I had no styling on the checkboxes and I was using the following style for the map

Code:

<div id="map" style=" width: 50%; height: 50%; position: absolute;">

**Ulala** · 2012-03-09, 09:17

Hi,

Check-boxes not displaying in safari version 5.0.5 : I tested this issue in a seperate HTML file, I think almost the problem is in JS file (i.e., <script src="http://api.maps.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script> ). Here I commented this JS file then the check box is displaying in safari 5.0.5. Please check again using this below code and remove comment for JS file before checking.

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=UTF-8" />
    <title>Ovi 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">
    .nm_bubble_content{
              color:black;
              background:white;
              border: 1px solid white;
              padding:0px;			  	  			  	  
    }
    </style>
  </head>
<body>
<div id="map" style="z-index: -1; left:0px; top:0px; width: 50%; height: 50%; position: absolute;"></div>
<script type="text/javascript">       
        
var infoBubbles = new nokia.maps.map.component.InfoBubbles();        
var     infoBubble;
var	restore_bubble = false;

var arr = new Array();
        arr.push(new nokia.maps.geo.Coordinate(52.5152, 13.380001));
        arr.push(new nokia.maps.geo.Coordinate(52.6162, 13.380341));
        arr.push(new nokia.maps.geo.Coordinate(52.5172, 13.387701));

var info = new Array();
        info.push("\"The time has come,\" the Walrus said");
        info.push("\"To talk of many things:");
        info.push("Of shoes--and ships--and sealing-wax-- Of cabbages--and kings--");

   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(),
                    infoBubbles
            ]
    });

       for (var i = 0; i < arr.length; i++){       
            var markersIconsUrl = "http://www.mobilesroom.com/wp-content/uploads/2012/01/Yahoo-Logo-Images.jpg";
            startIcon = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 20, 20, 25, 95);
            startMarker = new nokia.maps.map.Marker(arr[i], {                        
                            icon: startIcon,
                            anchor: new nokia.maps.util.Point(12, 12)

                    });
                    startMarker.html = info[i];
                    startMarker.coordinate = arr[i];
                   // alert(arr[i]);
                    startMarker.addListener("mouseover", function(evt) {
                    infoBubble = infoBubbles.addBubble(evt.target.html, evt.target.coordinate);
                    restore_bubble = true;
             });
            map.objects.add(startMarker);
       }

</script>
<input type="checkbox" name="chk" id="chk"/>Check box display here</body>
</html>

**jasfox** · 2012-03-09, 10:40

Your issue is not related to the use of the API, but is merely a CSS styling issue. If you wish to support this specific version of the safari browser, you may have to add some safari specific CSS. The discussions on this board are related to the use of the Nokia Maps API itself, and not about general CSS styling issues.

It appears that you seem to be trying to place the checkbox over the map - I would suggest the best way to do this to ensure cross browser compatibility would be to inject the checkbox as a DOM element using the appendChild functionality. If however you merely wish to display a checkbox and a map on the same page then just split the mark up into separate DIVs and style the page so they don't overlap.

**Ulala** · 2012-03-09, 12:04

Hi,

Please if you don't mind, If I am not applying any safari specific css styles, then checkbox is displaying in Safari browser, when we not including the JS file. [<script src="http://api.maps.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script>].

If only when we include the JS file related to the Nokia Maps API , the checkbox is disappearing.

I am just using <input type ="checkbox" name="chk" id="chk"/>. In this below code, checkbox is not overlapping on the map. Please go through once.

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=UTF-8" />
    <title>Ovi 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">
    .nm_bubble_content{
              color:black;
              background:white;
              border: 1px solid white;
              padding:0px;			  	  			  	  
    }
    
    /* common settings checkbox and radiobutton */
    input[type="checkbox"],
    input[type="radio"]
    {
     -khtml-appearance: none;
     width: 20px;
     height: 20px;
     vertical-align: middle;
    }
    </style>
  </head>
<body>
    <span style="float:left"><input type="checkbox" name="chk" id="chk"/>
Check box display here</span>
<div id="map" style="z-index: -1; left:0px; top:50px; width: 50%; height: 50%; position: absolute;"></div>

<script type="text/javascript">       
        
var infoBubbles = new nokia.maps.map.component.InfoBubbles();        
var     infoBubble;
var	restore_bubble = false;

var arr = new Array();
        arr.push(new nokia.maps.geo.Coordinate(52.5152, 13.380001));
        arr.push(new nokia.maps.geo.Coordinate(52.6162, 13.380341));
        arr.push(new nokia.maps.geo.Coordinate(52.5172, 13.387701));

var info = new Array();
        info.push("\"The time has come,\" the Walrus said");
        info.push("\"To talk of many things:");
        info.push("Of shoes--and ships--and sealing-wax-- Of cabbages--and kings--");

   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(),
                    infoBubbles
            ]
    });

       for (var i = 0; i < arr.length; i++){       
            var markersIconsUrl = "http://www.mobilesroom.com/wp-content/uploads/2012/01/Yahoo-Logo-Images.jpg";
            startIcon = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 20, 20, 25, 95);
            startMarker = new nokia.maps.map.Marker(arr[i], {                        
                            icon: startIcon,
                            anchor: new nokia.maps.util.Point(12, 12)

                    });
                    startMarker.html = info[i];
                    startMarker.coordinate = arr[i];
                   // alert(arr[i]);
                    startMarker.addListener("mouseover", function(evt) {
                    infoBubble = infoBubbles.addBubble(evt.target.html, evt.target.coordinate);
                    restore_bubble = true;
             });
            map.objects.add(startMarker);
       }

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

**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>

Discussion Board

Thread: Safari Browser, check boxes and Nokia Maps

Thread Tools

Search Thread

Rate This Thread

Display

Hybrid View

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