Community Forum

Render Shapes

Display and style geospatial data like polygons or any GeoJSON data.
  1. Geometry Overlays
  2. Data layer
  3. Handling Events

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 class. A polygon is defined by a series of ordered LatLng coordinates.

Add a polygon

The Polygon constructor takes a 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 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:

Polygon Example

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

Lines and Polylines

The woosmap.map.Polyline class defines an overlay of line segments on the map consisting of an array of LatLng coordinates. To draw a line, use the Polyline with only two locations.

Add a Polyline

The Polyline constructor takes a PolylineOptions object as parameter which specify the polyline’s path and the stroke style. A Polyline consist of an array of 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:

Polylines Example

Here is an example of a simple Polyline.

Circles

To draw a circle, use the woosmap.map.Circle class. A circle shape is defined as a 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.

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.

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 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 is a standard format for encoding a variety of geospatial data. Use the woosmap.map.Data.loadGeoJson() method to import GeoJSON data and display Point , LineString , LinearRing , Polygon , MultiPoint , MultiLineString and 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();

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(). Please note that 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.

Style Data layer

Use woosmap.map.Data.setStyle() to specify how your data should look. The setStyle() method takes either a 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 section.

Using Object style rules

Passing a 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.

‹ Get Transit Route Draw Shapes ›
Was this article helpful?
Have more questions? Submit a request