Drawing multiple holes into a polygon - nokia maps api v2

Question

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!

Answer 1

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.

// 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" }
    }
));