Inconsistent height of google traffic map - javascript

I am trying to adjust the height of a google traffic map using JQuery.
This is how the map is initialized (TrafficMapController):
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 50.1795159, lng: 9.040013600000066}
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}
The above is executed as it is described in the documentation:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXOgZ5cNqC4XNZIi4OjZzoMANgDnA3Tb0&callback=initMap"></script>
This is the adjustment of the height which is being executed after the map is loaded (DashboardController):
$(document).ready(function resizeGoogleMap() {
var bodyheight = $('body').height();
var headerHeight = $('#page-header').height();
$('#map').css('height', bodyheight - headerHeight);
})
Complete Html:
<html>
<head>
<script src="../frameworks/jquery/jquery-3.2.1.js"></script>
<script src="../frameworks/bootstrap/js/bootstrap.min.js"></script>
<script defer src="../js/TrafficMapController.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXOgZ5cNqC4XNZIi4OjZzoMANgDnA3Tb0&callback=initMap"></script>
<script defer src="../js/DashboardController.js"></script>
<link rel="stylesheet" href="../frameworks/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/dashboard.css">
</head>
<body>
<div class="container-fluid">
<div class="row page-header" id="page-header">
<div class="col-md-4 col-lg-4"></div>
<div class="col-md-4 col-lg-4">
<p>Info-Dashboard</p>
</div>
<div class="col-md-4 col-lg-4" id="refresh">
<p id="a">Aktualisierung in </p><p id="timer-count">300</p><p id="a"> Sekunden</p>
</div>
</div>
<div class="row">
<div class="col-md-4 col-lg-4 info-item1">
<div id="map"></div>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
overflow: hidden;
}
.page-header {
background-color: #b3b3b3;
color: white;
text-align: center;
font-size: 40pt;
}
.info-item1 {
padding: 0;
height: auto;
}
#refresh {
color: white;
font-size: 20pt;
vertical-align: baseline;
display: inline;
}
#timer-count {
display: inline;
}
#a{
display: inline;
line-height: 77pt;
}
My problem is, that the resizing only works correctly sometimes and I am not able to figure out why.
Sometimes when the page is reloaded, the heigth of the map is correct and does fit on the page as desired, some other times the height is either too small or too big.
I would appreciate if someone could explain why this is happening.
Cheers.

I know you're trying to have the #map div height automatically calculate depending on the body height but keep things things in mind:
Always set the map div's height to something. Usually it's 100% or a default would work too. #map { height: 100% }
If you want to re-adjust the height when a user resizes your window, you need to place your resizeGoogleMap() not only on document ready, but also on a window resize event like window.onresize = function(event)
If you want to resize the map height to make it responsive for mobile, just use media queries. #media only screen and (max-width: 632px) { #map { height: 100px; } }
The code you gave is actually still not minimal and complete. When asking questions here, always try to provide fully working code in a minimal environment. You can get rid of your other links to controllers, etc. Here's the jsfiddle of some of your code in a minimal and complete example.

Related

How to make SVG map zoomable and scrollable?

