I was following the Google-maps overlay example and have modified it to fit my needs. This is my new draw prototype for USGSOverlay:
USGSOverlay.prototype.draw = function()
{
//need to use projection to get image position from latLng to Px
var overlayProjection = this.getProjection();
var mapPos = new google.maps.LatLng(this.y_, this.x_);
var posInPx = overlayProjection.fromLatLngToDivPixel(mapPos);
//calculate the size in current zoom
//imageScaleFactor is a global variable placed on top in document
var dx = Math.abs(this.img_.naturalWidth * Math.pow(2, map.getZoom()) * imageScaleFactor);
var dy = (dx / this.img_.naturalWidth) * this.img_.naturalHeight;
// Resize the image's div to fit the indicated dimensions.
//places the image so that the given input (x_, y_) is in the center
var div = this.div_;
div.style.left = posInPx.x - dx / 2 + 'px';
div.style.top = posInPx.y - dy / 2 + 'px';
div.style.width = dx + 'px';
div.style.height = dy + 'px';
};
When I load the page for the first time my overlays would not appear until I translated the map for a long enough distance or zoomed in/out.
The problem is that I the operations this.img_.naturalWidth and this.img_.naturalHeight was taking too long and didn't give a value in time for the map to be initiated where I assume it runs the draw function for each overlay once.
My solution was to add a listener for the image in the onAdd prototype for USGSOverlay:
var thisOverlay = this;
//draw country when image is finished loading
this.img_.onload = function(e){
thisOverlay.draw();
}
This will call the draw function of the overlay once it's image is loaded.
The thisOverlay variable is needed because the object itself cannot be accessed from the onload function as far as I can tell.
Related
how can i space the Collapsible tree nodes in circles going around the root node?Example of picture below.second image what i currently have now.
i know it has something to do with the X and Y position in this method.But i just can't figure out how.
original code i got it from Original code here
function update(source) {
// Assigns the x and y position for the nodes
var treeData = treemap(root);
// Compute the new tree layout.
var nodes = treeData.descendants(),
links = treeData.descendants().slice(1);
debugger
// Normalize for fixed-depth.
nodes.forEach(function (d) {
//i know i have to do something here
d.y = d.depth * 180;
});
// Transition to the proper position for the node
//then it will update the transform and translate
enter code here
nodeUpdate.transition()
.duration(duration)
.attr("transform", function (d) {
return "translate(" + d.y + "," + d.x + ")";
});
solved.this is my outcome.
instead of using translate for my rotating.i use rotate class with transform.
I have a map drawn using leaflet. In that map I have drawn several markers at different locations. On clicking the marker I am creating a popup div that shows some message.
I have the code:
markers.on("click", function(d) {
div.html("This is Some info").style(
"left", (d3.event.pageX) + "px").style(
"top", (d3.event.pageY - 80) + "px");
}
So the div appears in the location where I clicked i.e. at the location of the marker.
Now if I drag the map the markers move along with the map but the div remains at the same location.
How can I change the style of div with drag event so that the div also moves along with marker?
I was trying the following code in the drag event method:
if(d.code==clickedcode)
{
console.log((map.latLngToLayerPoint([ d.lat, d.lon ]).x) + "px , "
+(map.latLngToLayerPoint([ d.lat, d.lon ]).y - 80) + "px");
div.style["left"]=(map.latLngToLayerPoint([ d.lat, d.lon ]).x) + "px";
div.style["top"]=(map.latLngToLayerPoint([ d.lat, d.lon ]).y - 80) + "px";
}
But it still shows the same pixel position as previous time.
You could try using the map 'drag' event to calculate the shift and then apply that to your div location. Something along these lines...
var startCoords;
var startLat;
var startLng;
var movedCoords;
var shiftLat;
var shiftLng;
map.on('dragstart', function() {
startCoords = map.getCenter();
startLat = startCoords.lat;
startLng = startCoords.lng;
console.log("STARTED FROM: " + startLat + "," +startLng);
});
map.on('drag', function() {
movedCoords = map.getCenter();
shiftLat = startLat - movedCoords.lat;
shiftLng = startLng - movedCoords.lng;
console.log("Shifted: " + shiftLat + "," + shiftLng);
//apply shift to custom div here...
});
Recently I started working on HTML5 Canvas, I'm new to it.
I've a problem as follows:
I'm loading a Canvas with Body Chart Image (Predefined Image) and on that User will Draw some lines, shapes, etc.
After that I'll generate an image object as follows
var canvas = document.getElementById("MyCanvas");
var dataURL = canvas.toDataURL();
var image = new Image();
image.src = dataURL;
But, Here it generates only those elements which are drawn by users (lines, shapes) as PNG Image. It won't take that Predefined canvas background Image.
I need to generate a PNG image which should include both the Canvas background Image as well as User entered drawing elements.
How to do this?
Try to actually draw you image onto your canvas, utilizing these functions:
var canvas = document.getElementById("MyCanvas");
var img = new Image();
img.src = 'pathToYourImageHere';
canvas.drawImage(img,0,0); /* 0,0 is x and y from the top left */
When you now try to save it, it should also save your background image.
EDIT:
In response to your comment:
You can circument your layering problem by using two different canvases. One for the image, and one for your drawing. Then layer them on top of each other using absolute positioning.
You can read more here: Save many canvas element as image
EDIT2:
But actually you shouldn't have a layering problem, since the following code will first draw the image and then draw the arc, and the layering will be fine:
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = "somePathToAnImage";
context.drawImage(imageObj, 50, 50);
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "red";
context.stroke();
Even though the layering is fine, you will be better of by using two canvases, in case you would like to only save the drawing, without the background. You can always save both into a new canvas and save that, when you only use one canvas you'll have a hard time separating the drawing from the background.
This is because the image needs time to load, you have to use the onload function.
imgObj.onload = function() { context.drawImage(imageObj, 50, 50); imgLoaded = true;}
if (imgLoaded) { /*you draw shapes here */ }
I have made a resizeable custom overlay with an image and it works, you can see it here,
debug. In the upper right hand corner and lower left corner there are some red corner icons that you can drag and resize the image and overlay. The problem is that when you make the image smaller, it leaves behind remnants of the lager scale images.
I then added a function to remove the overlay before drawing the new one, straight out of the example, overlay.onRemove(); It worked, but as soon as you un click the marker it gives the error "parentnode: object is null or undefined", you can see it here debug2
If you view the source on them, the drag listener in on line 173 and calls the overlay = new USGSOverlay(bounds, srcImage, map, 'yes'); on line 194.
The function is on line 71. and looks for ifDrag and then deletes the previous overlay, I am baffled as to why it works but as soon as you un click the marker it throws the error and breaks the script.
It would be awesome if someone could provide me with a fix or workaround to the error. This is a very nice feature to have and am too close to give up. Thanks.
I believe your problem is in the draw function:
var div;
USGSOverlay.prototype.draw = function() {
// Size and position the overlay. We use a southwest and northeast
// position of the overlay to peg it to the correct position and size.
// We need to retrieve the projection from this overlay to do this.
var overlayProjection = this.getProjection();
// Retrieve the southwest and northeast coordinates of this overlay
// in latlngs and convert them to pixels coordinates.
// We'll use these coordinates to resize the DIV.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Size the image's DIV to fit the indicated dimensions.
div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
}
Don't you want to remove the external declaration of var div and make the references within the draw function reference this.div? I believe that is your problem.
Shouldn't the last lines of draw be implemented like this:
//Remove this line:
//div = this.div_;
this.div_.style.left = sw.x + 'px';
this.div_.style.top = ne.y + 'px';
this.div_.style.width = (ne.x - sw.x) + 'px';
this.div_.style.height = (sw.y - ne.y) + 'px';
You also have similar code in the add function. I suggest that you make the code in add similar - just work directly with this.div_; it looks like you might be getting a reference mixed around.
We came to the conclusion that too many events were fired and killed the script, 'dragend' was the solution (Not perfect but works), works in all browsers and have set opacity at 50% to get the perfect alignment to the location. Appreciate your help. Cheers.
In a drag+drop situation using Flex, I am trying to get the object center aligned to the point of drop- somehow, irrespective of the adjustments to height and width, it is always positioning drop point to left top.
here is the code..
imageX = SkinnableContainer(event.currentTarget).mouseX;
imageY = SkinnableContainer(event.currentTarget).mouseY;
// Error checks if imageX/imageY dont satisfy certain conditions- move to a default position
// img.width and img.height are both defined and traced to be 10- idea to center image to drop point
Image(event.dragInitiator).x = imageX-(img.width)/2;
Image(event.dragInitiator).y = imageY-(img.height)/2
The last 2 lines don't seem to have any effect. Any ideas why-must be something straightforward, that I am missing...
You can use the following snippet:
private function on_drag_start(event:MouseEvent):void
{
var drag_source:DragSource = new DragSource();
var drag_initiator:UIComponent = event.currentTarget as UIComponent;
var thumbnail:Image = new Image();
// Thumbnail initialization code goes here
var offset:Point = this.localToGlobal(new Point(0, 0));
offset.x -= event.stageX;
offset.y -= event.stageY;
DragManager.doDrag(drag_initiator, drag_source, event, thumbnail, offset.x + thumbnail.width / 2, offset.y + thumbnail.height / 2, 1.0);
}
Here is one important detail. The snippet uses stage coordinate system.
If you use event.localX and event.localY, this approach will fail in some cases. For example, you click-and-drag a movie clip. If you use localX and localY instead of stage coordinates, localX and localY will define coordinates in currently clicked part of the movie clip, not in the whole movie clip.
Use the xOffset and yOffset properties in the doDrag method of DragManager.
Look here for an example.