Source: https://developers.woosmap.com/products/map-api/guides/render-shapes/

> For clean Markdown of any page, append `.md` to the page URL.

> For a complete documentation index, see https://developers.woosmap.com/llms.txt

# Render Shapes



You can add various geometries to your map: **lines** , **polygons** , **circles** and **rectangles**. To display a geometry you can implement either the dedicated overlays classes or use the Data layer, which support also adding geometries as GeoJSON.

## Geometry Overlays

### Polygons

To draw a polygon on your map, use the [`woosmap.map.Polygon`](/products/map-api/reference/1.4/#woosmap.map.Polygon) class. A polygon is defined by a series of ordered LatLng coordinates.

#### Add a polygon

The Polygon constructor takes a [`PolygonOptions`](/products/map-api/reference/1.4/#woosmap.map.PolygonOptions) object as parameter which specify the polygon’s path and a set of styles to adapt its visual behavior. A polygon may consist of one or more paths (a path is an array of [LatLng](/products/map-api/reference/1.4/#woosmap.map.LatLng) coordinates). For multiple areas or polygon with hole, specify the `paths` property as an Array of Array.

Example of creating a polygon with hole.

```javascript
//Outter Shape of Polygon
const outerShape = [
  { lat: 28.59, lng: -100.65 },
  { lat: 28.59, lng: -96.08 },
  { lat: 31.33, lng: -96.08 },
  { lat: 31.33, lng: -100.65 },
  { lat: 28.59, lng: -100.65 },
];
//The Polygon Hole
const innerShape = [
  { lat: 29.07, lng: -98.81 },
  { lat: 29.07, lng: -96.63 },
  { lat: 30.16, lng: -96.63 },
  { lat: 30.16, lng: -98.81 },
  { lat: 29.07, lng: -98.81 },
];
//Polygon Object with Paths as an Array of LatLnf Array
const polygon = new woosmap.map.Polygon({
  paths: [outerShape, innerShape],
  strokeColor: "#b71c1c",
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: "#b71c1c",
  fillOpacity: 0.5,
});
polygon.setMap(map);
```

#### Polygon Style Properties

Polygons support following style properties:

- `fillColor`: hexadecimal color for the enclosed area. (default: `#000`)
- `fillOpacity`: numerical value between 0.0 and 1.0 defining the opacity of the fill’s color (default: `0.3`)
- `strokeColor`: hexadecimal color for the edge of the polygon. (default: `#000`)
- `strokeOpacity`: specifies a numerical value between 0.0 and 1.0 to determine the opacity of the stroke’s color. ( default: `1.0`)
- `strokeWeight`: width of the stroke in pixels. (default: `2`)

#### Polygon Example

The Following example is a Polygon with one interior boundary (hole).

https://demo.woosmap.com/js-samples/samples/render-shapes-polygons/app/dist/
[](https://demo.woosmap.com/js-samples/samples/render-shapes-polygons/highlight/highlight.html "Open in new tab with highlighted code")
Try sample 

- [CodeSandbox](https://codesandbox.io/p/devbox/github/woosmap/js-samples/tree/master/dist/samples/render-shapes-polygons/app?file=index.ts)
- [JsFiddle](https://jsfiddle.net/gh/get/library/pure/woosmap/js-samples/tree/master/dist/samples/render-shapes-polygons/jsfiddle)
- [Clone on Github](https://github.com/Woosmap/js-samples/tree/sample/render-shapes-polygons)

### Lines and Polylines

The [`woosmap.map.Polyline`](/products/map-api/reference/1.4/#woosmap.map.Polyline) class defines an overlay of line segments on the map consisting of an array of [LatLng](/products/map-api/reference/1.4/#woosmap.map.LatLng) coordinates. To draw a line, use the Polyline with only two locations.

#### Add a Polyline

The Polyline constructor takes a [`PolylineOptions`](/products/map-api/reference/1.4/#woosmap.map.PolylineOptions) object as parameter which specify the polyline’s path and the stroke style. A Polyline consist of an array of [LatLng](/products/map-api/reference/1.4/#woosmap.map.LatLng) coordinates.

```javascript
const polylinePath = [
  { lng: -0.12638568878173828, lat: 51.50099581189912 },
  { lng: -0.12201905250549315, lat: 51.500832183172456 },
  { lng: -0.11891841888427736, lat: 51.50078877137083 },
  { lng: -0.11869311332702637, lat: 51.500832183172456 },
];
const polyline = new woosmap.map.Polyline({
  path: polylinePath,
  strokeColor: "#b71c1c",
  strokeOpacity: 0.8,
  strokeWeight: 4,
});
polyline.setMap(map);
```

#### Polylines Style Properties

Polylines support following style properties:

- `strokeColor`: hexadecimal color for the stroke of the polyline. (default: `#000`)
- `strokeOpacity`: specifies a numerical value between 0.0 and 1.0 to determine the opacity of the stroke’s color. ( default: `1.0`)
- `strokeWeight`: width of the stroke in pixels. (default: `2`)

#### Polylines Example

Here is an example of a simple Polyline.

https://demo.woosmap.com/js-samples/samples/render-shapes-polylines/app/dist/
[](https://demo.woosmap.com/js-samples/samples/render-shapes-polylines/highlight/highlight.html "Open in new tab with highlighted code")
Try sample 

- [CodeSandbox](https://codesandbox.io/p/devbox/github/woosmap/js-samples/tree/master/dist/samples/render-shapes-polylines/app?file=index.ts)
- [JsFiddle](https://jsfiddle.net/gh/get/library/pure/woosmap/js-samples/tree/master/dist/samples/render-shapes-polylines/jsfiddle)
- [Clone on Github](https://github.com/Woosmap/js-samples/tree/sample/render-shapes-polylines)

### Circles

To draw a circle, use the [`woosmap.map.Circle`](/products/map-api/reference/1.4/#woosmap.map.Circle) class. A circle shape is defined as a [LatLng](/products/map-api/reference/1.4/#woosmap.map.LatLng) coordinates, the center of the circle, and a radius in meters. Circles support same style properties as Polygons.

#### Add a Circle

```javascript
const latlng = { lat: 43.34, lng: -24.76 };
const radius50km = 50000;
const cityCircle = new woosmap.map.Circle({
  strokeColor: "#b71c1c",
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: "#b71c1c",
  fillOpacity: 0.5,
  map,
  center: latlng,
  radius: radius50km,
});
```

#### Circles Example

The following example display a Circle for megacities in the world. Circle radius is relative to the population of each city.

https://demo.woosmap.com/js-samples/samples/render-shapes-circles/app/dist/
[](https://demo.woosmap.com/js-samples/samples/render-shapes-circles/highlight/highlight.html "Open in new tab with highlighted code")
Try sample 

- [CodeSandbox](https://codesandbox.io/p/devbox/github/woosmap/js-samples/tree/master/dist/samples/render-shapes-circles/app?file=index.ts)
- [JsFiddle](https://jsfiddle.net/gh/get/library/pure/woosmap/js-samples/tree/master/dist/samples/render-shapes-circles/jsfiddle)
- [Clone on Github](https://github.com/Woosmap/js-samples/tree/sample/render-shapes-circles)

### Remove Overlays

To remove a geometry overlay from the map (Polyline, Polygon, Circle), call the `setMap()` method passing `null` as the argument as described in the [BaseGeometry class](/products/map-api/reference/1.4/#woosmap.map.BaseGeometry).

```javascript
myPolyline.setMap(null);
myPolygon.setMap(null);
myCircle.setMap(null);
```

This method removes the overlay from the map but does not delete it. To do so, set the overlay itself to `null`.

## Data layer

Instead of using dedicated overlays such as markers, polylines, and polygons you can implement the Woosmap Map Data layer through the [`woosmap.map.Data`](/products/map-api/reference/1.4/#woosmap.map.Data) class. This class is a container for any geospatial data and associated properties. You can use it to draw GeoJSON and supported geographic data structures.

### Display GeoJSON data

[GeoJSON](https://geojson.org/) is a standard format for encoding a variety of geospatial data. Use the [`woosmap.map.Data.loadGeoJson()`](/products/map-api/reference/1.4/#woosmap.map.Data) method to import GeoJSON data and display [Point](/products/map-api/reference/1.4/#woosmap.map.Data.Point) , [LineString](/products/map-api/reference/1.4/#woosmap.map.Data.LineString) , [LinearRing](/products/map-api/reference/1.4/#woosmap.map.Data.LinearRing) , [Polygon](/products/map-api/reference/1.4/#woosmap.map.Data.Polygon) , [MultiPoint](/products/map-api/reference/1.4/#woosmap.map.Data.MultiPoint) , [MultiLineString](/products/map-api/reference/1.4/#woosmap.map.Data.MultiLineString) and [MultiPolygon](/products/map-api/reference/1.4/#woosmap.map.Data.MultiPolygon).

The below example shows how to add a map and load external GeoJSON data.

```javascript
let map;

function initMap() {
  map = new woosmap.map.Map(document.getElementById("map"), {
    center: { lat: 57.51, lng: 8.15 },
    zoom: 4,
  });

  map.data.loadGeoJson(
    "https://demo.woosmap.com/misc/data/europe.geojson.json"
  );
}

initMap();
```

https://demo.woosmap.com/js-samples/samples/render-shapes-geojson/app/dist/
[](https://demo.woosmap.com/js-samples/samples/render-shapes-geojson/highlight/highlight.html "Open in new tab with highlighted code")
Try sample 

- [CodeSandbox](https://codesandbox.io/p/devbox/github/woosmap/js-samples/tree/master/dist/samples/render-shapes-geojson/app?file=index.ts)
- [JsFiddle](https://jsfiddle.net/gh/get/library/pure/woosmap/js-samples/tree/master/dist/samples/render-shapes-geojson/jsfiddle)
- [Clone on Github](https://github.com/Woosmap/js-samples/tree/sample/render-shapes-geojson)

### Adding Data Geometries

All supported geometries from GeoJSON has dedicated subclasses attached to the Data layer. Here is an example using class [`woosmap.map.Data.Point()`](/products/map-api/reference/1.4/#woosmap.map.Data.Point). Please note that [Markers](/products/map-api/guides/markers/) have advanced properties and dedicated methods to manage points on a map.

```javascript
const point = {
  coordinates: { lat: -33.364, lng: 154.207 },
  properties: {
    name: "Example Point Name",
  },
};
map.data.add({
  geometry: new woosmap.map.Data.Point(point.coordinates),
  properties: point.properties,
});
```

The following example display Irish pubs registered in Dublin.

https://demo.woosmap.com/js-samples/samples/render-shapes-data/app/dist/
[](https://demo.woosmap.com/js-samples/samples/render-shapes-data/highlight/highlight.html "Open in new tab with highlighted code")
Try sample 

- [CodeSandbox](https://codesandbox.io/p/devbox/github/woosmap/js-samples/tree/master/dist/samples/render-shapes-data/app?file=index.ts)
- [JsFiddle](https://jsfiddle.net/gh/get/library/pure/woosmap/js-samples/tree/master/dist/samples/render-shapes-data/jsfiddle)
- [Clone on Github](https://github.com/Woosmap/js-samples/tree/sample/render-shapes-data)

### Style Data layer

Use [`woosmap.map.Data.setStyle()`](/products/map-api/reference/1.4/#woosmap.map.Data) to specify how your data should look. The `setStyle()` method takes either a [`StyleOptions`](/products/map-api/reference/1.4/#woosmap.map.StyleOptions) object literal, or a function that computes the style for each feature.

Options available for styling each feature depend upon the feature type. Please refer to dedicated shape style properties of [Geometry Overlays](/products/map-api/guides/render-shapes/#geometry-overlays) section.

#### Using Object style rules

Passing a [`StyleOptions`](/products/map-api/reference/1.4/#woosmap.map.StyleOptions) object literal to the `setStyle()` method will apply style rules for each feature in your Data layer. You can put here style options which are supported by different shapes. In the following examples, `fillColor` will only apply for polygons whereas `strokeColor` defines the stroke for both polygons and polylines.

```javascript
map.data.setStyle({
  fillColor: "yellow",
  strokeColor: "red",
  strokeWeight: 1,
});
```

#### Using Function style rules

Using a function as parameter to `setStyle` lets you style Data layer features based on properties contained in your data set. For example, the below code sets the color “red” for shapes with property `highlighted: true`.

```javascript
map.data.setStyle(function (feature) {
  let color = "yellow";
  if (feature.getProperty("highlighted")) {
    color = "red";
  }
  return {
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2,
  };
});
```

#### Apply special styling rules

Styling rules apply commonly to each feature contained in the Data layer. To override styles set previously and default ones, call the `overrideStyle()` method passing it a `StyleOptions` object literal with the styles you want to change.

```javascript
// Set strokeColor on mouseover data layer
map.data.addListener("mouseover", function (event) {
  map.data.overrideStyle(event.feature, { strokeColor: "black" });
});
```

Call the `revertStyle()` method to remove all style overrides.

#### Remove styles

To remove any custom styles that you’ve specified, pass an empty object to `setStyle()` method. The features will render using the default styles.

```javascript
map.data.setStyle({});
```

## Handling Events

To register for event listeners, call the `addListener()` event handler on Data layer. It takes an event string name parameter to listen for, and a function to call when the specified event is triggered.

```javascript
map.data.addListener("click", function (event) {
  event.feature.setProperty("highlighted", true);
});
```

The below sample will show you what events are triggered by the `woosmap.map.Data` as you interact with the shape.

https://demo.woosmap.com/js-samples/samples/render-shapes-data-events/app/dist/
[](https://demo.woosmap.com/js-samples/samples/render-shapes-data-events/highlight/highlight.html "Open in new tab with highlighted code")
Try sample 

- [CodeSandbox](https://codesandbox.io/p/devbox/github/woosmap/js-samples/tree/master/dist/samples/render-shapes-data-events/app?file=index.ts)
- [JsFiddle](https://jsfiddle.net/gh/get/library/pure/woosmap/js-samples/tree/master/dist/samples/render-shapes-data-events/jsfiddle)
- [Clone on Github](https://github.com/Woosmap/js-samples/tree/sample/render-shapes-data-events)