Hi I'm trying to remove an Image control at runtime...
var modifiedPic = (DataDynamics.ActiveReports.Picture)reportSection.Controls[controlIdx];
modifiedpic.ResetImage() only resets the image but doesn't remove the control.
I also tried modifiedPic.Image.RemovePropertyItem(771);
This didn't work either. Is there any way to remove the control at runtime?
Also I want to set the control.Location.X value. How can this be achieved?
Try This.
This Shoud remove the control.
var modifiedPic = (DataDynamics.ActiveReports.Picture)reportSection.Controls[controlIdx];
reportSection.Controls.Remove(modifiedPic);
for assigning the loaction.X and location.Y points we have to define
System.Drawing.PointF x= new System.Drawing.PointF();
var modifiedPic = DataDynamics.ActiveReports.Picture)reportSection.Controls[controlIdx];//TargetControl:
var modifiedPic1 = (DataDynamics.ActiveReports.Picture)reportSection.Controls[controlIdx];//Control to get value of X:
x.X = modifiedPic1.Location.X;
modifiedPic.Location = x;
Related
As a newcomer to javascript and the use of leaflet I'm unsure which subject this should be.
Using the Layer Groups and Layers Control example as a model I wish to assign the Control text to the overlays from a variable.
Inserting the variable name simply uses that as text.
Code I've used follows.
var cities_title_0="cities(N-S)"
var cities_title_1="cities(E-W)"
var overlays = {cities_title_0: cities_layer[0],cities_title_1: cities_layer[1] };
L.control.layers(null,overlays).addTo(map);
How can I get the value of the variable in the control and not it's name please?
Previously (<= ES5) you would have to proceed in 2 steps:
Initialize the object var overlays = {}
Assign your computed key: overlays[cities_title_0] = cities_layer[0]
One way is to put the variable name in [] - eg
var cities_title_0="cities(N-S)"
var cities_title_1="cities(E-W)"
var overlays = {[cities_title_0]: cities_layer[0], [cities_title_1]: cities_layer[1] };
L.control.layers(null,overlays).addTo(map);
I'm new to leaflet and am trying to implement a set of markers with different CSS-styles.
So, I am aware that after adding a marker to a map I can access different CSS-attributes by calling getElement() on my marker for example:
marker.addTo(map);
marker.getElement().style.borderColor = '#000';
This works just fine, but when adding a marker to a layer, this can no longer be used since a TypeError occurs (getElement() is undefined). Here is the example code where the error occurs:
myLayer.addLayer(marker);
marker.getElement().style.borderColor = '#000';
Am I overlooking a simpler way to set CSS-Attributes for markers and divicons that are added to layers or is there a similar way to access layer-added markers and divicons in JavaScript?
So I found a solution that is working for me.
The idea is to extend the function that is used to create the icon.
Last answer here github.com/Leaflet/Leaflet/issues/5231 helped a lot.
var borderSize = ...;
L.DivIcon.Custom = L.DivIcon.extend({
createIcon: function(oldIcon) {
var icon = L.DivIcon.prototype.createIcon.call(this, oldIcon);
icon.style.borderSize = borderSize;
...
return icon;
}
})
var icon = new L.DivIcon.Custom({
...
});
var ll = L.latLng(entry.Longitude, entry.Latitude);
var marker = L.marker(ll, {
icon: icon
})
this.myLayer.addLayer(marker);
Welcome to SO!
When not added onto a map (since your parent myLayer may not be added to the map itself), a marker does not have any element.
If you do not need to change too many styles individually and dynamically, you might rather use the className option of your Icon / DivIcon.
I am working on a application and I want to get directions for more than 2 points
Which I assume other than origin and destination other locations are waypoints.
So I am trying to use directions.setWaypoint() to add waypoints to the map but it doesn't work
please help for me to understand what I do wrong.
I have created a JsFiddle https://jsfiddle.net/3uzm1nh0/1/
and this is the documentation I am referring to https://github.com/mapbox/mapbox-directions.js/blob/mb-pages/API.md
Thanks in advance.
You need someting like this
// = L.mapbox.directions({profile: 'mapbox.driving'})
var directions = L.mapbox.directions();
var directionsLayer = L.mapbox.directions.layer(directions).addTo(map);
var directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions).addTo(map);
directions.setOrigin(L.latLng(14.6059596413528, -90.49169592683657));
directions.addWaypoint(0,L.latLng(14.60026436463006, -90.49669902226937));
directions.addWaypoint(1,L.latLng(14.59689160135752, -90.49520561914318));
directions.addWaypoint(2,L.latLng(14.60036292858185, -90.49586222238077));
directions.setDestination(L.latLng(14.6059596413528, -90.49169592683657));
directions.query();
I need to manipulate the text elements of the first and last tick of an axis to bring them more towards the center.
I am trying to select them, one at the time, with something like svg.select('.tick:last-child text') but it doesn't work. I'd then apply .transform('translate(4,0)')...
Am I doing something wrong? How can I achieve this?
One thing you could do is to create custom sub-selections by adding methods to d3.selection.prototype. You could create a selection.first() method that selects the first item in a selection, and a selection.last() method that selects the last item. For instance:
d3.selection.prototype.first = function() {
return d3.select(this[0][0]);
};
d3.selection.prototype.last = function() {
var last = this.size() - 1;
return d3.select(this[0][last]);
};
This would let you do the following:
var tickLabels = svg.selectAll('.tick text');
tickLabels.first()
.attr('transform','translate(4,0)');
tickLabels.last()
.attr('transform','translate(-4,0)');
Of course, you need to make sure that you only have one axis if you do it that way. Otherwise, specify the axis in your initial selection:
var tickLabels = svg.selectAll('.axis.x .tick text');
HERE is an example.
Here's the cleanest method I've found:
g.selectAll(".tick:first-of-type text").remove();
g.selectAll(".tick:last-of-type text").remove();
As google brought me here, I also want to add a cleaner method to what Adam Grey wrote.
Sometimes you just want to do it without taking a reference of selectAll .
svg.selectAll('.gridlines').filter(function(d, i,list) {
return i === list.length - 1;
}).attr('display', 'none');
the 3rd parameter of the filter function gives you the selected List of elements.
They don't exist in d3 specifically, but you can use the .firstChild and .lastChild methods on a node.
You can first select all of the parents of the node, and then operate within the scope of a .each() method, like so:
d3.selectAll('.myParentElements').each(function(d,i){
var firstChild = this.firstChild,
lastChild = this.lastChild;
//Do stuff with first and last child
});
Within the scope of .each(), this refers to the individual node, which is not wrapped by a d3 selection, so all of the standard methods on a node are available.
Using .filter() with a function also works selection.filter(filter) :
var gridlines;
gridlines = svg.selectAll('.gridlines');
gridlines.filter(function(d, i) {
return i === gridlines.size() - 1;
}).attr('display', 'none');
It's for D3.js v4
d3.selection.prototype.first = function() {
return d3.select(
this.nodes()[0]
);
};
d3.selection.prototype.last = function() {
return d3.select(
this.nodes()[this.size() - 1]
);
};
Example:
var lines = svg.selectAll('line');
lines.first()
.attr('transform','translate(4,0)');
lines.last()
.attr('transform','translate(-4,0)');
Here is another, even though I used Fered's solution for a problem I met.
d3.select(d3.selectAll('*').nodes().reverse()[0])
You can SET the size of a HTA window but I can't find a way to GET its size.
All I can think of is reading document.body.offsetWidth and .offsetHeight, but those give you the viewport size not the actual window size.
Is it possible to know that?
It seems there are no properties or methods to get that information. The now beta-released IE9 has the new properties outterWidth and outterHeight, but that is not an option for now.
So I devised a workaround for this:
function addWinSizeGetterFuncs(){
var currViewportWidth = document.body.offsetWidth ;
var currViewportHeight = document.body.offsetHeight ;
resizeTo(currViewportWidth,currViewportHeight) ;
var chromeWidth = currViewportWidth-document.body.offsetWidth ;
var chromeHeight = currViewportHeight-document.body.offsetHeight ;
resizeTo(currViewportWidth+chromeWidth,currViewportHeight+chromeHeight) ;
window.getWidth = new Function('return document.body.offsetWidth+'+chromeWidth) ;
window.getHeight = new Function('return document.body.offsetHeight+'+chromeHeight) ;
}
What that function does is to create two new methods for the window object: window.getWidth() and window.getHeight(). They will get the actual size of the window.
The function requires the existence of the body object so it has to be executed after the BODY tag.
And now that we are at it, the same problem applies for the window position. You can't get the actual window position. What you can get is the viewport position relative to the screen.
So the same workaroud serves for this as well:
function addWinPosGetterFuncs(){
var currViewportLeft = screenLeft ;
var currViewportTop = screenTop ;
moveTo(currViewportLeft,currViewportTop) ;
var viewportOffsetX = screenLeft-currViewportLeft ;
var viewportOffsetY = screenTop-currViewportTop ;
moveTo(currViewportLeft-viewportOffsetX,currViewportTop-viewportOffsetY) ;
window.getScreenX = new Function('return screenLeft-'+viewportOffsetX) ;
window.getScreenY = new Function('return screenTop-'+viewportOffsetY) ;
}
Likewise, the function creates two new methods that will retrieve the actual window position: window.getScreenX() and window.getScreenY()
Problem solved. I'll let you guys figure out how the function works ;)
minified version:
window.pos=new function(w,h,x,y){with(document.body)return(
resizeTo(w=offsetWidth,h=offsetHeight),resizeTo(w+(w=w-offsetWidth),h+(h=h-offsetHeight)),
moveTo (x=screenLeft ,y=screenTop ),moveTo (x-(x=screenLeft-x ),y-(y=screenTop-y )),{
w:function(){return offsetWidth +w},
h:function(){return offsetHeight+h},
x:function(){return screenLeft -x},
y:function(){return screenTop -y}
})};