Skip to content

Commit 00e1dbe

Browse files
digitaltomdigitaltom
committed
mapbox-gl-draw update
1 parent ab45096 commit 00e1dbe

12 files changed

Lines changed: 2094 additions & 2600 deletions

File tree

‎THIRD-PARTY-LICENSES.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
137137
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.<Paste>
138138
```
139139

140-
### @mapbox/mapbox-gl-draw 1.5.1
140+
### @mapbox/mapbox-gl-draw 1.5.2
141141

142142
https://www.npmjs.com/package/@mapbox/mapbox-gl-draw
143143

‎app/javascript/controllers/feature/modal_controller.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { EXTRAS_COLOR_CONFIGS } from 'maplibre/layers/geojson/route_extras'
1616
import { getFeature, layers } from 'maplibre/layers/layers'
1717
import { convertToRoute } from 'maplibre/routing/gpx_to_route'
1818
import { routingEnabled } from 'maplibre/routing/openrouteservice'
19-
import { defaultPointSize, defaults } from 'maplibre/styles/defaults'
19+
import { defaultLineWidth, defaultPointSize, defaults } from 'maplibre/styles/defaults'
2020

2121
let easyMDE
2222

@@ -147,7 +147,7 @@ export default class extends Controller {
147147
syncShapeButtons(feature)
148148
syncMarkerContent(feature)
149149
} else if (feature.geometry.type === 'LineString' || feature.geometry.type === 'MultiLineString') {
150-
const size = feature.properties['stroke-width'] || defaults.lineWidth
150+
const size = feature.properties['stroke-width'] || defaultLineWidth(feature)
151151
document.querySelector('#line-width').value = size
152152
document.querySelector('#line-width-val').innerHTML = size
153153
document.querySelector('#show-km-markers').checked = feature.properties['show-km-markers']
@@ -176,7 +176,7 @@ export default class extends Controller {
176176
dom.showElements(['#feature-edit-ui .edit-polygon'])
177177
document.querySelector('#fill-color').value = functions.hexColor(feature.properties.fill, defaults.featureColor)
178178
document.querySelector('#stroke-color').value = functions.hexColor(feature.properties.stroke, defaults.featureOutlineColor)
179-
const size = feature.properties['stroke-width'] || defaults.lineWidth
179+
const size = feature.properties['stroke-width'] || defaults.polygonOutlineWidth
180180
document.querySelector('#outline-width').value = size
181181
document.querySelector('#outline-width-val').innerHTML = size
182182
document.querySelector('#opacity').value = (feature.properties['fill-opacity'] || defaults.extrusionOpacity) * 10

‎app/javascript/maplibre/edit.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -105,10 +105,10 @@ export async function initializeEditMode () {
105105
// styles already split per source bucket, so rebuild them the same way it does.
106106
map.on('basemap.change', () => {
107107
const editLayers = editStyles()
108-
const bucketed = bucket => editLayers.map(style => style.source
109-
? style
110-
: { ...style, id: `${style.id}.${bucket}`, source: `mapbox-gl-draw-${bucket}` })
111-
draw.options.styles = [...bucketed('cold'), ...bucketed('hot')]
108+
const sourceless = editLayers.filter(style => !style.source)
109+
const bucketed = bucket => sourceless.map(style =>
110+
({ ...style, id: `${style.id}.${bucket}`, source: `mapbox-gl-draw-${bucket}` }))
111+
draw.options.styles = [...editLayers.filter(style => style.source), ...bucketed('cold'), ...bucketed('hot')]
112112
})
113113

114114
initializeEditStyles()

‎app/javascript/maplibre/layers/geojson/extrusion.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { buffer } from "@turf/buffer"
2-
import { defaults } from 'maplibre/styles/defaults'
2+
import { defaultLineWidth, defaults } from 'maplibre/styles/defaults'
33

44
// Buffer a LineString into a polygon for MapLibre's fill-extrusion layer, which has no line support.
55
// Returns null for geometry that can't be buffered (non-line, <2 coords, or degenerate).
@@ -8,7 +8,7 @@ export function buildLineExtrusion(feature) {
88
if (feature.geometry?.type !== 'LineString' || feature.geometry.coordinates.length < 2) {
99
return null
1010
}
11-
const width = feature.properties['fill-extrusion-width'] || feature.properties['stroke-width'] || defaults.lineWidth
11+
const width = feature.properties['fill-extrusion-width'] || feature.properties['stroke-width'] || defaultLineWidth(feature)
1212
const extrusionLine = buffer(feature, width / 2, { units: 'meters' })
1313
if (!extrusionLine) { return null }
1414
// Route-extras segments are anonymous slices of a route, so they stay id-less.

‎app/javascript/maplibre/layers/geojson/route_extras.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -297,7 +297,7 @@ export function renderRouteExtras (features, sourceId) {
297297
.filter(key => key in feature.properties)
298298
.map(key => [key, feature.properties[key]])),
299299
'stroke': resolveExtrasColor(extrasType, value),
300-
'stroke-width': feature.properties['stroke-width'] || 5
300+
'stroke-width': feature.properties['stroke-width'] || defaults.routeWidth
301301
}
302302
})
303303
})

‎app/javascript/maplibre/routing/directions.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ export function initDirections (profile, feature) {
224224
"fill-extrusion-base": 3,
225225
"stroke-opacity": 0.65,
226226
"fill-extrusion-width": 1.5,
227-
"stroke-width": 5,
227+
"stroke-width": defaults.routeWidth,
228228
"stroke": trackColor,
229229
"stroke-dasharray": true,
230230
"show-km-markers": true }

‎app/javascript/maplibre/routing/gpx_to_route.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { status } from 'helpers/status'
99
import { showFeatureDetails } from 'maplibre/feature'
1010
import { upsert } from 'maplibre/map'
1111
import { getRouteElevation, ORS_EXTRA_INFO, orsProfiles } from 'maplibre/routing/openrouteservice'
12+
import { defaults } from 'maplibre/styles/defaults'
1213
import { addUndoState } from 'maplibre/undo'
1314
import Openrouteservice from 'openrouteservice-js'
1415

@@ -198,7 +199,7 @@ export async function convertToRoute(originalFeature, profile) {
198199
// Route-specific styling
199200
'stroke': trackColor,
200201
'stroke-opacity': 0.65,
201-
'stroke-width': 5,
202+
'stroke-width': defaults.routeWidth,
202203
'stroke-dasharray': true,
203204
'show-km-markers': true,
204205
'fill-extrusion-height': 8,
@@ -349,7 +350,7 @@ async function convertToRouteSegmented(originalFeature, profile, waypoints) {
349350
...originalFeature.properties,
350351
'stroke': trackColor,
351352
'stroke-opacity': 0.65,
352-
'stroke-width': 5,
353+
'stroke-width': defaults.routeWidth,
353354
'stroke-dasharray': true,
354355
'show-km-markers': true,
355356
'fill-extrusion-height': 8,

‎app/javascript/maplibre/styles/defaults.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,8 @@ const baseDefaults = {
3939
extrudedShadowOpacity: 0.7,
4040
extrudedShadowOpacityActive: 0.4,
4141

42-
lineWidth: 3,
42+
lineWidth: 2,
43+
routeWidth: 3,
4344
lineOpacity: 0.8,
4445
lineOpacityActive: 1,
4546
polygonOutlineWidth: 2,
@@ -91,13 +92,7 @@ const baseEditDefaults = {
9192
activePointOpacity: 0.2,
9293
activePointOutlineWidth: 4,
9394
vertexOutlineColor: '#444',
94-
vertexOutlineWidth: 2,
95-
96-
routeVertexSize: 4,
97-
routeVertexColor: 'grey',
98-
routeVertexOpacity: 0.7,
99-
routeVertexBorderColor: '#ffffff',
100-
routeVertexBorderWidth: 1
95+
vertexOutlineWidth: 2
10196
}
10297

10398
export const defaults = { ...baseDefaults }
@@ -113,6 +108,12 @@ export function defaultPointSize (feature) {
113108
return defaults.pointSizePlain
114109
}
115110

111+
// Width a line falls back to when it has no explicit 'stroke-width'.
112+
// Keep in sync with lineWidthDefault() in styles.js, which is what the map renders.
113+
export function defaultLineWidth (feature) {
114+
return feature.properties.route ? defaults.routeWidth : defaults.lineWidth
115+
}
116+
116117
// Re-applies the base values first, so keys overridden by the previous basemap
117118
// get reset instead of leaking into the new one.
118119
export function applyBasemapDefaults (basemap) {

‎app/javascript/maplibre/styles/edit_styles.js‎

Lines changed: 4 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -119,10 +119,7 @@ export function editStyles() {
119119
type: 'circle',
120120
filter: ['all',
121121
['==', '$type', 'Point'],
122-
['==', 'meta', 'midpoint'],
123-
// only show midpoints if this is not a route
124-
// parent properties are patched into the midpoint properties
125-
['!has', 'user_route']
122+
['==', 'meta', 'midpoint']
126123
],
127124
paint: {
128125
'circle-radius': editDefaults.midpointSize,
@@ -176,8 +173,7 @@ export function editStyles() {
176173
filter: ['all',
177174
['==', 'meta', 'vertex'],
178175
['==', '$type', 'Point'],
179-
['!=', 'mode', 'static'],
180-
['!has', 'user_route']
176+
['!=', 'mode', 'static']
181177
],
182178
paint: {
183179
'circle-radius': editDefaults.vertexSize,
@@ -187,55 +183,20 @@ export function editStyles() {
187183
'circle-stroke-opacity': 1
188184
}
189185
},
190-
// inactive vertex points on lines + polygons (non-route)
186+
// inactive vertex points on lines + polygons
191187
{
192188
id: 'gl-draw-polygon-and-line-vertex-inactive',
193189
type: 'circle',
194190
filter: ['all',
195191
['==', 'meta', 'vertex'],
196192
['==', '$type', 'Point'],
197-
['!=', 'mode', 'static'],
198-
['!has', 'user_route']
193+
['!=', 'mode', 'static']
199194
],
200195
paint: {
201196
'circle-radius': editDefaults.vertexSize,
202197
'circle-color': editDefaults.highlightColor
203198
}
204199
},
205-
// Route point borders (rendered like midpoints in normal linestring)
206-
{
207-
id: 'gl-draw-route-vertex-inactive-midpoint-border',
208-
type: 'circle',
209-
filter: ['all',
210-
['==', 'meta', 'vertex'],
211-
['==', '$type', 'Point'],
212-
['!=', 'mode', 'static'],
213-
['has', 'user_route']
214-
],
215-
paint: {
216-
'circle-radius': editDefaults.routeVertexSize,
217-
'circle-opacity': 0,
218-
'circle-stroke-opacity': 1,
219-
'circle-stroke-color': editDefaults.routeVertexBorderColor,
220-
'circle-stroke-width': editDefaults.routeVertexBorderWidth,
221-
}
222-
},
223-
// Route midpoints (rendered like midpoints in normal linestring)
224-
{
225-
id: 'gl-draw-route-vertex-inactive-midpoint',
226-
type: 'circle',
227-
filter: ['all',
228-
['==', 'meta', 'vertex'],
229-
['==', '$type', 'Point'],
230-
['!=', 'mode', 'static'],
231-
['has', 'user_route']
232-
],
233-
paint: {
234-
'circle-radius': editDefaults.routeVertexSize,
235-
'circle-color': editDefaults.routeVertexColor,
236-
'circle-opacity': editDefaults.routeVertexOpacity
237-
}
238-
},
239200
//
240201
// {
241202
// id: "maplibre-gl-directions-waypoint",

‎app/javascript/maplibre/styles/styles.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,10 @@ const fillOpacity = () => ['to-number', styleProp(['fill-opacity', 'user_fill-op
145145
const lineColor = () => styleProp(['stroke', 'user_stroke'], defaults.featureColor)
146146
const polygonOutlineColor = () => styleProp(['stroke', 'user_stroke'], defaults.featureOutlineColor)
147147

148-
const strokeWidth = () => styleProp(['user_stroke-width', 'stroke-width'], defaults.lineWidth)
148+
// A route carries more visual weight than a plain line, so it falls back to a wider default.
149+
// KEEP IN SYNC with defaultLineWidth() in defaults.js, which is what the width slider reads.
150+
const lineWidthDefault = () => ['case', hasProp('route'), defaults.routeWidth, defaults.lineWidth]
151+
const strokeWidth = () => styleProp(['user_stroke-width', 'stroke-width'], lineWidthDefault())
149152
const lineWidthMin = () => ['ceil', ['/', ['to-number', strokeWidth()], 2]]
150153
const lineWidthMax = () => ['*', ['to-number', strokeWidth()], 2]
151154
const outlineWidthPolygon = () => ['to-number', styleProp(['user_stroke-width', 'stroke-width'], defaults.polygonOutlineWidth)]

0 commit comments

Comments
 (0)