javascript - Logo disappears in fullscreen mode -
i have added logo map when open map in full screen logo disappears. have tried change css full screen mode. using 1 leaflet. far couldn't find cause.
$(document).ready( function init() { // initiate leaflet map var map = new l.map('map', { center: [51, 9], zoom: 4, minzoom: 3, maxzoom: 18 }); //load basemap var osm = new l.tilelayer('http://a{s}.acetate.geoiq.com/tiles/acetate-hillshading/{z}/{x}/{y}.png', { attribution: '© <a href="http://www.openstreetmap.org/copyright">openstreetmap</a>' }).addto(map); //load data cartodb var layerurl = 'http://xyz.cartodb.com/api/v2/viz/0931f2164e4-76f8-1190d/viz.json'; cartodb.createlayer(map, layerurl) .addto(map) .on('done', function() {}).on('error', function() {}); }; // create fullscreen button , add map l.control.fullscreen({ position: 'topleft', // change position of button can topleft, topright, bottomright or bottomleft, defaut topleft title: 'open fullscreen', // change title of button, default full screen titlecancel: 'exit fullscreen mode', // change title of button when fullscreen on, default exit full screen content: null, // change content of button, can html, default null (in case chnaged in css) forceseparatebutton: true }).addto(map); // events fired when entering or exiting fullscreen. map.on('enterfullscreen', function() { console.log('entered fullscreen'); }); map.on('exitfullscreen', function() { console.log('exited fullscreen'); });<html> <head> <meta charset="utf-8"> <title>karte</title> <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" type="text/css"> <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js" type="text/javascript"></script> <style type="text/css"> html, body { width: 100%; height: 100%; padding: 0; margin: 0; } #cartodb-map { width: 100%; height: 100%; background: black; z-index: 1; } #logo { width: 7%; height: 4%; position: absolute !important; bottom: 1%; left: 1%; z-index: 2147483647; opacity: 0.75; } </style> <!-- load java script --> <script language="javascript" type="text/javascript" src="script.js"></script> <!-- css --> <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" type="text/css"> <!-- fullscreen button--> <link rel="stylesheet" href="/control.fullscreen.css" type="text/css"> <script src="control.fullscreen.js" type="text/javascript"> </script> <!-- logo--> </head> <body> <img id="logo" src="img/imm_infinto.png" alt="logo"> <!-- load map --> <div id='map'></div> <div onload="init()"></div> </body> </html>
Comments
Post a Comment