I am working on a website with a custom SVG map on the home page.
I already created a map with interactive points (usual link tags), which works pretty well. But the problem here is that map is big and needs to be larger then a screen size, especially on small devices.
I want map to be zoomable (without zooming all the page) and scrollable by dragging mouse (on desktop), also it needs to be centered by default.
I tried to use JqueryUI draggable method to achieve scrolling, and it works, but have some kind of conflict with the method I use to center it. And also absolutely stucks when I try to limit the draggable area.
Here is the latest example I have: https://codepen.io/khomutovspace/pen/jOVzbMe
Code:
$(document).ready(function () {
var outerContent = $(".map");
var innerContent = $(".map > svg");
outerContent.scrollTop((innerContent.height() - outerContent.height()) / 2);
});
$(function () {
$(".map").draggable();
});
body {
margin: 0;
}
.content {
position: fixed;
top: 0;
left: 0;
z-index: 1;
padding: 15px;
}
.navigation {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.map {
min-width: 100vw;
min-height: 100vh;
overflow: hidden;
}
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<div class="navigation">
<div>
<a>Title</a>
</div>
<div>
<a>Item 1</a>
<a>Item 2</a>
<a>Item 3</a>
</div>
</div>
</div>
<div class="map">
<svg>…
</div>
If you can use another lib than jQuery UI, you can try PanZoom.
const mapElement = $(".map .svg")[0];
const panzoom = Panzoom(mapElement, { contain: 'outside', startScale: 1.5 });
mapElement.parentElement.addEventListener('wheel', panzoom.zoomWithWheel);
mapElement.parentElement.addEventListener('wheel', function (event) {
if (!event.shiftKey) return;
panzoom.zoomWithWheel(event);
})
For example : https://codepen.io/adrienlamotte/pen/bGgPgqj

Using Text With The Trianglify Javascript Library

So I've been using the Trianglify library and I've been loving it. My only problem is the way it handles text: it pushes it all to the top, whereas I want the randomly generated background to act as the background, with the text on it. Here's my code so far:
<script>
var pattern = Trianglify({
height: window.innerHeight,
width: window.innerWidth,
cell_size: 40});
document.body.appendChild(pattern.canvas())
</script>
and
<div class="container-fluid" id="welcome">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1> Welcome to the website </h1>
</div>
</div>
</div>
Please help! Thanks so much for your time.
I just came across this question because I have the same issue. Here's what I did.
HTML
<canvas id="container1"></canvas>
<script>
var pattern = Trianglify({cell_size: 25, x_colors: 'Blues'});
pattern.canvas(document.getElementById('container1'));
</script>
<div class="screen-container trianglify-container">
<div class="container">
<div class="row">
<h3>This is where my text goes</h3>
</div>
</div>
</div>
CSS
.trianglify-container {
background-color: transparent;
color:#fff;
text-align: center;
padding-top: 20vh;
}
canvas#container1 {
position: absolute;
width: 100vw;
height: 100vh;
}
Explanation
I am using Bootstrap, hence the container and row divs in the HTML.
Setting the canvas#container1 to an absolute position fixes it and everything that follows in the HTML should come over it. Setting width to 100vw and height to 100vh ensures it takes up the whole screen.
Setting the trianglify-container position to relative ensures it shows up relative to any fixed or absolute objects above it, in this case the canvas. Using padding let's you move where you want the text.
If I wanted everything else on the page always to have the same trianglify background, I could do:
canvas#container1 {
position: absolute;
width: 100vw;
height: 100vh;
}

Google Maps API does not render inside DIV tags

I have a very simple Google map using Google Maps API v3 that will not render between div tags.
CSS:
#mainContent {
background:#c8dbec url(//images.rigzone.com/images/background_body4.gif) 50% top repeat-y;
/*e0ecff c1daf0 e3ecf3*/
position: relative;
text-align: left;
}
* {
text-align: left;
}
#content {
width: 935px;
margin:auto;
position: relative;
padding-left:0px;
padding-top:7px;
padding-bottom:10px;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
}
#mainBody {
float:right;
width:770px;
padding:0px 5px 0px 5px;
}
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100%; width:400px; }
HTML/JS:
<div id="mainContent">
<div id="content">
<div id="mainBody">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=myKeyID&libraries=weather">
</script>
<script type="text/javascript">
var map
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(28.39404819, -91.38743867),
zoom: 7,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
}
</script>
<div id="map_canvas" style="width:600px; height:50%"></div>
<script>initialize();</script>
</div>
</div>
If I remove the div tags surrounding the map, it works fine, but I don't have the formatting that is required. Removing the divs is not an option, either, as they are hard coded in our header and footer files. Any help is appreciated.
The way block elements (like div) work is that it takes the full width of it's parent element, and the smallest height of it's relative children. If a block element's child set it's height to 100%, it's almost like circular reference, but this behavior set this to 0, unless it has a hard number attached to it.
To solve this, you need to have a height of all the divs in its nesting path along the way set to the height of it's parent for what you want to accomplish. If you use Inspect Element in your browser's developer tools, you will see what this means.
I've created a JSFiddle you can play with that includes your setup. Also, to initialize, you should use google.maps.event.addDomListener to call your initialize function instead of calling it directly since your browser will try to load the scripts in asynchronously and the API may not be ready by the time it gets to the calling function initialize();.
Try this it will work! put the style tag in header and div in body.
<style>
#_map {
height: 350px;
width: 900px;
}
</style>
<div id="_map"></div>

How to fix this jquery function to work in IE?

