How to convert this google maps v2 API function to v3? - google-maps

I need to convert this function to v3 API. This function is used to create an ellipse under a marker when selected. I have tried with projection and overlay, but without success.
function makePolyPoints(_marker)
{
var polyPoints = Array();
var markerPoint= _marker.getLatLng();
var projection = G_NORMAL_MAP.getProjection();
var mapZoom = map.getZoom();
var clickedPixel = projection.fromLatLngToPixel(markerPoint, mapZoom);
var ellipseRadA = 20;
var ellipseRadB = 10;
var polyNumSides = 20;
var polySideLength = 18;
for (var a = 0; a<(polyNumSides+1); a++) {
var aRad = polySideLength*a*(Math.PI/180);
var pixelX = clickedPixel.x + ellipseRadA * Math.cos(aRad);
var pixelY = -3 + clickedPixel.y + ellipseRadB * Math.sin(aRad);
var polyPixel = new GPoint(pixelX,pixelY);
var polyPoint = projection.fromPixelToLatLng(polyPixel,mapZoom);
polyPoints.push(polyPoint);
}
return polyPoints;
}
Here the function for v3 that doesn't work, i think a problem of zoom level but I can't find how to replace projection.fromLatLngToPixel(markerPoint, mapZoom);
function makePolyPoints(_marker)
{
var polyPoints = Array();
var markerPoint= _marker.getPosition();
var projection = map.getProjection();
var mapZoom = map.getZoom();
var clickedPixel = projection.fromLatLngToPoint(markerPoint);
var ellipseRadA = 20;
var ellipseRadB = 10;
var polyNumSides = 20;
var polySideLength = 18;
for (var a = 0; a<(polyNumSides+1); a++) {
var aRad = polySideLength*a*(Math.PI/180);
var pixelX = clickedPixel.x + ellipseRadA * Math.cos(aRad);
var pixelY = -3 + clickedPixel.y + ellipseRadB * Math.sin(aRad);
var polyPixel = new google.maps.Point(pixelX,pixelY);
var polyPoint = projection.fromPointToLatLng(polyPixel);
polyPoints.push(polyPoint);
}
return polyPoints;
}

Hmm.. Im going to use one of my favorite gmap examples to help you out.
Using var clickedPixel = projection.fromLatLngToPoint(markerPoint); dont give you yet clickedPixel coordinates, they are still world coordinates. See projection specs.
Specifying own mercator projection when calculating that kind of stuff is useful. Look closely to following lines: (in this code example)
var worldCoordinate = projection.fromLatLngToPoint(chicago);
var pixelCoordinate = new google.maps.Point(
worldCoordinate.x * numTiles,
worldCoordinate.y * numTiles);
(you can view source with firebug or similar).
If you dont have it (in mozilla: Tools -> web developer -> page source)
Hopefully, this will help you get through the problem :)

Related

How to Save positions for 3 objects in Array to make random position between each other by AS3?

