Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle Maps Flash - Polygon with Holes, Crossing the meridian
    primarykey
    data
    text
    <p>I have a problem with creating an overlay with a polygon that contains multiple polylines.</p> <p>I want to create a polygon with holes cut out for certain countries (to show which areas are off limits). I do this by creating a polygone with multiple polylines. The first polyline was created to cover the entire visible area of the map.</p> <p>i started off with this:</p> <p>To get around only spanning one region-180/180</p> <pre><code> var outer:Array = [ new LatLng(90, -180), new LatLng(90, 180), new LatLng(-90, 180), new LatLng(-90, -180), new LatLng(90, -180)] donut = new Polygon([], new PolygonOptions({ strokeStyle: new StrokeStyle({ thickness: 0}), fillStyle: new FillStyle({ color: 0x000000, alpha: 0.5}) })); donut.setPolyline(0, outer) map.addOverlay(donut); </code></pre> <p>Obviously this has a problem with only spanning one lot of lat/lng. And when zoomed out, this doesnt work. To get around this i tried getting the bounds of the map, toSpan() and getNorth(),getSouth() and so on. These didnt return a true span of the visible map - as it maxed out at 180/360.</p> <p>My solution was to use fromViewportToLatLng() of the pixel points of the map, and set the opt_nowrap to 'true'</p> <pre><code> var pnw:LatLng = map.fromViewportToLatLng(new Point(0, 0), true) var pse:LatLng = map.fromViewportToLatLng(new Point(map.width, map.height), true) </code></pre> <p>This produced results similar to this</p> <pre><code> Lat Lng North West (89.77386689378173, -614.3294000000001) LatLng South East (-89.07253945829217, 370.0455999999999) </code></pre> <p>From here i can then correctly set the polyline (on map move and zoom events) to cover the entire map, no matter how many spans of longitude occur:</p> <pre><code> outer = [ new LatLng(pnw.lat(), pnw.lng(), true), new LatLng(pnw.lat(), pse.lng(), true), new LatLng(pse.lat(), pse.lng(), true), new LatLng(pse.lat(), pnw.lng(), true), new LatLng(pnw.lat(), pnw.lng(), true) ] donut.setPolyline(0, outer) </code></pre> <p>*So far so good. * Now, i want to add the donut holes to my polygon, again adding polylines to the donut polygon.</p> <pre><code> private var australia:Array = [ new LatLng(-9.7716, 143.0241), new LatLng(-23.4610, 158.1852), new LatLng(-45.1338, 147.1549), new LatLng(-35.2615, 111.5153), new LatLng(-20.6921, 113.0094), new LatLng(-10.0746, 130.3239), new LatLng(-9.7716, 143.0241) ] private var nz:Array = [ new LatLng(-33.5951, 165.8254), new LatLng(-33.5951, 179.7341), new LatLng(-48.3845, 179.7341), new LatLng(-48.3845, 165.8254), new LatLng(-33.5951, 165.8254) ] private var hawaii:Array = [ new LatLng(21.8000, -160.4347), new LatLng(22.5477, -159.7975), new LatLng(21.4067, -156.3533), new LatLng(19.5336, -154.4197), new LatLng(18.6511, -155.6392), new LatLng(20.6633, -157.8639), new LatLng(21.8000, -160.4347) ] donut.setPolyline(1, hawaii) donut.setPolyline(2, nz) donut.setPolyline(3, australia) </code></pre> <p>The problem lies when the meridian line is visible in the map viewport. This problem is more evident when zommed in, as the donut hole polylines jump<br> from the visible viewport to the other side of a lat long span.</p> <p>Sometimes the outer array doesnt even correctly render, causing the donut polygon to essentialy invert (polygons over the countries, rather than cutouts)</p> <p>I realise this is a tough one to visualise. I have attached the .as + .fla file in case anyone wants to test it out.</p> <p><a href="http://www.digital.leskiwis.com/maps/MapTest.zip" rel="nofollow">http://www.digital.leskiwis.com/maps/MapTest.zip</a> </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload