My question is at the very end of the post.
I have tried everything from setting a timer for all the markers to be set to all kinds of calculations of the four corners, but nothing seems to be working.
Each time that I add a marker to the markermanager, I call this function below
public function markerSetBounds(someLat , someLng):void{
var bounds:LatLngBounds = new LatLngBounds();
for(var i:int = 0; i < myMarkers.length; i++)
{
var currentLatLon:LatLng = new LatLng(someLat , someLng);
bounds.extend(currentLatLon);
}
googleMap.setZoom(googleMap.getBoundsZoomLevel(bounds));
googleMap.setCenter(bounds.getCenter());
}
I believe I know why this does not work. I am only sending one set of lat, lng at a time.
However, when I tried the following, flex told me that it did not know what myMarkers[i].lat meant.
The following is how I fill myMarkers array
var someMarker:Marker = new Marker(new LatLng(someLat , someLng), new MarkerOptions({tooltip:someAddress, hasShadow: true}));
myMarkers.push(someMarker);
This is how I want to traverse through the array, but flex does not understand what .lat means.
for(var i:int = 0; i < myMarkers.length; i++)
{
var currentLatLon:LatLng = new LatLng(myMarkers[i].lat , myMarkers[i].lng);
bounds.extend(currentLatLon);
}
My question is how do I traverse through the myMarkers array to set currentLatLon. I have also tried a for each(var someObj:Marker in myMarkers) but it finds nothing. The markers are showing up on the map, but the bounds are not working.
Have you tried doing something like:
(myMarkers[i] as Marker).lat
Is this a problem at run time or compile time?
OK, I figured out was what the issue and it was that I had to place things in the correct order.
First, declare the LatLngBounds.
Second, make the markers.
Third, set the zoom
Forth, extend the bounds.
bounds = new LatLngBounds();
covToXML = new XML(event.result);
xmlToList = new XMLList(covToXML);
listToCol = new XMLListCollection(xmlToList);
someLat = Number(listToCol.children().child("geometry").child("location").child("lat").text());
someLng = Number(listToCol.children().child("geometry").child("location").child("lng").text());
someAddress = String(listToCol.children().child("formatted_address").text());
var markerOptions:MarkerOptions = new MarkerOptions();
markerOptions.icon = new (whichIcon(GlobalVars.randomIcon));
markerOptions.tooltip = someAddress;
markerOptions.hasShadow = true;
someMarker = new Marker(new LatLng(someLat , someLng), markerOptions);
someMarker.addEventListener(MapMouseEvent.CLICK,markerClicked);
myMarkers.push(someMarker);
googleMap.addOverlay(someMarker);
for each(someMarker in myMarkers)
{
var newLatLng:LatLng = someMarker.getLatLng();
// Alert.show(newLatLng.toString());
bounds.extend(newLatLng);
}
googleMap.setCenter(bounds.getCenter());
googleMap.setZoom(googleMap.getBoundsZoomLevel(bounds));
Thanks for all the suggestions and questions, which helped me to the solution.
Related
I have been trying to figure out how to pan/zoom using onMouseDrag, and onMouseDown in paperjs.
The only reference I have seen has been in coffescript, and does not use the paperjs tools.
This took me longer than it should have to figure out.
var toolZoomIn = new paper.Tool();
toolZoomIn.onMouseDrag = function (event) {
var a = event.downPoint.subtract(event.point);
a = a.add(paper.view.center);
paper.view.center = a;
}
you can simplify Sam P's method some more:
var toolPan = new paper.Tool();
toolPan.onMouseDrag = function (event) {
var offset = event.downPoint - event.point;
paper.view.center = paper.view.center + offset;
};
the event object already has a variable with the start point called downPoint.
i have put together a quick sketch to test this.
Unfortunately you can't rely on event.downPoint to get the previous point while you're changing the view transform. You have to save it yourself in view coordinates (as pointed out here by Jürg Lehni, developer of Paper.js).
Here's a version that works (also in this sketch):
let oldPointViewCoords;
function onMouseDown(e) {
oldPointViewCoords = view.projectToView(e.point);
}
function onMouseDrag(e) {
const delta = e.point.subtract(view.viewToProject(oldPointViewCoords));
oldPointViewCoords = view.projectToView(e.point);
view.translate(delta);
}
view.translate(view.center);
new Path.Circle({radius: 100, fillColor: 'red'});
on a website I want to have an element take up the entire space of the screen (after an event), but I can't seem to manage to get it in front of all the other elements on my website. Do I have to set positions and z-indexes for everything or is there another way of setting the element I want in front of everything else?
Brute force.
function getMaxZ() {
var all = document.querySelectorAll('*');
var len = all.length;
var maxZ = 0;
var dv = document.defaultView;
for (var i = 0; i < len ; i++) {
var el = all[i];
var thisZ = el.currentStyle ? el.currentStyle : dv.getComputedStyle(el, null);
thisZ = thisZ.zIndex.replace(/[^\d]/,'') * 1;
if (thisZ > maxZ) maxZ = thisZ;
}
return maxZ;
}
alert(getMaxZ());
If you want this thing always on top, just set its z-index to 999 (or something higher than you know everything else is).
I'm looking for a way to use framecloud type popup with my current setup. Unfortunately all my attempts have either not worked or will only work on the most recently placed maker.
In the course of trying to get it to work I have converted my original script from using Markers to using Vectors to placing the marker points (as I've seen that it's easier to customize vectors than markers.)
Now which ever one I can get to work I'll use, but after working on this for a few days I'm at my wits end and need a helping hand in the right direction.
My points are pulled from a google spreadsheet using tabletop.js. The feature is working how I wish it to, with the markers being placed on their respective layer based on a field I called 'type'.
While I have a feeling that might have been the source of my problem with the Markers type layer, I'm not sure how to fix it.
You can view the coding through these pages
(Links removed due to location change.)
Thanks for all help in advance.
I finally got it to work. For anyone in a similar situation here's my final code for the layers. I did change the names of the layers from what they are originally and blacked out the spreadsheet I used, but the changes should be noticeable.
//
//// Set 'Markers'
//
var iconMarker = {externalGraphic: 'http://www.openlayers.org/dev/img/marker.png', graphicHeight: 21, graphicWidth: 16};
var iconGeo = {externalGraphic: './images/fortress.jpg', graphicHeight: 25, graphicWidth: 25};
var iconAero = {externalGraphic: './images/aeropolae.jpg', graphicHeight: 25, graphicWidth: 25}; // Image is the creation of DriveByArtist: http://drivebyartist.deviantart.com/
var vector1 = new OpenLayers.Layer.Vector("1");
var vector2 = new OpenLayers.Layer.Vector("2");
var vector3 = new OpenLayers.Layer.Vector("3");
// Pulls map info from Spreadsheet
//*
Tabletop.init({
key: 'http://xxxxxxxxxx', //Spreadsheet URL goes here
callback: function(data, tabletop) {
var i,
dataLength = data.length;
for (i=0; i<dataLength; i++) { //following are variables from the spreadsheet
locName = data[i].name;
locLon = data[i].long;
locLat = data[i].lat;
locInfo = data[i].info;
locType = data[i].type; // Contains the following string in the cell, which provides a pre-determined output based on provided information in the spreadsheet: =ARRAYFORMULA("<h2>"&B2:B&"</h2><b>"&G2:G&"</b><br /> "&C2:C&", "&D2:D&"<br />"&E2:E&if(ISTEXT(F2:F),"<br /><a target='_blank' href='"&F2:F&"'>Read More...</a>",""))
locLonLat= new OpenLayers.Geometry.Point(locLon, locLat);
switch(locType)
{
case "Geopolae":
feature = new OpenLayers.Feature.Vector(
locLonLat,
{description:locInfo},
iconGeo);
vector1.addFeatures(feature);
break;
case "POI":
feature = new OpenLayers.Feature.Vector(
locLonLat,
{description:locInfo},
iconMarker);
vector2.addFeatures(feature);
break;
case "Aeropolae":
feature = new OpenLayers.Feature.Vector(
locLonLat,
{description:locInfo},
iconAero);
vector3.addFeatures(feature);
break;
}
}
},
simpleSheet: true
});
map.addLayers([vector1, vector2, vector3]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
//Add a selector control to the vectorLayer with popup functions
var controls = {
selector: new OpenLayers.Control.SelectFeature(Array(vector1, vector2, vector3), { onSelect: createPopup, onUnselect: destroyPopup })
};
function createPopup(feature) {
feature.popup = new OpenLayers.Popup.FramedCloud("pop",
feature.geometry.getBounds().getCenterLonLat(),
null,
'<div class="markerContent">'+feature.attributes.description+'</div>',
null,
true,
function() { controls['selector'].unselectAll(); }
);
feature.popup.autoSize = true;
feature.popup.minSize = new OpenLayers.Size(400,100);
feature.popup.maxSize = new OpenLayers.Size(400,800);
feature.popup.fixedRelativePosition = true;
feature.popup.overflow ="auto";
//feature.popup.closeOnMove = true;
map.addPopup(feature.popup);
}
function destroyPopup(feature) {
feature.popup.destroy();
feature.popup = null;
}
map.addControl(controls['selector']);
controls['selector'].activate();
}
I know there a bajillion threads on this topic, and maybe I am retarded, but this simply isn't working and I think I am missing something really key?
Lets say I have sprites _testTarget and _testParent nested like this.
_testParent = new Sprite();
this.addChild(_testParent);
_testTarget = new Sprite()
_testParent.addChild(_testParent);
And lets say I want to get the global cords of _testTarget. When I do localToGlobal I always get back 0,0 when I know for a fact its actual cords are like 200,100
var point:Point = new Point(_testTarget.x, _testTarget.y);
point = _testTarget.localToGlobal(point); // returns 0,0
var point:Point = new Point(_testTarget.x, _testTarget.y);
point = _testTarget.parent.localToGlobal(point); // returns 0,0
var point:Point = new Point(this.x, this.y);
point = this.localToGlobal(point); // returns 0,0
var point:Point = new Point(this.x, this.y);
point = this.parent.localToGlobal(point); // Breaks, "parent" is null
If it helps, this class/sprite instantiated inside of a sprite, inside of a sprite, inside of a sprite...etc and the reason its cords are 200,100 are because one of its parent containers is set to that - but I thought localToGlobal was supposed to go all the way to very top layer? Help?
You must have a problem somewhere else (I can't see anyone in the code you pasted, except for the one mentioned by TandemAdam).
This works as expected:
var _testParent:Sprite;
var _testTarget:Sprite;
var _yetAnotherParent:Sprite;
_yetAnotherParent = new Sprite();
this.addChild(_yetAnotherParent);
_testParent = new Sprite();
_yetAnotherParent.addChild(_testParent);
_testTarget = new Sprite()
_testParent.addChild(_testTarget);
_testParent.y = 100;
_yetAnotherParent.y = -500;
var point:Point = new Point(_testTarget.x, _testTarget.y);
point = _testTarget.parent.localToGlobal(point);
trace(point); // (x=0, y=-400)
As a rule of thumb, when translating between coordinate spaces, the object on which you want to call localToGlobal or globalToLocal is almost always the parent of the object you're interested in, because an object's x and y are offsets relative to its parent.
In your first block, this wont work:
_testParent.addChild(_testParent);
Because you can't add a display object as its own child.
This also works as expected -- returns (x=600, y=600). So it looks like there must be something else wrong with your app?
var a:Sprite = new Sprite();
var b:Sprite = new Sprite();
var c:Sprite = new Sprite();
var d:Sprite = new Sprite();
var e:Sprite = new Sprite();
a.x = b.x = c.x = d.x = e.x = 100;
a.y = b.y = c.y = d.y = e.y = 100;
this.addChild(a);
a.addChild(b);
b.addChild(c);
c.addChild(d);
d.addChild(e);
var point:Point = new Point(e.x, e.y);
point = e.localToGlobal(point);
trace(point);
So, props to all you guys suggesting that I look through the rest of my code because it turns out that yes, I am retarded haha. On a hunch (from your advise) I found that the problem had nothing to do with localToGlobal - the problem was that I forgot to wait for the stage to be ready. The solution was very simple:
public function ClassConstructorOrWhatever(){
addEventListener(Event.ADDED_TO_STAGE, handleAddedToStage);
_testParent = new Sprite();
this.addChild(_testParent);
_testTarget = new Sprite()
_testParent.addChild(_testTarget);
}
private function handleAddedToStage(e:Event):void {
var point:Point = new Point(_testTarget .x, _testTarget .y);
point = _testTarget.localToGlobal(point); // RETURNS 200,100!!!! :)
}
So yeah, that was the problem - thanks again guys!
Is it possible to sort an XMLList? All the examples I can find on it create a new XMLListCollection like this:
MyXMLListCol = new XMLListCollection(MyXMLList);
I don't think the XMLListCollection in this case has any reference to the XMLList so sorting it would leave my XMLList unsorted, is this correct?
How can I sort the XMLList directly?
Thanks
~Mike
So I finally got my search terms altered enough I actually churned up an answer to this.
Using the technique I got from here:
http://freerpad.blogspot.com/2007/07/more-hierarchical-sorting-e4x-xml-for.html
I was able to come up with this:
public function sortXMLListByAttribute(parentNode:XML,xList:XMLList,attr:String):void{
//attr values must be ints
var xListItems:int = xList.length();
if(xListItems !=0){
var sortingArray:Array = new Array();
var sortAttr:Number = new Number();
for each (var item:XML in xList){
sortAttr = Number(item.attribute(attr));
if(sortingArray.indexOf(sortAttr)==-1){
sortingArray.push(sortAttr);
}
//piggy back the removal, just have to remove all of one localName without touching items of other localNames
delete parentNode.child(item.localName())[0];
}
if( sortingArray.length > 1 ) {
sortingArray.sort(Array.NUMERIC);
}
var sortedList:XMLList = new XMLList();
for each(var sortedAttr:Number in sortingArray){
for each (var item2:XML in xList){
var tempVar:Number = Number(item2.attribute(attr));
if(tempVar == sortedAttr){
sortedList += item2
}
}
}
for each(var item3:XML in sortedList){
parentNode.appendChild(item3);
}
}
}
Works pretty fast and keeps my original XML variable updated. I know I may be reinventing the wheel just to not use an XMLListCollection, but I think the ability to sort XML and XMLLists can be pretty important
While there is no native equivalent to the Array.sortOn function, it is trivial enough to implement your own sorting algorithm:
// Bubble sort.
// always initialize variables -- it save memory.
var ordered:Boolean = false;
var l:int = xmlList.length();
var i:int = 0;
var curr:XML = null;
var plus:XML = null;
while( !ordered )
{
// Assume that the order is correct
ordered = true;
for( i = 0; i < l; i++ )
{
curr = xmlList[ i ];
plus = xmlList[ i + 1 ];
// If the order is incorrect, swap and set ordered to false.
if( Number( curr.#order ) < Number( plus.#order ) )
{
xmlList[ i ] = plus;
xmlList[ i + 1 ] = curr;
ordered = false;
}
}
}
but, realistically, it is far easier and less buggy to use XMLListCollection. Further, if someone else is reading your code, they will find it easier to understand. Please do yourself a favor and avoid re-inventing the wheel on this.