www.webdeveloper.com
Results 1 to 2 of 2

Thread: Javascript - value data-* / <li>

  1. #1
    Join Date
    May 2014
    Posts
    1

    Javascript - value data-* / <li>

    Hello,

    I want to set up a personal interactive map with geolocation of the user.
    To view my card, I use the plug in FWD Megazoom.

    I use the html5 geolocation to determine the location of the user on an image.

    I have a function "calcul" that contains geolocation and a calculation to convert gps coordinates in pixel :

    Code:
    function successCallback(position){
    	
    	var LatM = position.coords.latitude;
    	var LongM = position.coords.longitude;
          document.getElementById('LatM').innerHTML = "Latitude :" + position.coords.latitude;
          document.getElementById('LongM').innerHTML = "Longitude :" +  position.coords.longitude;
          document.getElementById('prec').innerHTML = "Précision :" +  position.coords.accuracy;
          //document.getElementById('speed').innerHTML = position.coords.speed;
          
        //Upper left corner / right lower corner coordinates of my card
        var Lat1 = 43.904144;
    	var Long1 = 5.229525;
    	//alert("Longitude 1 : " + Long1);
    
    	var Lat2 = 43.925197;
    	var Long2 = 5.186051;
    	//alert("Longitude 2 : " + Long2);
    	
    	var imgwidth = 1015;
    	var imgheight = 687;
    	//alert("Size of my map : " +imgheight);
    
    	var Xstr, Ystr;
    	var X, Y;
    	Xstr = LatM;       
    	Ystr = LongM;   
    	X = parseFloat(Xstr);     
    	Y = parseFloat(Ystr);      
    	//var X = 43.845448;
    	//var Y = 5.110036;
    	//alert("Geolocalisation X : " + Xstr);
    	//alert("Geolocalisation Y : " + Y);
    	
    	//if (LongM<Long1 && LongM>Long2) {alert("you're not in the zone !");}
    	//else {Hmap= Math.abs(Long2 - Long1);}
    	Hmap = Math.abs(Long2 - Long1);
    	
    	//if (LatM<Lat1 && LatM>Lat2) {alert("you're not in the zone !");}
    	//else {Lmap= Math.abs(Lat2 - Lat1);}
    	Lmap = Math.abs(Lat2 - Lat1);
    	//alert("Lmap :" + Lmap);	
    	
    	var LPosRel = Math.abs(Y - Long1);
    	var HPosRel = Math.abs(X - Lat1);
    	//alert("HPosRel : " + HPosRel);
    	
    	var ResL = LPosRel / Hmap;
    	var ResH = HPosRel / Lmap;
    	//alert("ResH : " + ResH);
    	
    	var Lmarker = ResL * imgwidth;    // result in pixel for Marker 
    	var Hmarker = ResH * imgheight;
    	
    	document.getElementById("repereLpos").innerHTML = Lmarker;
    	document.getElementById("repereHpos").innerHTML = Hmarker;
    	
    	alert("Largeur : " + Lmarker);
    	alert("Hauteur : " + Hmarker);
    This portion of the script works !!

    Then I'd like to place Lmarker and Hmarker variables in the marker that appears like this :

    Code:
    		<ul data-markers="">
    			<li id="coo"
    			data-marker-type="tooltip"
    			data-show-content="yes"
    			data-reg-point="centerbottom"
    			data-marker-normal-state-path="marker1.png"
    			data-marker-selected-state-path="marker1-rollover.png"
    			data-marker-left="xx"      // Here -> Lmarker
    			data-marker-top="yy"      // Here -> Hmarker
    			data-marker-width="28"
    			data-marker-height="36"
    			data-show-after-zoom-factor="0"
                >
    			<div class='InfoDiv'>You are here</div>
    			</li>
    		</ul>
    To change the values ​​of data-marker-left and top, I placed my function "calcul" the following script but it does not work

    Code:
    var liste,listeLi,element;
     
    element = document.getElementById('coo');
    
    element.setAttribute("data-marker-left", "Lmarker");
    element.setAttribute("data-marker-top", "Hmarker");
    Can you help me put my variables in the list that displays my marker ?

    Thank you in advance

  2. #2
    Join Date
    Nov 2010
    Posts
    1,100
    wouldn't it be
    Code:
    element.setAttribute("data-marker-left", Lmarker);
    element.setAttribute("data-marker-top", Hmarker);
    ?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles