| 1 | # Examples
|
| 2 |
|
| 3 | ## Styling
|
| 4 |
|
| 5 | See [API.md](https://github.com/mapbox/mapbox-gl-draw/blob/master/API.md) for a complete styling reference.
|
| 6 |
|
| 7 | ### points
|
| 8 |
|
| 9 | With this style, all Point features are blue and have a black halo when active.
|
| 10 | No other features are rendered, even if they are present.
|
| 11 |
|
| 12 | ```js
|
| 13 | mapbox.Draw({
|
| 14 | styles: [
|
| 15 | {
|
| 16 | 'id': 'highlight-active-points',
|
| 17 | 'type': 'circle',
|
| 18 | 'filter': ['all',
|
| 19 | ['==', '$type', 'Point'],
|
| 20 | ['==', 'meta', 'feature'],
|
| 21 | ['==', 'active', 'true']],
|
| 22 | 'paint': {
|
| 23 | 'circle-radius': 7,
|
| 24 | 'circle-color': '#000000'
|
| 25 | }
|
| 26 | },
|
| 27 | {
|
| 28 | 'id': 'points-are-blue',
|
| 29 | 'type': 'circle',
|
| 30 | 'filter': ['all',
|
| 31 | ['==', '$type', 'Point'],
|
| 32 | ['==', 'meta', 'feature'],
|
| 33 | ['==', 'active', 'true']],
|
| 34 | 'paint': {
|
| 35 | 'circle-radius': 5,
|
| 36 | 'circle-color': '#000088'
|
| 37 | }
|
| 38 | }
|
| 39 | ]
|
| 40 | });
|
| 41 | ```
|
| 42 |
|
| 43 | ### lines and polygons
|
| 44 |
|
| 45 | With this style, all line and polygon features are have dashed red outline and transparent fill while being drawn, including the point vertices. When the Draw mode is changed the 'static', these features will be drawn with solid black outline and transparent fill. Point vertices use the same point filter, and render these points twice: once as a larger-radius halo, and again as the vertex inset point.
|
| 46 |
|
| 47 | ```js
|
| 48 | mapbox.Draw({
|
| 49 | styles: [
|
| 50 | // ACTIVE (being drawn)
|
| 51 | // line stroke
|
| 52 | {
|
| 53 | "id": "gl-draw-line",
|
| 54 | "type": "line",
|
| 55 | "filter": ["all", ["==", "$type", "LineString"], ["!=", "mode", "static"]],
|
| 56 | "layout": {
|
| 57 | "line-cap": "round",
|
| 58 | "line-join": "round"
|
| 59 | },
|
| 60 | "paint": {
|
| 61 | "line-color": "#D20C0C",
|
| 62 | "line-dasharray": [0.2, 2],
|
| 63 | "line-width": 2
|
| 64 | }
|
| 65 | },
|
| 66 | // polygon fill
|
| 67 | {
|
| 68 | "id": "gl-draw-polygon-fill",
|
| 69 | "type": "fill",
|
| 70 | "filter": ["all", ["==", "$type", "Polygon"], ["!=", "mode", "static"]],
|
| 71 | "paint": {
|
| 72 | "fill-color": "#D20C0C",
|
| 73 | "fill-outline-color": "#D20C0C",
|
| 74 | "fill-opacity": 0.1
|
| 75 | }
|
| 76 | },
|
| 77 | // polygon outline stroke
|
| 78 | // This doesn't style the first edge of the polygon, which uses the line stroke styling instead
|
| 79 | {
|
| 80 | "id": "gl-draw-polygon-stroke-active",
|
| 81 | "type": "line",
|
| 82 | "filter": ["all", ["==", "$type", "Polygon"], ["!=", "mode", "static"]],
|
| 83 | "layout": {
|
| 84 | "line-cap": "round",
|
| 85 | "line-join": "round"
|
| 86 | },
|
| 87 | "paint": {
|
| 88 | "line-color": "#D20C0C",
|
| 89 | "line-dasharray": [0.2, 2],
|
| 90 | "line-width": 2
|
| 91 | }
|
| 92 | },
|
| 93 | // vertex point halos
|
| 94 | {
|
| 95 | "id": "gl-draw-polygon-and-line-vertex-halo-active",
|
| 96 | "type": "circle",
|
| 97 | "filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"]],
|
| 98 | "paint": {
|
| 99 | "circle-radius": 5,
|
| 100 | "circle-color": "#FFF"
|
| 101 | }
|
| 102 | },
|
| 103 | // vertex points
|
| 104 | {
|
| 105 | "id": "gl-draw-polygon-and-line-vertex-active",
|
| 106 | "type": "circle",
|
| 107 | "filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"]],
|
| 108 | "paint": {
|
| 109 | "circle-radius": 3,
|
| 110 | "circle-color": "#D20C0C",
|
| 111 | }
|
| 112 | },
|
| 113 |
|
| 114 | // INACTIVE (static, already drawn)
|
| 115 | // line stroke
|
| 116 | {
|
| 117 | "id": "gl-draw-line-static",
|
| 118 | "type": "line",
|
| 119 | "filter": ["all", ["==", "$type", "LineString"], ["==", "mode", "static"]],
|
| 120 | "layout": {
|
| 121 | "line-cap": "round",
|
| 122 | "line-join": "round"
|
| 123 | },
|
| 124 | "paint": {
|
| 125 | "line-color": "#000",
|
| 126 | "line-width": 3
|
| 127 | }
|
| 128 | },
|
| 129 | // polygon fill
|
| 130 | {
|
| 131 | "id": "gl-draw-polygon-fill-static",
|
| 132 | "type": "fill",
|
| 133 | "filter": ["all", ["==", "$type", "Polygon"], ["==", "mode", "static"]],
|
| 134 | "paint": {
|
| 135 | "fill-color": "#000",
|
| 136 | "fill-outline-color": "#000",
|
| 137 | "fill-opacity": 0.1
|
| 138 | }
|
| 139 | },
|
| 140 | // polygon outline
|
| 141 | {
|
| 142 | "id": "gl-draw-polygon-stroke-static",
|
| 143 | "type": "line",
|
| 144 | "filter": ["all", ["==", "$type", "Polygon"], ["==", "mode", "static"]],
|
| 145 | "layout": {
|
| 146 | "line-cap": "round",
|
| 147 | "line-join": "round"
|
| 148 | },
|
| 149 | "paint": {
|
| 150 | "line-color": "#000",
|
| 151 | "line-width": 3
|
| 152 | }
|
| 153 | }
|
| 154 | ]
|
| 155 | });
|
| 156 | ```
|