Native Maps v2 Update

We've just released an update to our Native Maps ANE, with some more features and some slight changes to the API.

Read on for details about the new version, or head on over to our Native Extensions page for more info.


Firstly, we'll go over the new features.

Polygon and Polyline Overlays

We've added the capability to draw custom line and shape overlays on the map. This is useful for creating your own custom items or shape representations in the map. You'll notice two new classes in the ANE API, Polyline and Polygon.

Polygon objects also have the capability to contain "holes", or gaps in the shape, which allow you to create more complex shapes if required.

Polylines and Polygons contain options for stroke colour, stroke width, opacity, Z index, fillColour (for Polygons only) and on Android, the option to use geodesic lines (lines that follow the Earth's surface) instead of lines drawn with the mercator projection.

Creating a polyline is as simple as:

// Add a red line roughly from Melbourne to Sydney
var polyline:Polyline = new Polyline(2, 0xFFFF000);
polyline.addPoint( new LatLng(-37, 144) );
polyline.addPoint( new LatLng(-33.8, 151.2) );
NativeMaps.service.addPolyline(polyline);

For a Polygon, the interface is similar:

// Add a box with a blue stroke and semi-transparent red fill
var polygon:Polygon = new Polygon(2, 0xFF0000FF, 0xAAFF0000);
polygon.addPoint(new LatLng(-25, 133.0));
polygon.addPoint(new LatLng(-34, 133.0));
polygon.addPoint(new LatLng(-34, 147.0));
polygon.addPoint(new LatLng(-25, 147.0));
polygon.addPoint(new LatLng(-25, 133.0));
NativeMaps.service.addPolygon(polygon);

Note that for polygons, adding a final point the same as the origin is optional. If you don't, the polygon will be automatically completed so that it is an enclosed shape anyway.

To add a hole to a polygon, you simply create another Polygon object and pass it to the addHole() method.

// Add a hole to a polygon object.
var hole:Polygon = new Polygon();
hole.addPoint(new LatLng(-27, 135.0));
hole.addPoint(new LatLng(-32, 135.0));
hole.addPoint(new LatLng(-32, 145.0));
hole.addPoint(new LatLng(-27, 145.0));
hole.addPoint(new LatLng(-27, 135.0));	
polygon.addHole( hole );

Note, polygons used as holes will ignore any properties other than their LatLng points (i.e. colour, stroke, etc). Holes must be enclosed completely within their parent polygon, and cannot overlap any other holes defined.

Bounding Areas

The first version of the ANE included a "zoomToSpan" method for setting the visible bounding area of the map. This method has been removed from the API, and replaced with a more full-featured implementation using the new LatLngBounds class.

The LatLngBounds class allows you to specify regions and contains helpful methods.

Setting the bounding area of the map is now accomplished like so:

var bounds:LatLngBounds = new LatLngBounds( new LatLng(-39, 111), new LatLng(-12, 160) );
NativeMaps.service.setBounds( bounds, 10, true );

You can also use the NativeMaps.service.getBounds() method to return the current LatLngBounds object for the map.

Other Additions

Other additions to the API in this version include:

  • NativeMapEvent.MAP_ZOOM_CHANGED event added
  • showMarker() method added which allows you to show or hide a specific marker
  • Duration parameter added for setZoom() on Android, specifies the animation length of the zoom
  • Added methods for Android to get and set the "tilt" and "bearing" properties of the map

That's it for now, so head over to the Native Extensions page for more information. As always, you can check out the API reference for the Maps ANE here.

4 thoughts on “Native Maps v2 Update”

  1. I bought the full set of ANE’s today and am experimenting with them all…. question:

    do you all have any code examples that illustrate simple usage in flex/flashbuilder 4.5/6/7? — Im having trouble getting the application descriptor file setup properly in my tests of the native maps ane. the uses-permission all look fine, I have the id setup with air.com.myappid

    but beyond that, trying to get the other elements from this tutorial PDF ( http://extensions.labs.distriqt.com/docs/nativemaps/Tutorial-DistriqtNativeMapsforAndroid.pdf ) causes errors for me.

    I’m hoping you all can provide an example of exactly how the application descriptor and the few lines of code to implement a simple map implementation.

    Thanks

    1. Hi,

      There should be an example.zip file along with each of the extensions in the library package. This zip contains an example showing the usage of extension.

      Cheers,
      Michael

  2. I’ve tried everything possible to add marks on the map, I’m even talking about the custom ones, Im referring to the regular google maps pin. And it doesn’t work on Android, it does work for the iPhone.

    I’ve tried to get support, but didn’t hear a thing about it. Can someone help?

    Thanks,

Leave a Reply

Your email address will not be published. Required fields are marked *