Style
Style for PointFeature
To change the style for a PointFeature, you typically define a PointStyle object with the desired appearance properties like image, fill, stroke, etc. and then apply that style to the PointFeature.
private PointFeature createStyledPoint() {
return new PointFeature(GeometryUtils.createPoint(22, 25))
.withStyles(
new PointStyle()
.withImage(new CircleStyle()
.withRadius(7)
.withFill(new Fill("#E7003E"))
.withStroke(new Stroke()
.withWidth(2.0)
.withColor("#710067")))
.build());
}
Using text instead of an image for the PointFeature allows you to display textual labels directly on the map at specified coordinates, providing clarity and context to the displayed data.
When utilizing text for PointFeature, you can customize the appearance of the text by adjusting properties like font, fill, textAlign, etc.
The example below demonstrates using textual label instead of an image for the PointFeature:
private PointFeature createTextPoint() {
return new PointFeature(GeometryUtils.createPoint(15, 15))
.withStyles(
new PointStyle()
.withText(new TextStyle()
.withText("Africa")
.withFont("20px sans-serif")
.withFill(new Fill("#5E4BD8"))
.withStroke(new Stroke()
.withWidth(2.)
.withColor("#A368D5")))
.build());
}
Style for MarkerFeature
To change the marker icon, refer the following example:
private MarkerFeature createStyledMarker() {
MarkerFeature feature = new MarkerFeature(GeometryUtils.createPoint(20, 20));
feature.removeAllStyles();
return feature.withStyles(new Style()
.withImage(new IconStyle()
.withSrc("icons/icon.png")
.withScale(0.05)));
}Additionally, an example of customizing marker icons based on the geo-object’s attributes is provided in the Use Custom Markers section.
Style for LineStringFeature
To change the style for a LineStringFeature, you typically define a LineStringStyle object with the desired appearance properties like stroke, fill, etc., and then apply that style to the LineStringFeature.
private LineStringFeature createStyledLineString() {
LineString lineString = geometries.createLineString(new Coordinate[]{
new Coordinate(13, 20),
new Coordinate(13, 32),
new Coordinate(25, 17)});
return new LineStringFeature(lineString)
.withStyles(
new LineStringStyle()
.withStroke(new Stroke()
.withWidth(3.)
.withColor("#F60018"))
.build());
}
Style for PolygonFeature
Changing the style for a PolygonFeature involves defining a new PolygonStyle with desired properties like fill, stroke, etc., and applying this style to the PolygonFeature.
private PolygonFeature createStyledPolygon() {
LinearRing shell = geometries.createLinearRing(new Coordinate[]{
new Coordinate(1.2457020544488762, 42.476628901048684),
new Coordinate(-0.054875980233204155, 52.77260344863316),
new Coordinate(29.858418817454655, 46.105591288830624),
new Coordinate(1.2457020544488762, 42.476628901048684),
});
return new PolygonFeature(geometries.createPolygon(shell))
.withStyles(
new PolygonStyle()
.withFill(new Fill("rgba(1, 147, 154, 0.2)"))
.withStroke(new Stroke()
.withWidth(3.)
.withColor("#123EAB"))
.build());
}
Select Mode Styles
Every feature type in the vector source has default styles for the select mode. These styles are automatically applied when a user selects a feature on the map. To customize the selection styles, each feature provides methods for adding your own styles.
For instance, here’s how you can add custom selection styles to a PolygonFeature:
private PolygonFeature createPolygonWithSelectStyles() {
Polygon polygon = GeometryUtils.createPolygon(new Coordinate[]{
new Coordinate(-64.75370117729211, 32.30679527567045),
new Coordinate(-80.18546220891433, 25.760830653727623),
new Coordinate(-80.18546220891433, 25.760830653727623),
new Coordinate(-66.11846996297967, 18.4077981563645),
new Coordinate(-64.75370117729211, 32.30679527567045),
});
return new PolygonFeature(polygon)
.withSelectStyles(
new PolygonStyle()
.withFill(new Fill("rgba(255, 61, 0, 0.2)"))
.withStroke(new Stroke()
.withWidth(4d)
.withColor("#FF3D00"))
.build());
}
| To apply the same selection style to all features in the source, set the select styles on the vector layer. |
Modify Mode Styles
Vector sources provide the modify mode. When activated, this mode generates points at the geometry’s vertices, allowing for modifications such as adding new vertices and changing existing vertex positions. This mode also defines the styles for these generated vertices, which are displayed on the map to represent the geometry.
For example, here’s how to set custom styles for polygon vertex points:
private PolygonFeature createPolygonWithModifyStyles() {
Polygon polygon = GeometryUtils.createPolygon(new Coordinate[]{
new Coordinate(77.2048761253423, 28.605384389707353),
new Coordinate(75.78484389126132, 26.895539146773086),
new Coordinate(78.00224596797739, 27.170451672755192),
new Coordinate(77.2048761253423, 28.605384389707353)});
return new PolygonFeature(polygon)
.withModifyStyles(
new PointStyle()
.withImage(new CircleStyle()
.withRadius(6)
.withFill(new Fill("rgba(149, 107, 214, 0.5)"))
.withStroke(new Stroke()
.withWidth(2d)
.withColor("#2F0571")))
.build());
}
| To apply the same modify styles to all features in the source, set the modify styles on the vector layer. |