How to Save positions for 3 objects in Array to make random position between each other by AS3?
import flash.geom.Point;
var arry:Point = new Point();
arry[0] = arry[78,200];
arry[1] = arry[217,200];
arry[2] = arry[356,200];
//object called b1
b1.x = arry[0][0];
b1.y = arry[0][1];
//object called b2
b2.x = arry[1][0];
b2.y = arry[1][1];
//object called b3
b3.x = arry[2][0];
b3.y = arry[2][1];
//make objects swap positions between each other
var rand:Number = (Math.random()*arry.length);
//output to see random position [[78,200],[217,200],[356,200]]
trace(arry);
to get random with tween like this... https://www.youtube.com/watch?v=8m_m64plQ6E
At compile time you should get this Error I suppose : "ReferenceError: Error #1069"
Here is a way to store the positions (like in the link you provided from youtube) :
import flash.geom.Point;
var squareWidth:uint = 40;
var squareHeight:uint = 40;
var marginX:uint = 100;
var marginY:uint = 75;
var spacer:uint = 10;
var positions:Vector.<Point > = new Vector.<Point > (9);
function setPositions(v:Vector.<Point>):void {
var count:uint = 0;
var posx:uint;
var posy:uint;
for (var i = 0; i < 3; i ++)
{
for (var j = 0; j < 3; j ++)
{
posx = (j * squareWidth) + (spacer * j) + marginX;
posy = (i * squareHeight) + (spacer * i) + marginY;
v[count] = new Point(posx,posy);
count++;
}
}
}
setPositions(positions);
trace(positions);
// output :
// (x=100, y=75),(x=150, y=75),(x=200, y=75),(x=100, y=125),(x=150, y=125),(x=200, y=125),(x=100, y=175),(x=150, y=175),(x=200, y=175)
So here you have nine Points to place the clips like in the video.
You just have to add a function to swap the nine boxes stored in another Vector.
In your case.
For 3 positions do the following if I understand your question.
import flash.geom.Point;
var positions:Vector.<Point> = new Vector.<Point>(3);
var p1:Point = new Point(78,200);
var p2:Point = new Point(217,200);
var p3:Point = new Point(356,200);
positions[0] = p1;
positions[1] = p2;
positions[2] = p3;
trace(positions);
// output : (x=78, y=200),(x=217, y=200),(x=356, y=200)
So, you're still unclear!
Your issue is to find a random position?
This may help you if this is the problem you're facing :
import flash.geom.Point;
var positions:Vector.<Point > = new Vector.<Point > (3);
var numbers:Vector.<uint> = new Vector.<uint>();
var numbersAllowed:uint = 3;
var rndNmbrs:Vector.<uint> = new Vector.<uint>(3);;
var p1:Point = new Point(78,200);
var p2:Point = new Point(217,200);
var p3:Point = new Point(356,200);
positions[0] = p1;
positions[1] = p2;
positions[2] = p3;
trace(positions);
function populateRndNmbrs(n:uint):void {
for (var i:uint = 0; i < n; i++)
{
numbers[i] = i;
}
}
populateRndNmbrs(numbersAllowed);
function populateRandomNumbers(n:uint):void
{
var rnd:uint;
for (var i:uint = 0; i < n; i++)
{
rnd = numbers[Math.floor(Math.random() * numbers.length)];
for (var j:uint = 0; j < numbers.length; j++)
{
if (rnd == numbers[j])
{
numbers.splice(j,1);
}
}
rndNmbrs[i] = rnd;
}
}
populateRandomNumbers(numbersAllowed);
trace("rndNmbrs = " + rndNmbrs);
for (var i:uint = 0; i < numbersAllowed; i++)
{
trace("b"+ (i+1) + ".x = " + positions[rndNmbrs[i]].x);
trace("b"+ (i+1) + ".y = " + positions[rndNmbrs[i]].y);
// In place of trace, you should place the boxes at those random positions.;
}
//output:
//(x=78, y=200),(x=217, y=200),(x=356, y=200)
//rndNmbrs = 2,0,1
//b1.x = 356
//b1.y = 200
//b2.x = 78
//b2.y = 200
//b3.x = 217
//b3.y = 200
Is that what you want? Or do you want to know how to create a motion effect?
I'm not sure about what you really need...
This will help you to place all the boxes in a random position.
You may do this like here bellow, and add a function to check if the random positions are not the same.
With only 3 MovieClips, you will often have the same random positions as long they're stored in the "positions Vector"
var squares:Vector.<MovieClip> = new Vector.<MovieClip>(3);
function populateMCs(target:DisplayObjectContainer,n:uint):void{
for (var i:uint = 0; i < n; i++){
squares[i] = target["b"+(i+1)];
}
}
function swapMCs():void{
for (var i:uint=0; i<squares.length; i++){
squares[i].x = positions[rndNmbrs[i]].x;
squares[i].y = positions[rndNmbrs[i]].y;
}
}
populateMCs(this,numbersAllowed);
swapMCs();
I give you a last example to get a motion effect in AS3.
I'm not a translator AS2 -> AS3 and a video is not the best way to show your code :(
This will make your boxes move smoothly, but not the way you want.
Now, you have to learn AS3 and try to make the job by yourself.
Then, if you have another issue, just ask clearly what you want.
var friction:Number = 0.15;
setDestination(squares[0],squares[0].x,350,friction);
setDestination(squares[1],squares[1].x,350,friction);
setDestination(squares[2],squares[2].x,350,friction);
squares[0].addEventListener(Event.ENTER_FRAME,moveClip);
squares[1].addEventListener(Event.ENTER_FRAME,moveClip);
squares[2].addEventListener(Event.ENTER_FRAME,moveClip);
function setDestination(mc:MovieClip,x:uint,y:uint,friction:Number):void{
mc.destinx = x;
mc.destiny = y;
mc.f = friction;
}
function moveClip(e:Event):void{
var mc:MovieClip = e.target as MovieClip;
trace(mc.name)
mc.speedx = (mc.destinx - mc.x);
mc.speedy = (mc.destiny - mc.y);
mc.x += mc.speedx*mc.f;
mc.y += mc.speedy*mc.f;
if((Math.floor(mc.speedx)<1) && (Math.floor(mc.speedy)<1)){
mc.removeEventListener(Event.ENTER_FRAME,moveClip);
trace("STOP MOVE FOR " + mc.name);
}
}

