style
Please refer to the drawing styles in [Drawing Styles](/mapmost_docs/webgl_en/latest/docs/plugins/Mapmost-WebGL-Draw/API#Drawing Styles) in the API documentation for a complete style reference.
point
With this style, all point features are blue and have a black halo when active. Even if other elements are present, they will not be rendered.
Case
new MapmostDraw({
styles: [
{
'id': 'highlight-active-points',
'type': 'circle',
'filter': ['all',
['==', '$type', 'Point'],
['==', 'meta', 'feature'],
['==', 'active', 'true']],
'paint': {
'circle-radius': 7,
'circle-color': '#000000'
}
},
{
'id': 'points-are-blue',
'type': 'circle',
'filter': ['all',
['==', '$type', 'Point'],
['==', 'meta', 'feature'],
['==', 'active', 'false']],
'paint': {
'circle-radius': 5,
'circle-color': '#000088'
}
}
]
});
Lines and polygons
With this style, all line and polygon features are drawn with a red dashed outline and a transparent fill, including vertices. When the drawing mode is changed to static, these features will be drawn with a solid black outline and transparent fill. Use the same point filter for the points and render the points twice: once as a larger radius halo and once as a vertex insertion point.
Case
new MapmostDraw({
styles: [
// ACTIVE (drawing)
// Line drawing
{
"id": "gl-draw-line",
"type": "line",
"filter": ["all", ["==", "$type", "LineString"], ["!=", "mode", "static"]],
"layout": {
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#D20C0C",
"line-dasharray": [0.2, 2],
"line-width": 2
}
},
//polygon fill
{
"id": "gl-draw-polygon-fill",
"type": "fill",
"filter": ["all", ["==", "$type", "Polygon"], ["!=", "mode", "static"]],
"paint": {
"fill-color": "#D20C0C",
"fill-outline-color": "#D20C0C",
"fill-opacity": 0.1
}
},
//polygon midpoint
{
'id': 'gl-draw-polygon-midpoint',
'type': 'circle',
'filter': ['all',
['==', '$type', 'Point'],
['==', 'meta', 'midpoint']],
'paint': {
'circle-radius': 3,
'circle-color': '#fbb03b'
},
},
//Polygon outline stroke
// This will not style the first edge of the polygon, instead it will be styled with a line stroke
{
"id": "gl-draw-polygon-stroke-active",
"type": "line",
"filter": ["all", ["==", "$type", "Polygon"], ["!=", "mode", "static"]],
"layout": {
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#D20C0C",
"line-dasharray": [0.2, 2],
"line-width": 2
}
},
// vertex glow
{
"id": "gl-draw-polygon-and-line-vertex-halo-active",
"type": "circle",
"filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"]],
"paint": {
"circle-radius": 5,
"circle-color": "#FFF"
}
},
// vertex point
{
"id": "gl-draw-polygon-and-line-vertex-active",
"type": "circle",
"filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"]],
"paint": {
"circle-radius": 3,
"circle-color": "#D20C0C",
}
},
// INACTIVE (static, drawn)
// line stroke
{
"id": "gl-draw-line-static",
"type": "line",
"filter": ["all", ["==", "$type", "LineString"], ["==", "mode", "static"]],
"layout": {
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#000",
"line-width": 3
}
},
//polygon fill
{
"id": "gl-draw-polygon-fill-static",
"type": "fill",
"filter": ["all", ["==", "$type", "Polygon"], ["==", "mode", "static"]],
"paint": {
"fill-color": "#000",
"fill-outline-color": "#000",
"fill-opacity": 0.1
}
},
//Polygon outline
{
"id": "gl-draw-polygon-stroke-static",
"type": "line",
"filter": ["all", ["==", "$type", "Polygon"], ["==", "mode", "static"]],
"layout": {
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#000",
"line-width": 3
}
}
]
});
##Default style The default style for plotting is shown below. If you want to override the default style with a custom style, you can customize the ID to achieve the desired style effect.
| id | type | mode | active | meta | paint | layout |
|---|---|---|---|---|---|---|
| gl-draw-polygon-midpoint | Point | midpoint | 'circle-radius': 3,'circle-color':'#fbb03b' | |||
| gl-draw-polygon-and-line-vertex-stroke-inactive | Point | static | vertex | 'circle-radius': 5,'circle-color': '#fff' | ||
| gl-draw-polygon-and-line-vertex-inactive | Point | static | vertex | 'circle-radius': 3,'circle-color': '#fbb03b' | ||
| gl-draw-point-point-stroke-inactive | Point | static | false | feature | 'circle-radius': 5,'circle-opacity': 1,'circle-color': '#fff' | |
| gl-draw-point-inactive | Point | static | false | feature | 'circle-radius': 3, 'circle-color': '#3bb2d0' | |
| gl-draw-point-stroke-active | Point | true | midpoint | 'circle-radius': 7,'circle-color': '#fff' | ||
| gl-draw-point-active | Point | true | midpoint | 'circle-radius': 5,'circle-color': '#fbb03b' | ||
| gl-draw-point-static | Point | static | 'circle-radius': 5,'circle-color': '#404040' | |||
| gl-draw-line-inactive | LineString | static | false | 'line-color': '#3bb2d0','line-width': 2 | 'line-cap': 'round','line-join': 'round' | |
| gl-draw-line-active | LineString | true | 'line-color': '#fbb03b','line-dasharray': [0.2, 2],'line-width': 2 | 'line-cap': 'round','line-join': 'round' | ||
| gl-draw-line-static | LineString | static | 'circle-radius': 5,'circle-color': '#404040' | |||
| gl-draw-polygon-fill-inactive | Polygon | static | false | 'fill-color': '#3bb2d0','fill-outline-color': '#3bb2d0', 'fill-opacity': 0.1 | ||
| gl-draw-polygon-fill-active | Polygon | true | 'fill-color': '#fbb03b','fill-outline-color': '#fbb03b','fill-opacity': 0.1 | |||
| gl-draw-polygon-stroke-inactive | Polygon | static | false | 'line-color': '#3bb2d0','line-width': 2 | 'line-cap': 'round','line-join': 'round' | |
| gl-draw-polygon-stroke-active | Polygon | true | 'line-color': '#fbb03b','line-dasharray': [0.2, 2],'line-width': 2 | 'line-cap': 'round','line-join': 'round' | ||
| gl-draw-polygon-fill-static | Polygon | static | 'fill-color': '#404040','fill-outline-color': '#404040','fill-opacity': 0.1 | |||
| gl-draw-polygon-stroke-static | Polygon | static | 'line-color': '#404040','line-width': 2 | 'line-cap': 'round','line-join': 'round' |