I have setup the following osm map with the below codes. I want the contents div to appear below the zoom icon but it doesnt seem to appear. Also when I run this function var setUpdateTimer = setInterval(function() { updateTimer(); },1000); the zoom icon disappear. I would to update the span box to show in how many seconds it will refresh the map. How make the span appear?

function init() {
             map = L.map('map');

             L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
                maxZoom: 18
             }).addTo(map);

             var test1 = new L.LatLng(-1.935114,30.082111); // geographical point (longitude and latitude)
             map.setView(test1, 13);
           var contents = document.createElement("div");
                             contents.style.width="300px";
                             contents.style.height="10px";
                             contents.style.top="100px";
                             //contents.style.margin="30px";


                             contents.innerHTML="<span style='z-index:5;position: absolute;padding: 12px 12px;background-color:white;border: 2px solid rgba(0,0,0,.15);border-radius: 2px;font-size: 14px;' id='counter' name='counter'>10 Seconds</span>";
                             document.getElementById('map').appendChild(contents);
    }


function updateTimer(){
            countUp++;
            countDown=refreshRate-countUp;

            var list = document.getElementById("map");

                            // If the <ul> element has any child nodes, remove its first child node
                            if (list.hasChildNodes()) {
                               var parent = document.getElementById("map");
                                    var child = parent.children[1];
                                    var childval = child.innerHTML;
                                    //document.getElementById("output").innerHTML=childval;
                                    //alert("childValue:"+childval);
                                    parent.children[1].innerHTML="<span style='z-index:5;position: absolute;padding: 12px 12px;background-color:white;border: 2px solid rgba(0,0,0,.15);border-radius: 2px;font-size: 14px;' id='counter' name='counter'>"+countDown+" Seconds</span>";
                            }
            //alert("test : "+document.getElementById("form2").elements["counter"].innerHTML);
            if(refreshRate==countUp){
               //alert("TEST");
               var list = document.getElementById("map");

                            // If the <ul> element has any child nodes, remove its first child node
                            if (list.hasChildNodes()) {
                               var parent = document.getElementById("map");
                                    var child = parent.children[1];
                                    var childval = child.innerHTML;
                                    //document.getElementById("output").innerHTML=childval;
                                    //alert("childValue:"+childval);
                                    parent.children[1].innerHTML="<span style='z-index:5;position: absolute;padding: 12px 12px;background-color:white;border: 2px solid rgba(0,0,0,.15);border-radius: 2px;font-size: 14px;' id='counter' name='counter'>"+refreshRate+" Seconds</span>";
                                countUp=0;
                                countDown=0;
                            }

            }


        }

asked 29 Aug '17, 21:01

newbie14's gravatar image

newbie14
319912
accept rate: 0%

edited 30 Aug '17, 08:03

scai's gravatar image

scai ♦
31.0k18278434

1

This question is better suited for http://stackoverflow.com/ since it is mainly about Leaflet and HTML but not about OSM.

(30 Aug '17, 08:04) scai ♦
Be the first one to answer this question!
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:

×54
×3

question asked: 29 Aug '17, 21:01

question was seen: 569 times

last updated: 30 Aug '17, 09:52

powered by OSQA