I did change some features style (through check-boxes) using style property :
var features = layer.features;
for( var i = 0; i < features.length; i++ ) {
//features[i].style = { visibility: 'hidden' };
features[i].style = 'none';
}
layer.redraw();
Now if I check the box again, it supposed to display again but nothing happens!
I tried:
features[i].style = 'block';
OR
features[i].style = 'delete';
then redraw the layer.. but this doesn't work
Any Idea ?
Try this:
// set style
features[i].style = null;
// or
features[i].style = {display:'none'};
// redraw feature
layer.drawFeature(features[i]);
Related
Given Safari does not support adoptedStyleSheets to attach a constructed CSSStyleSheet, what alternative is there to achieve the same intent?
Apart from creating a <style> with CSS inside it, I'm not aware of any other method.
Reference: https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets
You can use the following:
export default function generateStyles(styleCollection) {
if (document.adoptedStyleSheets) { //adoptedStyleSheets is supported
//Add to existing collection
document.adoptedStyleSheets = [...document.adoptedStyleSheets, styleCollection]
} else {
//Construct style text and add to head
var styleString = ''
for (let i = 0; i < styleCollection.cssRules.length; i++) {
styleString = styleString.concat(styleCollection.cssRules[i].cssText)
}
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = styleString;
document.getElementsByTagName('head')[0].appendChild(style);
}
}
is there a way of paning the bubble in the current view when there are regions which are outside the mapview?
E.g. https://dev2.gruppenunterkuenfte.de/nordrhein-westfalen__r187.html?vs=1
You can click on a bubble at the edge and you see them outside.
Using google: https://www.gruppenunterkuenfte.de/nordrhein-westfalen__r187.html?vs=1
will pan automatically in the full view ...
Regards
Chris
Might not be available out of the box, but something as follows could be done to check when opening the bubble and move the map center.
var checkBubble = function(evt) {
setTimeout(function() {
if(infoBubble && infoBubble.getState() == "open"){
var border = 50;
var objRect = infoBubble.getContentElement().parentElement.getBoundingClientRect();
var objStyleRight = Math.abs(parseInt(infoBubble.getContentElement().parentElement.style.right));
objStyleRight = objStyleRight ? objStyleRight : 0;
var mapRect = map.getElement().getBoundingClientRect();
var shiftX = 0;
var shiftY = 0;
// check, if infobubble isn't too far to up
if ((objRect.top-border) < mapRect.top) {
shiftY = (mapRect.top - (objRect.top-border));
}
// check, if infobubble isn't too far to the left
var objLeft = (objRect.left - objStyleRight);
if ((objLeft-border) < mapRect.left) {
shiftX = (mapRect.left - (objLeft-border));
} // check, if infobubble isn't too far to the right
else if ((objRect.right+border) > mapRect.right) {
shiftX = -(objRect.right - (mapRect.right-border));
}
if ((shiftX == 0) && (shiftY == 0)) {
return;
}
var currScreenCenter = map.geoToScreen(map.getCenter());
var newY = (currScreenCenter.y - shiftY);
var newX = (currScreenCenter.x - shiftX);
var newGeoCenter = map.screenToGeo(newX, newY);
map.setCenter(newGeoCenter, true);
}
}, 20);
}
map.addEventListener("mapviewchange",checkBubble);
Thanks a lot works great! I extend to the case that the bubble is outside at the bottom:
...
// check, if infobubble isn't too far to up
if ((objRect.top-border) < mapRect.top) {
shiftY = (mapRect.top - (objRect.top-border));
} else {
if ((objRect.bottom+border) > mapRect.bottom) {
shiftY = -(objRect.bottom - (mapRect.bottom-border));
}
}
...
Regards
Chris
I have been trying to create a Placemark that I can hide and show (like turning visibility on and off) on demand (on click)... I am using this to make the placemark:
function placemark(lat, long, name, url, iconsrc){
var placemark = ge.createPlacemark(name);
ge.getFeatures().appendChild(placemark);
placemark.setName(name);
// Create style map for placemark
var icon = ge.createIcon('');
if(iconsrc == "0")
icon.setHref('http://maps.google.com/mapfiles/kml/paddle/red-circle.png');
else{
icon.setHref(iconsrc);
}
var style = ge.createStyle('');
style.getIconStyle().setIcon(icon);
if(iconsrc != "0")
style.getIconStyle().setScale(2.5);
placemark.setStyleSelector(style);
// Create point
var point = ge.createPoint('');
point.setLatitude(lat);
point.setLongitude(long);
//point.setAltitudeMode(1500);
placemark.setGeometry(point);
google.earth.addEventListener(placemark, 'click', function(event) {
// Prevent the default balloon from popping up.
event.preventDefault();
var balloon = ge.createHtmlStringBalloon('');
balloon.setFeature(placemark); // optional
balloon.setContentString(
'<iframe src="'+ url +'" frameborder="0"></iframe>');
ge.setBalloon(balloon);
});
}
I have tried everything... from this:
function hidePlacemark(name){
var children = ge.getFeatures().getChildNodes();
for(var i = 0; i < children.getLength(); i++) {
var child = children.item(i);
if(child.getType() == 'KmlPlacemark') {
if(child.getId()== name)
child.setVisibility(false);
}
}
}
to using this ge.getFeatures().removeChild(child);
can anyone point me to the right direction on creating a function that will allow me to turn the visibility on/off on demand please.
Your hidePlacemark function is missing some {} in your final IF statement
if(child.getId()== name)
you have
function hidePlacemark(name){
var children = ge.getFeatures().getChildNodes();
for(var i = 0; i < children.getLength(); i++) {
var child = children.item(i);
if(child.getType() == 'KmlPlacemark') {
if(child.getId()== name)
child.setVisibility(false);
}
}
}
make it
function hidePlacemark(name){
var children = ge.getFeatures().getChildNodes();
for(var i = 0; i < children.getLength(); i++) {
var child = children.item(i);
if(child.getType() == 'KmlPlacemark') {
if(child.getId()== name) {
child.setVisibility(false);
}
}
}
}
HOWEVER ------- you are better off doing this as it is much faster as you don't need to loop through ALL your placemarks
function hidePlacemark(name) {
var placemark = ge.getElementById(name);
placemark.setVisibility(false);
}
I think the plain ge.getFeatures().removeChild(placemark); works.
I played with this GooglePlayground, and just added the following code to line 8 (that is empty in this GooglePlayground Sample):
addSampleButton('Hide Placemark', function(){
ge.getFeatures().removeChild(placemark);
});
Clicking the button Hide Placemark hides the placemark like a charm here. Any chances your problem is somewhere else in your code?
I've got a whole bunch of rects on my canvas.
I'd like to change the stroke on whatever rect the user clicks, as well as running some other javascript. My simplified code is below.
var canvas = Raphael("test");
var st = canvas.set();
for (var i = 0; i < 2; i++) {
var act = canvas.rect(///edited for brevity////).attr({"stroke":"none"});
st.push(act)
act.node.onclick = function() {
st.attr({stroke: "none"});
act.attr({stroke: "yellow"});
}
}
Right now, no matter what rect I click on, it's only changing the stroke on the last rect drawn.
Any ideas?
Not a Raphaël problem but rather lack of closure understanding. Easily could be fixed by self invoking function:
for (var i = 0; i < 2; i++) {
var act = canvas.rect(///edited for brevity////).attr({"stroke":"none"});
st.push(act)
(function (act) {
act.node.onclick = function() {
st.attr({stroke: "none"});
act.attr({stroke: "yellow"});
}
})(act);
}
//Try and then embellish
st[i].click(function (e)
{
this.attr({stroke: "yellow"});
}
I've got some buttons that have toggle set to true. I'm trying to re-set the button's state to unselected. But, I can't access the button directly like: button.selected=false.
I'm accessing the HBox's children which are the buttons. UIComonent doesn't have a selected property. So, how do I de-select the toggle in this bit of code below?
for (var j : int=0; j < theHBox.numChildren; j++){
var child : DisplayObject = theHBox.getChildAt(j);
var myButton:UIComponent = child as UIComponent;
myButton.setStyle("borderColor", "blue");
myButton.visible = true;
}
If possible, I would recommend casting the UIComponent to a button:
for (var j : int=0; j < theHBox.numChildren; j++){
var child : DisplayObject = theHBox.getChildAt(j);
if(child is Button){
var myButton:Button = child as Button;
myButton.setStyle("borderColor", "blue");
myButton.visible = true;
} else if(child is somethingElse){
// do something else
}
}
You could also do something like this:
for (var j : int=0; j < theHBox.numChildren; j++){
var child : DisplayObject = theHBox.getChildAt(j);
var myButton:UIComponent = child as UIComponent;
myButton.setStyle("borderColor", "blue");
myButton.visible = true;
myButton['toggle'] = false;
}
Which will work if all children are buttons, but if the 'myButton' does not have a toggle property, it will throw a run time error.