html5 drawing multiple canvas images

i've got a problem with canvas in html. I want to draw multiple canvas images.
I have created a loop which creates multiple canvas and then i want to draw in each canvas an image.
for (var i = 1; i <= playerStuff.MovingCards.length; i++){
$("#playersField").append("<canvas id='movingCardsField"+i+"' height='"+movingCardSizeY+"'\n\
width='"+movingCardSizeX+"'\n\
data='"+playerStuff.MovingCards[i-1].movePoints+"'></canvas>");
var imgObj = new Image();
var drawField = document.getElementById('movingCardsField'+i).getContext("2d");
imgObj.onload = function(){
drawField.drawImage(imgObj, 0,0);
};
imgObj.src = "./img/moveCards/"+playerStuff.MovingCards[i-1].name;
}
The result is that only the last canvas has a drawn image. What am I missing here?
Please dont use JQuery for this. In generally i'm not a friend of JQuery but thats my personally opinion,but here you should really dont useit, use the DOM its much more faster.
var playersField=document.getElementById("playersField");
var canvasElements=new Array ();
var canvasElement, drawField,imgObj;
var drawFields=new Array ();
for (var i = 0; i <= playerStuff.MovingCards.length; i++)
{
canvasElement=document.createElement ("canvas");
canvasElement.height=movingCardSizeY;
canvasElement.width=movingCardSizeX;
canvasElement.data=playerStuff.MovingCards[i-1].movePoints;
playersField.appendChild(canvasElement);
drawField=canvasElement.getContext("2d");
drawFields.push (drawField);
imgObj = new Image();
imgObj.src = "./img/moveCards/"+playerStuff.MovingCards[i-1].name;
imgObj.index=i;
imgObj.onload = function (){
drawFields[this.index].drawImage(this, 0,0);
};
that is becouse onload y asinchronous, when al the iterations of the for has ended, the onload is probably that has not been called. then drawField variable is the last element. to solve this in a fast way (but not the cleanest solution)
the scope of a varaible is not as it could be in c++ or other languages.
for (var i = 1; i <= playerStuff.MovingCards.length; i++){
(function(element) {
$("#playersField").append("<canvas id='movingCardsField"+i+"' height='"+movingCardSizeY+"'\n\
width='"+movingCardSizeX+"'\n\
data='"+element.movePoints+"'></canvas>");
var imgObj = new Image();
var drawField = document.getElementById('movingCardsField'+i).getContext("2d");
imgObj.onload = function(){
drawField.drawImage(imgObj, 0,0);
};
imgObj.src = "./img/moveCards/"+element.name;
})(playerStuff.MovingCards[i - 1]);
}
this may do the trick, more or less, I didn't check twice the code
btw is not very efficient also
this should be something better
var domElement = $("#playersField");
var canvasStart = "<canvas id='movingCardsField";
var canvasEnd = "' height='"+movingCardSizeY + "'width='" + movingCardSizeX + "' data='" + element.movePoints + "'></canvas>";
function createCanvas(element) {
var canvas = canvasStart + (i + 1) + canvasEnd;
domElement.append(canvas);
var imgObj = new Image();
var drawField = document.getElementById('movingCardsField' + (i + 1)).getContext("2d");
imgObj.onload = function() {
drawField.drawImage(imgObj, 0,0);
};
imgObj.src = "./img/moveCards/" + element.name;
}
for (var i = 0; i < playerStuff.MovingCards.length; i++) {
createCanvas(playerStuff.MovingCards[i]);
}

NaN from speed test

I'm trying to test the time it takes to calculate and create a certain matrix. The code being used is below.
import flash.geom.Matrix;
import flash.utils.getTimer;
var iter:int = 0;
var titer:int = 10000;
var time:Number;
var ttime:Number;
var zm:Number = 1.5;
var sx:Number = 0, sy:Number = 0.5;
var rot:Number = Math.PI/6;
var tx:Number = 10, ty:Number = 0;
var w:Number = 50, h:Number = 50;
var cr:Number = Math.cos(rot), sr:Number = Math.sin(rot);
var m3:Matrix, mt:Matrix;
for(iter; iter<titer; iter++) {
time = getTimer();
m3 = new Matrix(cr*(sx+zm), -sr*(sx+zm), sr*(sy+zm), cr*(sy+zm), tx+w-cr*w*(sx+zm)-sr*h*(sy+zm), ty+h+sr*w*(sx+zm)-cr*h*(sy+zm));
ttime += getTimer() - time;
}
trace('total:', ttime, 'avg:', Number(ttime)/Number(titer));
I'm SURE I set this up properly, but the trace is returning 'NaN'. What could cause this?
It will be very short and simple response: var ttime: Number = 0; ;) It's a good programming practice to initialise variables.
Also, I don't understand your construction for for performance testing. What do you think about such construction?
var time:uint = getTimer();
//your 'for' with Matrix
time = getTimer() - time;
//trace results...

