0

I donnot know how to draw multiple wholes into a polygon with Nokia Maps API v2.

Here is an example in Google Maps API v3

Nokia Maps API v2#Polygon

Any help would be much appreciated,Thanks!

huanhuanw
  • 43
  • 4

1 Answers1

0

The HERE Maps API doesn't support cutouts directly, so the best way to do this is to build up the annulus in parts - e.g. the bottom half and the top half in separate objects. If you ensure that the lineWidth property of the Polygons is zero then you won't get an outline.

The following creates a rectangle with a hole as shown - just increase the number of points to make a ring.

Rectangle with hole

// Set of initial geo coordinates to create the purple polyline
var points = [
        new nokia.maps.geo.Coordinate(50.0, 8.0),
        new nokia.maps.geo.Coordinate(50.1, 8.0),
        new nokia.maps.geo.Coordinate(50.1, 8.1),
        new nokia.maps.geo.Coordinate(50.0, 8.1),
                new nokia.maps.geo.Coordinate(50.0, 8.0)
    ];

// Transparent purple polyline
map.objects.add(new nokia.maps.map.Polyline(
    points,
    {   
        pen: {
            strokeColor: "#22CA", 
            lineWidth: 5
        }
    }
));

// Transparent green polygon with black border
map.objects.add(new nokia.maps.map.Polygon(
    [
        new nokia.maps.geo.Coordinate(50.0, 8.0),
        new nokia.maps.geo.Coordinate(50.1, 8.0),
        new nokia.maps.geo.Coordinate(50.1, 8.02),
        new nokia.maps.geo.Coordinate(50.0, 8.02)
    ],
    {
        pen: { strokeColor: "#000", lineWidth: 0 },
                brush: { color: "#2C2A" }
    }
));

map.objects.add(new nokia.maps.map.Polygon(
    [
        new nokia.maps.geo.Coordinate(50.0, 8.08),
        new nokia.maps.geo.Coordinate(50.1, 8.08),
        new nokia.maps.geo.Coordinate(50.1, 8.1),
        new nokia.maps.geo.Coordinate(50.0, 8.1)
    ],
    {
        pen: { strokeColor: "#000", lineWidth: 0 },
                brush: { color: "#2C2A" }
    }
));


map.objects.add(new nokia.maps.map.Polygon(
    [
        new nokia.maps.geo.Coordinate(50.0, 8.02),
        new nokia.maps.geo.Coordinate(50.02, 8.02),
        new nokia.maps.geo.Coordinate(50.02, 8.08),
        new nokia.maps.geo.Coordinate(50.0, 8.08)
    ],
    {
        pen: { strokeColor: "#000", lineWidth: 0 },
        brush: { color: "#2C2A" }
    }
));

map.objects.add(new nokia.maps.map.Polygon(
    [
        new nokia.maps.geo.Coordinate(50.1, 8.02),
        new nokia.maps.geo.Coordinate(50.08, 8.02),
        new nokia.maps.geo.Coordinate(50.08, 8.08),
        new nokia.maps.geo.Coordinate(50.1, 8.08)
    ],
    {
        pen: { strokeColor: "#000", lineWidth: 0 },
        brush: { color: "#2C2A" }
    }
));
Jason Fox
  • 5,115
  • 1
  • 15
  • 34
  • This is a solution,but the polygon that I want to draw is complex.But Thank you very much! – huanhuanw Jan 06 '14 at 02:00
  • For a ring, it should be possible to do it with two parts - just bisect the "hole" and join the lower half to the nearest coordinate on the outer ring - you can use [Polyline.getNearest()](http://developer.here.com/docs/maps_js/topics_api_pub/nokia.maps.map.Polyline.html#topic-apiref__Polyline-getNearest-method) to find the correct coordinate. Also you don't have to use `Coordinate` either - you could use an array of lat/lngs directly – Jason Fox Jan 06 '14 at 08:04