I've integrate the googlemaps api
but Pegman is missing from the streetview little white square (bottom right)
I've notice that some div that hold the pegman icon in googlemaps code have height and width equal at 0px
what can I do to fix that ?
Here's a sample of how I called and initiate my map
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
Here's my map component :
<div class="map-box" id="map" #map></div>
with css.js looking like
.map-box {
height: 100%;
width: 100%;
}
and how I create it :
var ownPos = {lat: -4.85, lng: 2.35};
this.mapDisplay = new google.maps.Map(document.getElementById('map'), {zoom: 4, center: ownPos, streetViewControl: true});
I had this same issue and solved it with some CSS:
/* Force position to show pegman */
.gm-svpc div img {
position: relative !important;
}
fixing of wrappers' height solved the same bug
agm-map {
height: 425px;
& /deep/ .gm-svpc { //dispayed pegman's icon on map
div {
height: 40px;
}
}
}
/* there are actually two `<div>`s, with the 2nd one actually holding the symbol */
.gm-svpc > div:last-of-type {
/* same dimensions as symbol child element */
width: 32px;
height: 32px;
}
Related
I am trying to embed a sliding map onto an HTML page. Right now the map would float on top of other elements. What should I do to make the map appear inside one of the containers?
I try to delete the line .map{position: absolute} but then the map stops showing up at all. I have also tried to make sure other CSS files linked in the HTML is not overriding the map's style.
<style>
body {font-family: "Lato", sans-serif}
.mySlides {display: none}
.map {
/*position: absolute;
top: 500px;
bottom: 0;*/
width: 80%;
}
body {
overflow: hidden;
}
body * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<body>
<div class="w3-container w3-content w3-center w3-padding-64" style="max-width:800px" id="band">
<h2 class="w3-wide">Guangzhou</h2>
<p class="w3-opacity"><i></i></p>
<hr>
<div id='slidemap-cont'>
<div id='before' class='map'></div>
<div id='after' class='map'></div>
</div>
</div>
<script>
mapboxgl.accessToken = 'MY_ACCESS_TOKEN';
var beforeMap = new mapboxgl.Map({
container: 'before',
style: 'mapbox://styles/estella213439/cju7drf1x1zr41flvd51t9adb',
center: [113.33833,23.08506],
zoom: 12
});
var afterMap = new mapboxgl.Map({
container: 'after',
style: 'mapbox://styles/estella213439/cju7af6q42ia21fqbv7ffas1g',
center: [113.33833,23.08506],
zoom: 12
});
var map = new mapboxgl.Compare(beforeMap, afterMap, {
// Set this to enable comparing two maps by mouse movement:
// mousemove: true
});
</script>
</body>
If you need them to both be position: absolute;, then you need to specify the top for your second element to be the same as the height of the first one
.map {
position: absolute;
width: 80%;
height: 50%;
}
#before {
top: 0;
}
#after {
top: 50%; // Must match height of before element
padding-top:5px; //So you can see where one map stops and the other begins.
}
Here's a JSFiddle with your example to demonstrate.
I have problem with diplaying google map in circle on iOS systems. Map is overflowing box where it is included. It is a bug, or I do not know... Do you know some hack on that? Bug image.
My HTML code is pretty simple and looks like div.g-map>div.map where is rendered Google Map by JS.
CSS:
.map {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* It has to be circle! */
.g-map {
position: relative;
width: 262px;
height: 262px;
border-radius: 50%;
overflow: hidden;
}
Try to avoid the use of absolute positioning if you can.
You still have an outer and inner blocks with same size.
Here is the fiddle, please try to open it in your browser:
https://jsfiddle.net/svitch/zb1fg48f/10/
And here is the code:
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru,
disableDefaultUI: true
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
#map, #g-map {
height: 262px;
width: 262px;
}
/* It's a circle */
#g-map {
border: none;
border-radius: 50%;
overflow: hidden;
}
<div id="g-map"><div id="map"></div></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap">
</script>
SOLUTION:
Just add z-index: 10; to .map and in iOS browsers map will not overflow circle.
.map {
z-index: 10;
...
}
I am using cesium : http://cesiumjs.org/
and I wanted to make some divs float over a cesium map, but I can't get it to work.
I tried the following container/tag method at jsfiddle.net/j08691/dChUR/5/ - substituing the image by a cesium map div - but it doesn't seem to work - the "tag" div isn't shown.
Any help?
You need to add position: absolute; and either top or bottom to your CSS, because the widget also uses absolute positioning. Adding this creates a new stacking context, which overrides z-index.
Here's a working example, hit "Run Code Snippet" at the bottom of this:
Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;
var viewer = new Cesium.Viewer('cesiumContainer', {
timeline: false,
animation: false,
navigationHelpButton: false
});
var skyAtmosphere = viewer.scene.skyAtmosphere;
var skyCheckbox = document.getElementById('skyCheckbox');
skyCheckbox.addEventListener('change', function() {
viewer.scene.skyAtmosphere = skyCheckbox.checked ? skyAtmosphere : undefined;
}, false);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
font-family: sans-serif; color: #edffff;
}
#controlPanel {
position: absolute;
top: 5px;
left: 5px;
background: rgba(42, 42, 42, 0.8);
padding: 5px 8px;
border-radius: 5px;
}
label {
cursor: pointer;
}
label:hover span {
text-decoration: underline;
}
<link href="http://cesiumjs.org/releases/1.15/Build/Cesium/Widgets/widgets.css"
rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.15/Build/Cesium/Cesium.js">
</script>
<div id="cesiumContainer"></div>
<div id="controlPanel">
This is a floating control panel<br/>
with a translucent background color.
<p>
<label>
<input id="skyCheckbox" type="checkbox" checked />
<span>Enable atmospheric effect</span>
</label><br/>
<button class="cesium-button">Button 1</button>
<button class="cesium-button">Button 2</button>
</p>
</div>
To add to emackey's answer, what I had to do in addition to adding position: absolute to my css was to add a top:150px or bottom:150px. Basically anything that will specify a position relative to the parent container.
Even though using the absolute position it is most likely being pushed down by the cesium widget since it takes up 100% height.
I use jQuery mobile for my iOS application. Here is what it happens inside when I load the map:
I have used the following script in order to generate this.
var map
var mark
function initialize() {
var latlng = new google.maps.LatLng(52.404657,-1.491413);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
mark = new google.maps.Marker( {
position: latlng,
map:map
})
}
function mostrarUbicacion(){
navigator.geolocation.getCurrentPosition( lecturaGPS , errorGPS , {enableHighAccuracy:true} )
}
function lecturaGPS(ubicacion){
var miubicacion = new google.maps.LatLng(ubicacion.coords.latitude, ubicacion.coords.longitude);
map.setCenter(miubicacion)
mark.setPosition(miubicacion)
}
function errorGPS(){
alerta(" unable to connect")
}
html:
<body onload="initialize()" style="height:100%">
<div id="map_canvas" style="width:100%; height:50%; padding:0;"></div>
<button onClick="mostrarUbicacion()"> Click to find where you are! </button>
</body>
try to set the div for the map and the css this way:
HTML:
<div class="Flexible-container" id="map" style="margin:1.5%;">
<!-- this is the div for the map -->
</div>
CSS:
/* Flexible iFrame */
.Flexible-container {
position: relative;
padding-bottom: 32.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
to adjust the width of the div use percentages; you can adjust the height setting padding-bottom.
here the doc
I'm trying to set the upper limit values of a resizable image to keep it within the containing div. I'm using mootools to make the image both moveable and resizable (implementing Drag.Move and makeResizable to do so.)
My temporary solution is to use overflow:hidden; so the resized image does not overtake the rest of the page when it is sized beyond the container, but I'd like to be able to have a way so the image can not be resized outside of its container.
I know that since limit is set on 'domready', if I try to set it to a variable that changes value as the image is resized (ie: onDrag), the limit parameter won't be updated on the fly. I'm wondering if anyone has any insight into how I can achieve a similar effect to the Drag.Move container parameter, as makeResizable doesn't seem to have the same parameter.
HTML:
<div id="pImageArea">
<div id="pLogo" class="displayNone">
<div id="moveHandleName">
<img src="uploadedlogo.jpg" id="imgName" />
</div>
<div id="resizeHandleName"></div>
</div>
</div>
CSS:
#imageArea {
float: left;
width: 630px;
height: 400px;
border: 1px solid #333;
position: relative;
overflow: hidden;
}
#imgContainer {
width: 50px;
height: 50px;
border: 1px dashed #333;
position: absolute;
}
#imgName {
width: 100%;
}
#moveHandleName {
width: 100%;
height: 100%;
}
#resizeHandleName {
width: 8px;
height: 8px;
border: 1px solid #000;
position: absolute;
left: 100%;
top: 100%;
margin: -5px 0 0 -5px;
background-color: #fff;
z-index: 100;
}
JS:
window.addEvent('domready', function(){
var xLim = 50;
var yLim = 50;
// Make image moveable
new Drag.Move($('imgContainer'), {
container: $('imageArea'),
handle: $('imgHandleName')
});
// Make image resizable
$('imgContainer').makeResizable({
handle:$('handleName'),
limit: {x: [50, xLim], y: [50, yLim]},
onDrag: function(el) {
// Set imgContainer height
el.setStyle('height', $('imgName').getSize().y + 'px');
// Set upper limits
xLim = $('imageArea').getSize().x - el.getSize().x;
yLim = $('imageArea').getSize().y - el.getSize().y;
},
});
});
Thanks in advance,
Matt
I 'solved' it like this in my own code (modified to use your element and values):
$('imgContainer').retrieve('resizer').setOptions({
limit: {
x: [50, xLim],
y: [50, yLim]
}
});
The move limit should be properly enforced once you specify the 'container' option and your container has a set width and height. When you resize, my draggable does not need to have limits (re)set. (Using Moo 1.4 by the way.)
However, resizing does cause problems in conjunction with move and limits. The key is that the 'limit' option is only set when initializing makeResizable(). The only way to update it is by setting it with the code shown above. But you have to update it right after you dropped the draggable, because that's the only event that affects the limit. So:
// Make image moveable
new Drag.Move($('imgContainer'), {
container: $('imageArea'),
handle: $('imgHandleName'),
onDrop: function() {
$('imgContainer').retrieve('resizer').setOptions({
limit: {
x: [50, $('imageArea').getSize().x - parseInt($('imageArea]).getStyle('left'))],
y: [50, $('imageArea').getSize().y - parseInt($('imageArea]).getStyle('top'))]
}
});
});
As you can see, I've also used getStyle() instead of getPosition() because getPosition() returns a value relative to the window, while Moo sets the draggable top and left relative to the droparea.