adding movieclips from random generated no in array

hey i am trying to add movie clips to the stage randomly from a list of cards, no 1- 10,
this is what i have tried so far but i get an error saying its my randomly selected card is not a function, just wondering if anybody can help or know the proper way of accomplishing it
thank you
var printArray:Array =new Array();
var randPrint:String;
var rand
for(var n:int = 1; n <= 28; n++)
{
randNo=Math.round(Math.random() * 10+.5);
randPrint = "cardPrint"+randNo;
printArray.push(randPrint);
}
var cardPrint1:MovieClip = new card_1();
var cardPrint2:MovieClip = new card_2();
var cardPrint3:MovieClip = new card_3();
var cardPrint4:MovieClip = new card_4();
var cardPrint5:MovieClip = new card_5();
var cardPrint6:MovieClip = new card_6();
var cardPrint7:MovieClip = new card_7();
var cardPrint8:MovieClip = new card_8();
var cardPrint9:MovieClip = new card_9();
var cardPrint10:MovieClip = new card_10();
for(var p:int = 1; p <= 1; p++)
{
trace(printArray[p]);
addChild(printArray[p]);
}
some help would be great, thank you so much
I think something like the following will do what you want. I populated an array with all the available assets and then filled an array with random numbers between 0-9. The last for loop just creates the movieclips and adds them to the stage.
var printArray:Array = [];
var mcs:Array = [card_1, card_2, card_3, card_4, card_5, card_6, card_7, card_8, card_9, card_10];
for(var n:int = 1; n <= 28; n++)
{
var randNo:int = int(Math.random() * 10);
printArray.push(randNo);
}
for(var p:int = 0; p < printArray.length; p++)
{
trace(printArray[p]);
var mc:MovieClip = new mcs[printArray[p]];
addChild(mc);
}

Multiple google markers on the same place

i'm trying to use google maps with markers. i do not have any problems with the placement of markers in the map, but how can i get the markers to split like google earth when i have to markers in the same place? like this : Example
Thanks !
I didn't understand what you're trying to accomplish, but ...
Did you already check a marker clustering algorithm like this one or the google semi-official ?
//Here is my attempt... a Archimedes spiraling out of the markers:
// calc a spiraling out position based on marker count at that location
// this function is very tweeky
function spiral_coords(lat_long, i) {
i = (i == 1)? 0: i+1;
var r = i * 0.002;
// .8 is a fudge number to adjust to real appearance on the map
return [lat_long[0] + (r * .8 * Math.sin(.5 * (i + 2))), lat_long[1] + (r * Math.cos(.5 * (i + 2)))];
}
// this is from a fusion table query... but your source could be anything
// I take the coords and check against a hash count of them and calc out the spiral position
function data_handler(d) {
var map = $("#map")[0];
map.markers = [];
var rows = d.rows;
var fields = d.columns;
var index = {};
for (var i in fields) {
index[fields[i]] = i;
}
var location_count = {};
for (var i in rows) {
var row = rows[i];
var location = row[index["Location"]];
var lat_long = location.split(" ");
lat_long[0] = parseFloat(lat_long[0]);
lat_long[1] = parseFloat(lat_long[1]);
// here are the active ingredients
if(!(location in location_count)) {
location_count[location] = 0;
}
location_count[location]++;
lat_long = spiral_coords(lat_long, location_count[location]);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat_long[0], lat_long[1]),
map: map.map
});
}
}