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