fiware - Why wont my widget work inside of wirecloud? -
i have made following widget using nothing html, css , js. works fine when search keywords ixist in our db (such peach or strawberry):
<!doctype html> <html> <head> <meta charset="utf-8"> <title>search seller widget</title> <meta name="viewport" content="width=device-width"> <style> #mapcanvas { width: 550px; height: 600px; float: left; border-style: solid; color: #59c0df; } #infopanel { float: left; margin-left: 10px; } #infopanel div { margin-bottom: 5px; } #tbl{ border-collapse: collapse; } #tbl, td, th{ border: 2px solid #70b8ff; padding: 5px; } th{ font-style: bold; color: black; background-color: #59c0df; } .btn { background: #3498db; background-image: -webkit-linear-gradient(top, #3498db, #2980b9); background-image: -moz-linear-gradient(top, #3498db, #2980b9); background-image: -ms-linear-gradient(top, #3498db, #2980b9); background-image: -o-linear-gradient(top, #3498db, #2980b9); background-image: linear-gradient(to bottom, #3498db, #2980b9); -webkit-border-radius: 28; -moz-border-radius: 28; border-radius: 28px; font-family: courier new; color: #ffffff; font-size: 20px; padding: 10px 20px 10px 20px; text-decoration: none; } .btn:hover { background: #3cb0fd; background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); background-image: -o-linear-gradient(top, #3cb0fd, #3498db); background-image: linear-gradient(to bottom, #3cb0fd, #3498db); text-decoration: none; } .textbox { border: 1px solid #848484; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; outline:0; height:25px; width: 120px; padding-left:10px; padding-right:10px; } </style> </head> <body onload="initialize(45.2671, 19.8335,0)"> <!--bgcolor="#e6e6fa"--> <div id="top"> <label> <input type="url" id="url" class="textbox" value=""> </label> <label> <button id="get" class="btn">get</button> </label> <label>city</label> <input type="text" id="city" class="textbox" value="" readonly> <label>company</label> <input type="text" id="company" class="textbox" value="" readonly> <label>latitude</label> <input type="text" id="lat" class="textbox" value="" readonly> <label>longitude</label> <input type="text" id="lon" class="textbox" value="" readonly> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://maps.googleapis.com/maps/api/js"></script> </br> <div id="map" style="width:500px;height:380px; border-style: solid; border-color: #3498db; display: none;"></div> </div> <div> <a href="http://www.panonit.com" target="_blank"> <img src="panonitlogo.png" alt="logo" style="width:160px;height:75px; margin-top:15px" > </a> <a href="http://www.finish-project.eu/" target="_blank"> <img src="cropped.png" alt="logo" style="width:160px;height:75px;margin-left:15px; margin-top:15px" > </a> <a href="http://ec.europa.eu/index_en.htm" target="_blank"> <img src="european.jpg" alt="logo" style="width:160px;height:75px;margin-left:15px; margin-top:15px" > </a> </div> <script> var obj; var cors_api_url = 'https://cors-anywhere.herokuapp.com/'; function docorsrequest(options, printresult) { var x = new xmlhttprequest(); x.open(options.method, cors_api_url + options.url); x.onload = x.onerror = function() { printresult( options.method + ' ' + options.url + '\n' + x.status + ' ' + x.statustext + '\n\n' + (x.responsetext || '') ); }; x.send(options.data); } // bind event (function() { var urlfield = document.getelementbyid('url'); var obj; document.getelementbyid('get').onclick = function(e) { var glat; var glon; e.preventdefault(); docorsrequest({ method: this.id = 'get', url: 'trace.panonit.com/widgets/getfieldcoordinates/' + urlfield.value }, function printresult(result) { result = result.substring(result.length, result.indexof('{')); obj = json.parse(result); var cityfield = document.getelementbyid('city'); cityfield.value = obj.city; var company = document.getelementbyid('company'); company.value = obj.company; var lat = document.getelementbyid('lat'); lat.value = obj.lat; glat = lat.value; var lon = document.getelementbyid('lon'); lon.value = obj.lon; glon = lon.value; if(obj.lat==null || obj.lon ==null) { //initialize(glat, glon); document.getelementbyid('city').value = "city not found"; document.getelementbyid('company').value = "company not found"; document.getelementbyid('lat').value = "latitude not found"; document.getelementbyid('lon').value = "longitude not found"; initialize(45.2671, 19.8335,0); } else { initialize(glat, glon,1); } }); }; })(); function initialize(lat, lon, displaymarker) { document.getelementbyid('map').style.display = ""; var mapprop = { center:new google.maps.latlng(lat,lon), zoom:5, maptypeid:google.maps.maptypeid.roadmap }; var map=new google.maps.map(document.getelementbyid("map"),mapprop); if(displaymarker==1){ var marker = new google.maps.marker({ position: new google.maps.latlng( lat,lon), animation: google.maps.animation.drop, map: map, title: 'crop marker!' }); } } </script> </body> </html> when convert widget of fispace's add on in eclipse , proceed upload in fiware lab's or fispace's wirecloud thats when shows error missing api key. got google's api key , appended so:
<script src="https://maps.googleapis.com/maps/api/js?key=aizasybgri_bkbcpzfocskneh5b5wijhuv1ykei"></script> yet still end grayed out map inside of wire-cloud. can me solve issue? thank you.
i errors due mixed content when using original html file. using "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" , "https://maps.googleapis.com/maps/api/js" loading jquery , google maps (take account s of https) fixes problem. @ least when search peach widget shows arsen agro company.
Comments
Post a Comment