Develop Reference

Background scale, keep position of drawn element in canvas

I use a system that combine a div background image and a canvas. This system let me appear the background like there is a light like this :
I permit to the user to zoom in/out the background. But i need to keep every drawn element positions. Today i have this :
After zoom in :
The wall height and width are correctly resize but its position move with the scale.
For the code i have this for the background :
document.getElementById("background").style.transform = "translate("+backgroundTransform.x+"px,"+backgroundTransform.y+"px) scale("+backgroundTransform.zoom+","+backgroundTransform.zoom+")";
And this for the drawn element :
this.x = function(x){
if(x != undefined)
this.position.x = x;
return this.position.x + backgroundTransform.x;
},
this.y = function(y){
if(y != undefined)
this.position.y = y;
return this.position.y + backgroundTransform.y;
},
this.width = function() {return this.baseWidth * this.globalZoom()};
this.height = function() {return this.baseHeight * this.globalZoom()};
If you need any informations please let me know.
Thanks.

I switch the div background with a canvas background. Now they can scale at the same time.

How can make my function rotate 360 and move up and down?

Hey guys so I'm working on animating my java script for a project, and being a newbie at java-script I have only figured out how to make my image move up and down in a set area. How can make my object "dank" also spin 360 infinitly whiles using the following code to move it up and down? Any help is appreciated!
window.addEventListener("load", function() {
function myMove() {
var elem = document.getElementById("dank");
var pos = 100;
var id = setInterval(frame, 10);
function frame() {
pos += 0.3;
elem.style.top = pos + "px";
if (Math.abs(pos) >= 250){
pos = 100;
}
frame();
}
}

You can use elem.style.transform to rotate text. If you assign degrees to a number it'd be something like:
elem.style.transform = "rotate(" + degrees + "deg)"
Also you should remove "frame();", you don't need it because setInterval(frame, 10) already calls the function over and over. Having it in there might cause some recursion problems.

Using OpenLayers ZoomBox in JavaFX WebView

I am using JavaFX WebView included in jdk-8u45 to open a web page which shows a map using OpenLayers 2.13.1. I'm trying to zoom in on the map using a ZoomBox with a BoxHandler. The zooming works like it should, but the problem is how the the rectangle is drawn.
The wanted result is that once I click on the map and start dragging, the rectangle should start drawing as I move the mouse. This works fine in all browsers, except inside my WebView. What happens is that only after I have moved my mouse a few cm in both x- and y-direction (e.g. diagonally), the rectangle starts drawing from this position (not the one where I started dragging). I have looked at the coordinates from the different mouse events, and they all seem to be correct, which is confirmed by the fact that it zooms in on the area I actually dragged over (e.g. not the area that is drawn).
JavaScript console.log stmts output coordinates from the moment I click on the map, but nothing is drawn in the beginning of the drag.
Has anyone had similar problems with WebView? As I said, the code works like a charm in all other browsers I have tried (Safari, Firefox, Chrome, IE). I have looked around on the internet, but I haven't been able to find an answer to my problem.
Code taken from BoxHandler.js:
startBox: function (xy) {
;;;console.log(xy);
;;;console.log("startbox xy=" + xy.x + "," + xy.y);
if(this.zoomBox){
this.removeBox();
}
this.zoomBox = OpenLayers.Util.createDiv('zoomBox',
this.dragHandler.start);
this.zoomBox.className = this.boxDivClassName;
this.zoomBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
this.map.viewPortDiv.appendChild(this.zoomBox);
OpenLayers.Element.addClass(
this.map.viewPortDiv, "olDrawBox"
);
},
/**
* Method: moveBox
*/
moveBox: function (xy) {
var startX = this.dragHandler.start.x;
var startY = this.dragHandler.start.y;
;;;console.log("dragHandler.start.x=" + this.dragHandler.start.x);
;;;console.log("dragHandler.start.y=" + this.dragHandler.start.y);
var deltaX = Math.abs(startX - xy.x);
var deltaY = Math.abs(startY - xy.y);
this.zoomBox.style.width = Math.max(1, deltaX) + "px";
this.zoomBox.style.height = Math.max(1, deltaY) + "px";
this.zoomBox.style.left = xy.x < startX ? xy.x+"px" : startX+"px";
this.zoomBox.style.top = xy.y < startY ? xy.y+"px" : startY+"px";
console.log("zoombox width=" + this.zoomBox.style.width);
console.log("zoombox height=" + this.zoomBox.style.height);
console.log("zoombox left=" + this.zoomBox.style.left);
console.log("zoombox top=" + this.zoomBox.style.top);
// depending on the box model, modify width and height to take borders
// of the box into account
var box = this.getBoxCharacteristics();
;;;console.log("movebox xOffset=" + box.xOffset);
;;;console.log("movebox yOffset=" + box.yOffset);
if (box.newBoxModel) {
if (xy.x > startX) {
this.zoomBox.style.width =
Math.max(1, deltaX - box.xOffset) + "px";
}
if (xy.y > startY) {
this.zoomBox.style.height =
Math.max(1, deltaY - box.yOffset) + "px";
}
}
},
/**
* Method: endBox
*/
endBox: function(end) {
var result;
console.log(this.map.viewPortDiv.lastElementChild.style);
if (Math.abs(this.dragHandler.start.x - end.x) > 5 ||
Math.abs(this.dragHandler.start.y - end.y) > 5) {
var start = this.dragHandler.start;
var top = Math.min(start.y, end.y);
var bottom = Math.max(start.y, end.y);
var left = Math.min(start.x, end.x);
var right = Math.max(start.x, end.x);
result = new OpenLayers.Bounds(left, bottom, right, top);
} else {
result = this.dragHandler.start.clone(); // i.e. OL.Pixel
}
this.removeBox();
this.callback("done", [result]);
}
Also, I don't know if this is relevant, but when I inspect the HTML div element that holds the map (using Firebug Lite) it looks like the top border of the div is further down than it should be. The map (in correct position on the webpage) is extending beyond the top border. This is different behavior than in the other browsers I mentioned.
Any help would be appreciated.

Rotate marker in Leaflet

How can I rotate a marker in leaflet? I will have a lot of markers, all with a rotation angle.
I've tried this solution from runanet/coomsie at Leaflet on GitHub, but nothing happens with my marker:
L.Marker.RotatedMarker= L.Marker.extend({
_reset: function() {
var pos = this._map.latLngToLayerPoint(this._latlng).round();
L.DomUtil.setPosition(this._icon, pos);
if (this._shadow) {
L.DomUtil.setPosition(this._shadow, pos);
}
if (this.options.iconAngle) {
this._icon.style.WebkitTransform = this._icon.style.WebkitTransform + ' rotate(' + this.options.iconAngle + 'deg)';
this._icon.style.MozTransform = 'rotate(' + this.options.iconAngle + 'deg)';
this._icon.style.MsTransform = 'rotate(' + this.options.iconAngle + 'deg)';
this._icon.style.OTransform = 'rotate(' + this.options.iconAngle + 'deg)';
}
this._icon.style.zIndex = pos.y;
},
setIconAngle: function (iconAngle) {
if (this._map) {
this._removeIcon();
}
this.options.iconAngle = iconAngle;
if (this._map) {
this._initIcon();
this._reset();
}
}
});
var rotated = new L.Marker.RotatedMarker([63.42, 10.39]);
rotated.setIconAngle(90);
rotated.addTo(map);
Any other ideas or solutions? (Testing with Firefox 16 on Windows.)

Running the code as it is, the icon will disappear when you try to rotate it in Firefox (try rotating on a mouseclick instead of on load and you will see that the icon appears before you try to rotate it), but I'm willing to bet it will work (the first time) in a webkit browser. The reason is the transform lines:
this._icon.style.WebkitTransform = this._icon.style.WebkitTransform + ' rotate(' + this.options.iconAngle + 'deg)';
this._icon.style.MozTransform = 'rotate(' + this.options.iconAngle + 'deg)';
Firefox also uses CSS transforms to position icons, so before rotation it will have Moztransform will have a value of for example "translate(956px, 111px)". The way the code is now, it will replace that with simply "rotate(90deg)" and Firefox won't know where to place the icon.
You want Moztransform to have a value of "translate(956px, 111px) rotate(90deg)", so if you use this code it will work the first time, like in webkit.
this._icon.style.MozTransform = this._icon.style.MozTransform + ' rotate(' + this.options.iconAngle + 'deg)';
However, it will break on the next rotate, so you really need to set both the translation and rotation in one go, like this:
this._icon.style.MozTransform = L.DomUtil.getTranslateString(pos) + ' rotate(' + this.options.iconAngle + 'deg)';
Then you can get rid of the L.DomUtil.setPosition(this._icon, pos); at the start.

This solution is by far the easiest: https://github.com/bbecquet/Leaflet.RotatedMarker
Note: it only modifies the existing marker, allowing two more options (rotationAngle and rotationOrigin).
The solution works very well. As per the GitHub page, a usage example:
L.marker([48.8631169, 2.3708919], {
rotationAngle: 45
}).addTo(map);

What works very well for me is adding a data-rotate="[angle]" attribute to each marker. This allows you to call the following JQuery statement on each refresh when necessary:
$('.your-marker-class').each(function () {
var deg = $(this).data('rotate') || 0;
var rotate = 'rotate(' + $(this).data('rotate') + 'deg) scale(0.5,0.5)';
$(this).css({
'-webkit-transform': rotate,
'-moz-transform': rotate,
'-o-transform': rotate,
'-ms-transform': rotate,
'transform': rotate
});
});
Works very fast and with hundreds/thousands of markers. Found this method in some other post somewhere on the internets but seemed right to share here also.

If you're using react-leaflet, I built upon this idea (https://github.com/bbecquet/Leaflet.RotatedMarker) to create a React component that extends Marker and accepts both rotation and rotationOrigin as a prop.
// Libs
import L from 'leaflet'
// Components
import { ExtendableMarker } from 'react-leaflet-extendable'
// HOCS
import { withLeaflet } from 'react-leaflet'
const proto_setPos = L.Marker.prototype._setPos
const LeafletMarker = L.Marker.extend({
_setPos(pos: [number, number]) {
proto_setPos.call(this, pos)
this._setRotation(this.options.rotation)
},
_setRotation(rotation: number | null | undefined) {
if (typeof rotation === 'number') {
this._icon.style[L.DomUtil.TRANSFORM + 'Origin'] = this.options.rotationOrigin || 'center'
const transform = this._icon.style[L.DomUtil.TRANSFORM] + ` rotate(${rotation}deg)`
this._icon.style[L.DomUtil.TRANSFORM] = transform
}
},
})
const createRotatedMarker = (pos: [number, number], options: any) => {
return new LeafletMarker(pos, options)
}
class RotatedMarker extends ExtendableMarker {
public createLeafletElement() {
return createRotatedMarker(this.props.position, { ...this.props })
}
}
export default withLeaflet(RotatedMarker)

Rotating on mouse move

Something I've wanted to learn for quite a time now, but haven't been able to figure out.
http://jsfiddle.net/Mobilpadde/Xt7ag/
Then you move the mouse, it follows, which is the easy part, but I want to rotate too, like always look in the direction of the mouse, but not so static, more like, if you move your mouse up, it should kinda rotate first, and then you move the mouse further away, it should begin to follow again (If you know what I mean).
Is that something simple to do, or 3k lines? (Or maybe a jQuery plugin?)

Hiya I got it something more closer by using an old post of mine : demo http://jsfiddle.net/Z3pGQ/3/
I am still working, will flick you more smoother version or if you can improve before me:
Old post: Rotating an element based on cursor position in a separate element
Hope it helps, I am trying to make it smoother now, cheers
Sample code
$(document).ready(function() {
$(document).mousemove(function(e) {
$(".firefly").css({
"top": (e.pageY * 2) + "px",
"left": (e.pageX * 2 + 130) + "px"
});
})
})
var img = $(".firefly");
if (img.length > 0) {
var offset = img.offset();
function mouse(evt) {
var center_x = (offset.left) + (img.width() / 2);
var center_y = (offset.top) + (img.height() / 2);
var mouse_x = evt.pageX;
var mouse_y = evt.pageY;
var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
var degree = (radians * (180 / Math.PI) * -1) + 90;
img.css('-moz-transform', 'rotate(' + degree + 'deg)');
img.css('-webkit-transform', 'rotate(' + degree + 'deg)');
img.css('-o-transform', 'rotate(' + degree + 'deg)');
img.css('-ms-transform', 'rotate(' + degree + 'deg)');
}
$(document).mousemove(mouse);
}​
Image

This is going to involve a lot more math than I want to do right now, but you can apply rotations with css easily. Here are the properties for mozilla and webkit, you can see the rest of the (IE,Opera...) at this page. Here is your function with a 120deg rotation applied. You will still need to calculate the proper rotation, and adjust the left and top accordingly.
$(document).mousemove(function(e){
$(".firefly").css({
"top":(e.pageY*2)+"px",
"left":(e.pageX*2+130)+"px",
"-moz-transform": "rotate(120deg)",
"-webkit-transform": "rotate(120deg)"});
})

There is a jQuery plugin for that http://pixelscommander.com/en/iphone-development/rotate-html-elements-with-mouse/