I am using the following function to set the size of a popup. However, I am noticing that always the size of the popup exceeds the size set by me and I have right margin to the left (see below).
Is there any problem with my code?
function onFeatureSelect(feature) {
selectedFeature = feature;
mydescription='' + '<div class="visual">' + feature.attributes.image + '</div>' + '<div class="textual"><h2 class="title">' + feature.attributes.title + '</h2>' +'<div class="description">' + feature.attributes.description + '</div></div>';
popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(500,300), mydescription , null, true, onPopupClose);
popup.autoSize = true;
popup.panMapIfOutOfView = false;
feature.popup = popup;
map.addPopup(popup);
}
Just set popup.autoSize = false; and the Popup will be 500px X 300px as
Related
I'm working on a leaflet js map atm.
There are some items that I want to apply a class to, depending on their inner text. Seems as though two circles at a certain size just overlap. Adding some CSS in that case so they're no longer overlapping.
//function searches for all <text> elements within svg tags for the queryText
// and then appends them with the appendText
function addClasserino() {
let elements = document.querySelectorAll('map-marker marker-bg-condition'); // get all circle elements as a NodeList
elements.forEach(el => { // go through each text element
if (el.innerText < 10) { // if the innerHTML matches the query HTML then
elements.addClass('updated'); // add the class
}
})
}
document.addEventListener("DOMContentLoaded", function(){
//pass in the search text and the appending text as arguments
addClasserino();
});
This is what I got so far. Doesn't seem to be working.
.map-marker.marker-bg-condition needs to be moved across a bit. Got the CSS here:
.map-marker.marker-bg-condition.updated{
margin-top: -19px;
margin-left: -19px;
}
With Leaflet JS, the zoom level changes and items are updated accordingly. This of my map showing all details at the world view, and then breaking down to state as you zoom in.
The unexpected behavior is that the css isn't applying and where bubbles are overlapping is because of this. This is the original code but I can't change it and get it to work even with an if statement.
getMarkerHtml: function(count, color) {
var size = this.getMarkerSize(count);
var hsize = (size / 2) - 6;
var font = count < 1000 ? Math.ceil(size / 3) : Math.ceil(size / 4);
if(count < 100) {
font = font + 3;
}
var cluster_classes = [
'map-marker',
'marker-bg-' + (Filters.colors.profile === color ? 'profile' : 'condition')
];
if(this.zoomLevel !== 'zip') {
size = size * 1.5;
if(petMapFilters.colors.profile !== color) {
hsize = size / 2;
}
}
if(this.zoomLevel === 'zip') {
var cluster_styles = [
'margin-left: -' + hsize + 80 + 'px;', NOTE: I tried this to offset on zip zoom bit it's not working END OF NOTE
'margin-top: -' + hsize + 80 +'px;',
'width: ' + size + 'px;',
'height: ' + size + 'px;',
'font-size: ' + font + 'px;'
];
} else {
var cluster_styles = [
'margin-left: -' + hsize + 'px;',
'margin-top: -' + hsize + 'px;',
'width: ' + size + 'px;',
'height: ' + size + 'px;',
'font-size: ' + font + 'px;'
];};
var div_style = [
'line-height: ' + (size - (size * 0.3)) + 'px;'
];
count = this.formatCount(count);
return '<div class="' + cluster_classes.join(' ') + '" tabindex="0" style="' + cluster_styles.join(' ') + '"><div style="' + div_style.join(' ') + '">' + count + '</div></div>';
},
Please let me know what I am doing wrong here as I am not able to identify this myself.
The issue at hand:
Thanks.
Im trying to change the cursor logo when Im building a dynamic div. Depending on how much data it can take up a few seconds to load so I need the cursor change.
The problem Im having is that the cursor isnt changing until my code has fully executed.
Im have a dynamically generated chart with the points in the chart set to popup more data when they are clicked. This is the eventListener Ive created and it works fine apart from my CSS update not getting applied until it has exited the function.
Any idea how I can force it to update immediately
point.addEventListener('click', function (evt) {
document.body.className = 'waiting';
var evtPoint = document.getElementById(evt.currentTarget.id);
var index = evtPoint.id.substring(evtPoint.id.lastIndexOf('-') + 1, evtPoint.id.length);
var chartOptions = Charts.options[elementId];
var txnData = chartOptions.data.txn[index];
var txnFullData = chartOptions.data.txnFull;
var theDate = new Date(txnData.time);
// pop up
var txnsPerMinutePopUp = document.getElementById('txnsPerMinutePopUp');
txnsPerMinutePopUp.innerHTML = '<div id = "txnsPerMinutePopUp-bg"></div>' +
'<div id = "txnsPerMinutePopUp-body">' +
'<div id = "txnsPerMinutePopUp-body-heading"></div>' +
'<div id = "txnsPerMinutePopUp-body-txns">';
var txnsPerMinutePopUpHeading = document.getElementById('txnsPerMinutePopUp-body-heading');
var txnsPerMinutePopUpBody = document.getElementById('txnsPerMinutePopUp-body-txns');
function addZero(i) {
if (i < 10) {
i = '0' + i;
}
return i;
}
for (var i = 0; i < txnFullData.length; i++) {
// console.log("loop" + i, txnFullData);
var date = new Date(txnFullData[i].time);
if (date.getTime() === theDate.getTime()) {
txnsPerMinutePopUpHeading.innerHTML = '<div class="txnsPerMinutePopUp-body-heading-title">Tweets</div><div class="txnsPerMinutePopUp-body-heading-time">' + addZero(theDate.getHours()) + ':' + addZero(theDate.getMinutes()) + '</div>';
var child = '<div class = "txnsPerMinutePopUp-txns">' +
'<div class = "txnsPerMinutePopUp-txns-img">' +
'<object data = "' + txnFullData[i].profile_image_url + '" class = "border-rad-25 cross-series-profile-img" width = "50px" height = "50px" type = "image/jpeg">' +
'<img src = "assets/img/engager_profile_default-47.svg" class = "border-rad-25 cross-series-profile-img" width = "50px" height = "50px" alt = "' + txnFullData[i].screen_name + ' profile image" />' +
'</object>' +
'</div>' +
'<div class = "txnsPerMinutePopUp-txns-screen-name">' +
'#' + txnFullData[i].screen_name + '' +
'</div>' +
'<div class = "txnsPerMinutePopUp-txns-text">' + Charts.lineChart.parseText(txnFullData[i].text) + '</div>' +
'</div>';
txnsPerMinutePopUpBody.innerHTML += child;
}
}
txnsPerMinutePopUp.innerHTML += '</div>' +
'</div>';
//document.body.style.cursor='default';
txnsPerMinutePopUp.style.visibility = 'visible';
var bg = document.getElementById('txnsPerMinutePopUp-bg');
bg.addEventListener('click', function (evt) {
txnsPerMinutePopUp.style.visibility = 'hidden';
});
}, false);
My CSS then is just
body.waiting * { cursor: wait; }
UPDATE
From researching potential causes I found out that most browsers wont update the DOM immediately and I need to interrupt the javascript to allow for the DOM to get updated.
Ive updated my code to move the bulk of the operations out to a separate function and tried to set a timeout value on it and its still not updating the cursor until everything completes.
I also tried to add a mousedown event to try and get ahead of the javascript in the on click but it didnt work either
EventListener
point.addEventListener('click', function (evt) {
//document.body.className = 'waiting';
// setTimeout(function() {
Charts.lineChart.changeCursor();
// },10);
var evtPoint = document.getElementById(evt.currentTarget.id);
var index = evtPoint.id.substring(evtPoint.id.lastIndexOf('-') + 1, evtPoint.id.length);
var chartOptions = Charts.options[elementId];
var txnData = chartOptions.data.txn[index];
var txnFullData = chartOptions.data.txnFull;
var theDate = new Date(txnData.time);
function addZero(i) {
if (i < 10) {
i = '0' + i;
}
return i;
}
setTimeout(function() {
Charts.lineChart.breakOut( txnFullData,theDate );
},100);
document.body.style.cursor='default';
txnsPerMinuteTweetsPopUp.style.visibility = 'visible';
}, false);
and the following code was moved into the breakout function
breakOut
Charts.lineChart.breakOut = function(txnFullData,theDate){
function addZero(i) {
if (i < 10) {
i = '0' + i;
}
return i;
}
var txnsPerMinutePopUp = document.getElementById('txnsPerMinutePopUp');
txnsPerMinutePopUp.innerHTML = '<div id = "txnsPerMinutePopUp-bg"></div>' +
'<div id = "txnsPerMinutePopUp-body">' +
'<div id = "txnsPerMinutePopUp-body-heading"></div>' +
'<div id = "txnsPerMinutePopUp-body-txns">';
var txnsPerMinutePopUpHeading = document.getElementById('txnsPerMinutePopUp-body-heading');
var txnsPerMinutePopUpBody = document.getElementById('txnsPerMinutePopUp-body-txns');
for (var i = 0; i < txnFullData.length; i++) {
// console.log("loop" + i, txnFullData);
var date = new Date(txnFullData[i].time);
if (date.getTime() === theDate.getTime()) {
txnsPerMinutePopUpHeading.innerHTML = '<div class="txnsPerMinutePopUp-body-heading-title">Tweets</div><div class="txnsPerMinutePopUp-body-heading-time">' + addZero(theDate.getHours()) + ':' + addZero(theDate.getMinutes()) + '</div>';
var child = '<div class = "txnsPerMinutePopUp-txns">' +
'<div class = "txnsPerMinutePopUp-txns-img">' +
'<object data = "' + txnFullData[i].profile_image_url + '" class = "border-rad-25 cross-series-profile-img" width = "50px" height = "50px" type = "image/jpeg">' +
'<img src = "assets/img/engager_profile_default-47.svg" class = "border-rad-25 cross-series-profile-img" width = "50px" height = "50px" alt = "' + txnFullData[i].screen_name + ' profile image" />' +
'</object>' +
'</div>' +
'<div class = "txnsPerMinutePopUp-txns-screen-name">' +
'#' + txnFullData[i].screen_name + '' +
'</div>' +
'<div class = "txnsPerMinutePopUp-txns-text">' + Charts.lineChart.parseText(txnFullData[i].text) + '</div>' +
'</div>';
txnsPerMinutePopUpBody.innerHTML += child;
}
}
txnsPerMinutePopUp.innerHTML += '</div>' +
'</div>';
var bg = document.getElementById('txnsPerMinutePopUp-bg');
bg.addEventListener('click', function (evt) {
txnsPerMinutePopUp.style.visibility = 'hidden';
});
}
Here I have a code to show for on place a PHOTO,NAME,RATING in SIDE_bar
but I only get first object, so I dont know what is wrong with this code:
var rating="";
if (!!place.rating) ocene = raty({ score: place.rating, path: 'http://wbotelhos.com/raty/lib/img' });
var photo ="<img src='http://carsedia.com/code/voyage/icons/7.png'></img>";
if (!!place.photos) photo = '<img src='+place.photos[0].getUrl({ 'maxWidth': 50, 'maxHeight': 50 })+'></img>';
var htmlside = "<div class='element'>"+photo+"<a href='javascript:google.maps.event.trigger(gmarkers[" + parseInt(gmarkers.length - 1) + "],\"click\");'>" + place.name + "</a></br>" + ocene + "</div>";
$(htmlside).appendTo('#side_bar');
}
Without rating and RATY plugin all works perfect.
I'm trying to use a customized Info Window implementation with Google Maps API v3 called InfoBubble. As I was doing my development locally, Safari rendered the bubbles fine. However, when I uploaded it to a live server, it no longer calculated the heigh of the bubble content correctly and displays a scrollbar (which I don't want) (see http://luketilley.com/maps/).
I have done some investigating and it looks like the problem comes from this bit of code:
InfoBubble.prototype.getElementSize_ = function(element, opt_maxWidth,
opt_maxHeight) {
var sizer = document.createElement('DIV');
sizer.style['display'] = 'inline';
sizer.style['position'] = 'absolute';
sizer.style['visibility'] = 'hidden';
if (typeof element == 'string') {
sizer.innerHTML = element;
} else {
sizer.appendChild(element.cloneNode(true));
}
document.body.appendChild(sizer);
var size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight);
// If the width is bigger than the max width then set the width and size again
if (opt_maxWidth && size.width > opt_maxWidth) {
sizer.style['width'] = this.px(opt_maxWidth);
size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight);
}
// If the height is bigger than the max height then set the height and size
// again
if (opt_maxHeight && size.height > opt_maxHeight) {
sizer.style['height'] = this.px(opt_maxHeight);
size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight);
}
document.body.removeChild(sizer);
delete sizer;
return size;
};
Specifically, this line:
var size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight);
Upon investigating what values safari reports, I confirmed that safari does indeed report different values when displaying the page locally vs. online.
Doing more testing, I also found that the issues only start when I add an image to the info bubble (check the marker off the coast of Africa).
here is the content that I'm trying to put in the info_bubble
info_content = '<div class="bubble">' +
'<h1>' + markerData.name + '</h1>' +
'<div class="icons">' +
icon_html +
'</div>' +
'<img src="' + markerData.image + '"/>' +
'<p>' + markerData.description + '</p>' +
'<p><a target="_blank" href="' + markerData.url + '"><img src="learn_more.png"/></a></p>' +
'</div>';
Any ideas on what's happening here? is there a better way to calculate the required size?
Update: This may be a bug with Safari. I just spent some time in the debugger and if I set a breakpoint and manually step through the functions, it does the right thing, but if I just let it run, it continues to misbehave. So I guess the question is now: is there a workaround?
I have a google map.
And there's an information window.
Now the size is standard and there r loads of texts inside.
So, my boss asked me to increase it.
We are useing ektron CMS and thus I need to go into ektron workarea and edit map.js
Even if it is ektron, it is still using google map.
I managed to find out which part is displaying as info window.
This is the part of code where info window pops up and display information inside.
marker = new GMarker(point, icon);
var infoWindow = map.getInfoWindow();
GEvent.addListener(marker, "mouseover", function () {
if (EMap.SearchData != 'content') {
if (qlink && qlink.length > 0) {
_userTB = '<span>' + title + '</span>';
}
else {
_userTB = title;
}
var theHtml1 = '<div id="IW_' + markerid + '" style="overflow:auto;width:240px;height:100px;">' + markerid + '. ' + _userTB + _summarytxt + '<br/>' + EGlobal.Format(EMap.Geolocation, new Array('javascript:EMap.SetAddress(\'' + EGlobal.Replace(address, '#', ' ') + '\',\'to\');', 'javascript:EMap.SetAddress(\'' + EGlobal.Replace(address, '#', ' ') + '\',\'from\');')) + '</div>';
map.openInfoWindowHtml(theHtml1);
}
else {
var theHtml2 = '<div id="IW_' + markerid + '" style="overflow:auto;width:240px;height:100px;">' + markerid + '. <span><b>' + title + '</b></span><br/>' + _summarytxt + '<br/>' + EGlobal.Format(EMap.Geolocation, new Array('javascript:EMap.SetAddress(\'' + EGlobal.Replace(address, '#', ' ') + '\',\'to\');', 'javascript:EMap.SetAddress(\'' + EGlobal.Replace(address, '#', ' ') + '\',\'from\');')) + '</div>';
marker.openInfoWindowHtml(theHtml2);
}
});
I try to search on google and found out that this is how a guy tried to change the info window size.
var infoWindow = map.getInfoWindow();
var point = new GLatLng(0,0);
var marker = new GMarker(point);
GEvent.bind(marker,”click”,marker,function() {
map.openInfoWindowHtml(this.getPoint(),this.address,{onOpenFn:function(){
infoWindow.reset(this.getPoint(),infoWindow.getTabs(),new GSize(200,200),null,null);
}});
});
The full article is on this site.
But I cannot merge them into 1.
especially that guy is using map.openInfoWindowHtml() with 3 parameters and ektron is using marker.openInfoWindowHtml() with only one parameter.
Any idea how to get this done? Tkz a lot.
And.. I am very new to google map. So, forgive me if my question is wasting your time.
Maybe this answer is too simple but did you allready tried to edit this line in the openInfoWindowHTML() call?
style="overflow:auto;width:240px;height:100px;">