I am relatively new with Javascript but managed to somehow get this code to work on chrome, firefox, safari but it doesn't properly on IE. First look at this code and then after that I will explain what seems to be not working:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://www.domain.com/test/wtf.css" />
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
var transition = 'slow';
var target1 = $('#flash1');
var target2 = $('#flash2');
var target3 = $('#box2');
var target4 = $('#tble');
var target5 = $('.links');
var target6 = $('#wording');
target1.delay(1000).fadeIn();
target2.delay(2000).fadeIn();
target3.delay(3000).fadeIn();
target4.delay(4000).fadeIn();
target5.delay(5000).fadeIn();
target6.delay(6000).fadeIn();
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#this_is_button").click(function () {
$("#box2").hide();
$("#tble").hide();
$(".links").hide();
$("#second_pls").show();
$("#box2").css("background", "black");
})
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#what_close").click(function () {
$("#second_pls").hide();
$("#tble").show();
$(".snap").show();
$(".links").show();
$("#box").css({
backgroundImage: "url('/test/img.jpg')",
backgroundSize: "800px"});
});
});
</script>
</head>
<body>
<div id="box">
<div id="box2" style="display:none"></div>
<div id="wording" style="display:none">
<label id="flash1" style="display:none">Hello</label>
<label id="flash2" style="display:none">World</label>
</div>
<div id="tble" style="display:none">This is a table</div>
<div id="second_pls" style="display:none">Hello Hello Hello, is this working? come on already?!!
<input type="button" id="what_close" value="Close">
</div>
<div class="links" style="display:none">
<input type="button" id="this_is_button" value="Sample">
</div>
</div>
</body>
</html>
CSS:
#box {
background-color: #000000;
height: 350px;
margin-left: auto;
margin-right: auto;
width: 800px;
}
#box2 {
background-image: url("/test/img.jpg");
background-size: 800px;
height: 550px;
margin-left: auto;
margin-right: auto;
width: 800px;
position: absolute;
}
#wording {
position: relative;
color: #999999;
font-size: 15px;
letter-spacing: 5px;
margin-left: 20px;
padding-top: 30px;
}
#tble {
margin-top: 180px;
position: absolute;
}
#second_pls {
margin-left: 10px;
margin-top: 310px;
position: absolute;
}
.links {
margin-left: 10px;
margin-top: 310px;
position: absolute;
}
So what is the part that doesn't seem to function when the page is rendered in IE? It seems that the fadeIn, fadeOut, hide and show parts are not rendering in IE except #flash1, and #flash2 work, the rest of the fade in, fade out don't work. I am ripping my hair out not understanding why those two would work but not the rest.
I used BrowserStack and it seems that on Windows XP using IE 8 it renders properly with the exception of properly rendering the background image. But on Windows 7 using IE 8, it works the same way as it does on Windows XP but when using IE 9 it gives me the current issue.
What am I doing wrong?
It seems the problem arise from incorrect syntax:
$("#box").css({
backgroundImage: "url('/test/img.jpg')",
backgroundSize: "800px", //<-- extra comma
});
http://jsfiddle.net/bfcZd/3/
vs.
http://jsfiddle.net/bfcZd/4/
You should look at the CSS declarations for the two divs that are working. I suspect they may be position:relative or have some other property that is causing them to render differently (properly) while the other ones fail. Could you provide the CSS that you have set for the divs in your example. It will help us troubleshoot a little better, but without seeing it, this is my hunch.
add this meta tag inside your <head></head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
should work then.
i have it here in this jsfiddle: http://jsfiddle.net/Morlock0821/XtyWC/

Flexible/responsive boxes weird browser behavior in jQuery

Safari: Works
Firefox: Weird floating issue on initial page load, works after browser resize
Chrome: End boxes jump around quickly when making window smaller
(have not tested other browsers)
Video displaying browser issues: http://tinypic.com/r/2gxo8w3/6
Full script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<style>
.box {
height: 250px;
background-color: #999;
float: left;
margin-right: 10px;
margin-top: 10px;
}
#boxes {
width: 100%;
overflow: auto;
}
.end-box {
margin-right: 0;
}
.top-box {
margin-top: 0;
}
</style>
<body>
<div id='boxes'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<div class='box'>4</div>
<div class='box'>5</div>
<div class='box'>6</div>
<div class='box'>7</div>
<div class='box'>8</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
columns = Math.floor($('#boxes').width()/225); //min box/column size (before spacing)
var spacing = ((columns - 1) * 10/$('#boxes').width())*100; //10px spacing between boxes
$('.box').width(100/columns-spacing/columns+'%');
$('.box:nth-child('+columns+'n+0)').addClass('end-box');//removes margins
$('.box:nth-child(-n'+columns+')').addClass('top-box');
$(window).resize(function() {
columnsCheck = Math.floor($('#boxes').width()/225);
if(columns != columnsCheck) {
$('.end-box').removeClass('end-box');
$('.top-box').removeClass('top-box');
$('.box:nth-child('+columnsCheck+'n+0)').addClass('end-box');
}
columns = columnsCheck;
var spacing = ((columns - 1) * 10/$('#boxes').width())*100;
$('.box').width(100/columns-spacing/columns+'%');
$('.box:nth-child('+columns+'n+0)').addClass('end-box');
$('.box:nth-child(-n'+columns+')').addClass('top-box');
});
</script>
</body>
</html>
How can I solve this issue (while maintaining 10px margins). I am also open to alternative methods of creating this effects via JavaScript/jQuery (trying to avoid pure CSS3).

Categories