Map display does not always update on MapComponent set center
I have a list of lat/lon locations in a Flex DataGrid, with a click handler on the grid that calls MapComponent's set center method to re-center the map on the selected location. Sometimes this works, but often the display fails to update until you click the datagrid a second time. Alternatively, I found that simply mousing over another Flex control (like a button, checkbox, or silder) after making the datagrid selection will also trigger an update to center the map on the correct location.
I've tried it with the latest svn trunk version (AS3 r 767), and the zipfile swc (ModestMaps-AS3-1.0-r749), with the same result. I tested with an old swc from a prior project (1+ yr old), and the problem did not surface.
Below is a simple MXML example that demonstrates the issue... thanks for any help you can offer... this one is driving me nuts!
Jay W
<?xml version="1.0" encoding="utf-8"?>
<mx:application>
<modest:mapcomponent height="400" width="400">
<!-- displays a list of sample locations; click should center the map on that location -->
<mx:datagrid width="300">
<mx:columns>
<mx:datagridcolumn width="100">
</mx:datagridcolumn><mx:datagridcolumn>
</mx:datagridcolumn></mx:columns>
</mx:datagrid>
<mx:script>
<![CDATA[
import com.modestmaps.geo.Location;
import mx.collections.ArrayCollection;
//sample locations to plot (San Diego county)
private static const locations:ArrayCollection = new ArrayCollection([
{name:"San Diego", loc:"32.715685,-117.161724"},
{name:"La Jolla", loc:"32.83746,-117.271539"},
{name:"Del Mar", loc:"32.954892,-117.263482"},
{name:"Chula Vista", loc:"32.640565,-117.084154"},
{name:"El Cajon", loc:"32.79495,-116.959469"}
]);
[Bindable] private var centerLocation:Location = new Location(33,-117);
// centers the map on the point selected in data grid
private function setLocation():void
{
myMap.center = locationsDG.selectedItem.loc.toString();
myMap.zoom = 14;
}
]>
</mx:script>
</modest:mapcomponent></mx:application>
I've tried it with the latest svn trunk version (AS3 r 767), and the zipfile swc (ModestMaps-AS3-1.0-r749), with the same result. I tested with an old swc from a prior project (1+ yr old), and the problem did not surface.
Below is a simple MXML example that demonstrates the issue... thanks for any help you can offer... this one is driving me nuts!
Jay W
<?xml version="1.0" encoding="utf-8"?>
<mx:application>
<modest:mapcomponent height="400" width="400">
<!-- displays a list of sample locations; click should center the map on that location -->
<mx:datagrid width="300">
<mx:columns>
<mx:datagridcolumn width="100">
</mx:datagridcolumn><mx:datagridcolumn>
</mx:datagridcolumn></mx:columns>
</mx:datagrid>
<mx:script>
<![CDATA[
import com.modestmaps.geo.Location;
import mx.collections.ArrayCollection;
//sample locations to plot (San Diego county)
private static const locations:ArrayCollection = new ArrayCollection([
{name:"San Diego", loc:"32.715685,-117.161724"},
{name:"La Jolla", loc:"32.83746,-117.271539"},
{name:"Del Mar", loc:"32.954892,-117.263482"},
{name:"Chula Vista", loc:"32.640565,-117.084154"},
{name:"El Cajon", loc:"32.79495,-116.959469"}
]);
[Bindable] private var centerLocation:Location = new Location(33,-117);
// centers the map on the point selected in data grid
private function setLocation():void
{
myMap.center = locationsDG.selectedItem.loc.toString();
myMap.zoom = 14;
}
]>
</mx:script>
</modest:mapcomponent></mx:application>
1
person has this problem
I have this problem, too!
Tell me when someone solves it.
The more people who report this problem, the more it gets noticed.
The more people who report this problem, the more it gets noticed.
Create a customer community for your own organization
Plans starting at $19/month
-
Inappropriate?Okay, the input form is doing weird things to my code -- keeps changing names to lower case, inserting tags where they do not belong, and it dropped a few of the DataGridColumn attributes. DG columns should be bound to the data provider's name and loc fields.
I’m frustrated
-
Yuck! You can use HTML code tags to keep your formatting sane - maybe try that? -
Inappropriate?Sadly the Flex code is not particularly well maintained and hasn't been improved since it was first written as a proof of concept. The underlying as3 code is well tested and used in many projects, the flex code is not.
There are others on this forum (fnicollet, for one) who are using Modest Maps successfully without using the com.modestmaps.flex classes. Hopefully they will be able to help.
To me it sounds like the invalidation process isn't triggering commitProperties correctly... is your script called inside another event? Can you set a breakpoint inside MapComponent.commitProperties and see if it gets called before you click on the other components that seem to trigger the update?
I don't know enough about flex to know when properties get committed - if it's inside a flash RENDER event then this could explain the issue, since the difference between the current version of Modest Maps and the one from a year ago is that the current one uses RENDER events to apply changes to the TileGrid at the end of a frame. This might not be compatible with what Flex expects, but I can't be sure.
I’m not very happy about Flex
-
Inappropriate?I appreciate the quick reply... sorry about the messy code paste. I've posted my test code, with source-view enabled, at:
http://interactives.signonsandiego.com/MMTest/
I'll do some further debugging with MapComponent per your suggestions, and post back here if I figure anything out. Thanks! -
Inappropriate?I added trace statements to my code for MapEvents (>>> event.type), in addition to traces already in MapComponent.commit properties...
Trace output after the first click, which fails to re-draw the map:
commitProperties() myMap
* zoom is dirty...
* center is dirty...
>>>extentChanged
After the second click, which DOES re-draw:
commitProperties() myMap
* zoom is dirty...
* center is dirty...
>>>extentChanged
>>>rendered
>>>rendered
It seems like a timing issue, especially since it seems to dispatch the first MapEvent.RENDERED event after the second click; if I click and hold on the item for a second before releasing, it always renders correctly.
I’m undecided
-
Inappropriate?Okay, I've come up with a code hack -- not pretty, but it seems to work.
I believe the problem boils down to a bug in Flex (or maybe the Flash player -- see http://www.betriebsraum.de/blog/2007/11/03/stageinvalidate-and-eventrender-for-ui-elements/)...TileGrid.onRender() is not getting called reliably after every change to the map. My hack/work-around is:
-- changed access to public on TileGrid.onRender().
-- added a listener in my Flex app for MapEvent.EXTENT_CHANGED;
the handler calls mapComponent.map.grid.onRender() to force a re-draw.
Anybody have a better idea? Seems like there should be a way to force Flex to dispatch Event.RENDER, but I have not found it (tried calling stage.invalidate() in my event handler, but it had no effect).
The fixed version is posted at interactives.signonsandiego.com/MMTest/fixed
Many thanks to RandomEtc for pointing me in the right direction!
I’m happy
-
Inappropriate?That makes sense. This is why you see method names like redrawNow and forceRedraw in Flash GUI frameworks. That's probably a worthwhile addition to the Map or TileGrid class, given the use of the RENDER event can cause trouble like this when using frameworks like Flex.
Thanks for sharing the fix! -
Inappropriate?This fix (calling onRender on every EXTENT_CHANGED) cause another problem : stackoverflow on onRender() call if you use the wheel zoom ...
Does someone plan to fix with redraw and forceRedraw ?
I'd like to do this but i'm not very friendly with modesmap code.
I'm using modestmap with flex in r&d project for my company.
I’m frustrated
-
Inappropriate?This is because EXTENT_CHANGED can be triggered inside TileGrid.onRender.
I wouldn't advise calling onRender from an EXTENT_CHANGED event for this reason. You don't want to force a redraw based on MapEvents - you want to force a redraw based on your own flex button events or after a call to setCenter or setExtent inside a flex event handler.
This isn't something I'm personally planning on fixing any time soon, I don't have the time or inclination to support Flex's way of doing things. However I'm willing to deploy a patch if it's well tested and doesn't break existing functionality. -
Inappropriate?Makes sense, thanks Daaave for pointing that out.
So, the new improved fix gets rid of the listener for EXTENT_CHANGED, and instead calls onRender() immediately after changing the map's center -- but I found I needed to use callLater() to defer the onRender call a bit, allowing time for the map to update.
Sample code is posted at http://interactives.signonsandiego.co... -
Inappropriate?you also can use tween map instead of map (in map component)
You will need to update the way you call zoom ... center ... pan
in commitProperties() function.
Loading Profile...



EMPLOYEE
