Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add line-gradient property #6303

Merged
merged 15 commits into from
Apr 9, 2018
+790 −203
Merged

Add line-gradient property #6303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
ca183e3
Add import/no-commonjs lint
jfirebaugh Apr 2, 2018
4315fc8
only index features strictly within tile boundaries
ansis Mar 30, 2018
136bfdc
POC: gradient route line
Jan 27, 2018
64012fc
* Switch from array attributes to per-feature attributes (for the sak…
Feb 9, 2018
2185b9f
* Move color ramp rendering out of style layers
Feb 16, 2018
0dcd353
Don't turn off clipping for gradients (anticipating geojson-vt change…
Feb 27, 2018
4edfe40
Integrate geojson-vt line-metrics
Mar 7, 2018
7b263f3
Remove custom source work
Mar 8, 2018
517ca2e
Cleanups, comments [ci skip]
Mar 8, 2018
75b32d9
Use geojson-vt 3.1.0 release
Mar 29, 2018
c62cec0
lint
Mar 29, 2018
45f8c8a
Use highp float for linesofar to guarantee enough bits on mobile devices
Apr 5, 2018
df4ac6f
Move scaling calculation to vertex shader
Apr 6, 2018
82f219f
Add warning about lineMetrics + line-dasharray to line-dasharray doc …
Apr 6, 2018
ee4ca4e
kick circle
Apr 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
}
],
"global-require": "off",
"import/no-commonjs": "error",
"key-spacing": "off",
"no-eq-null": "off",
"no-lonely-if": "off",
Expand Down
8 changes: 4 additions & 4 deletions build/generate-style-code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@ global.propertyType = function (property) {
return `DataDrivenProperty<${flowType(property)}>`;
} else if (/-pattern$/.test(property.name) || property.name === 'line-dasharray') {
return `CrossFadedProperty<${flowType(property)}>`;
} else if (property.name === 'heatmap-color') {
return `HeatmapColorProperty`;
} else if (property.name === 'heatmap-color' || property.name === 'line-gradient') {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's great that we have a second property with the same semantics as heatmap-color -- that increases the likelihood that heatmap-color is not some odd exception (and as we know, the odd exceptions are disproportionately expensive to maintain).

Since we now have two similarly-behaving properties, it's worth finding a generic way to capture that the style spec and replace the property name comparisons here with the use of a semantic property like isDataDriven uses. Such a property would probably be useful for Studio as well. As a schema design question, it intersects with #4194 -- although in light of this new information, I'm not sure my proposal there is still the best choice. @lbud do you want to think about this and come up with a proposal?

return `ColorRampProperty`;
} else {
return `DataConstantProperty<${flowType(property)}>`;
}
Expand Down Expand Up @@ -95,8 +95,8 @@ global.propertyValue = function (property, type) {
return `new DataDrivenProperty(styleSpec["${type}_${property.layerType}"]["${property.name}"])`;
} else if (/-pattern$/.test(property.name) || property.name === 'line-dasharray') {
return `new CrossFadedProperty(styleSpec["${type}_${property.layerType}"]["${property.name}"])`;
} else if (property.name === 'heatmap-color') {
return `new HeatmapColorProperty(styleSpec["${type}_${property.layerType}"]["${property.name}"])`;
} else if (property.name === 'heatmap-color' || property.name === 'line-gradient') {
return `new ColorRampProperty(styleSpec["${type}_${property.layerType}"]["${property.name}"])`;
} else {
return `new DataConstantProperty(styleSpec["${type}_${property.layerType}"]["${property.name}"])`;
}
Expand Down
78 changes: 78 additions & 0 deletions debug/line-gradient.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html>
<head>
<title>Mapbox GL JS debug page</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel='stylesheet' href='/dist/mapbox-gl.css' />
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
</style>
</head>

<body>
<div id='map'></div>

<script src='/dist/mapbox-gl-dev.js'></script>
<script src='/debug/access_token_generated.js'></script>
<script>

var map = window.map = new mapboxgl.Map({
container: 'map',
zoom: 12.5,
center: [-77.01866, 38.888],
style: 'mapbox://styles/mapbox/light-v9',
hash: true
});

const gj = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {},
"geometry": {
"coordinates": [[-77.044211, 38.852924 ], [-77.045659, 38.860158 ], [-77.044232, 38.862326 ], [-77.040879, 38.865454 ], [-77.039936, 38.867698 ], [-77.040338, 38.86943 ], [-77.04264, 38.872528 ], [-77.03696, 38.878424 ], [-77.032309, 38.87937 ], [-77.030056, 38.880945 ], [-77.027645, 38.881779 ], [-77.026946, 38.882645 ], [-77.026942, 38.885502 ], [-77.028054, 38.887449 ], [-77.02806, 38.892088 ], [-77.03364, 38.892108 ], [-77.033643, 38.899926 ] ],
"type": "LineString"
}
}]
};

map.on('load', () => {
map.showTileBoundaries = true;

map.addSource('line', {
type: 'geojson',
lineMetrics: true,
data: gj
});

map.addLayer({
type: 'line',
source: 'line',
id: 'line',
paint: {
'line-color': 'red',
'line-width': 14,
'line-gradient': [
'interpolate',
['linear'],
['line-progress'],
0, "rgba(0, 0, 255, 0)",
0.1, "royalblue",
0.3, "cyan",
0.5, "lime",
0.7, "yellow",
1, "red"
]
},
layout: {
'line-cap': 'round',
'line-join': 'round'
}
});
});

</script>
</body>
</html>
6 changes: 2 additions & 4 deletions docs/components/expression-metadata.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,8 +208,8 @@ for (const name in CompoundExpression.definitions) {

delete types['error'];

const expressions = {};
const expressionGroups = {};
export const expressions = {};
export const expressionGroups = {};
for (const name in types) {
const spec = ref['expression_name'].values[name];
expressionGroups[spec.group] = expressionGroups[spec.group] || [];
Expand All @@ -228,5 +228,3 @@ function processParameters(params) {
return [{repeat: [toString(params.type)]}];
}
}

module.exports = {expressions, expressionGroups};
4 changes: 2 additions & 2 deletions docs/pages/api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@ import {highlightJavascript} from '../components/prism_highlight.js';
import Quickstart from '../components/quickstart';
import docs from '../components/api.json'; // eslint-disable-line import/no-unresolved
import GithubSlugger from 'github-slugger';
import createFormatters from 'documentation/lib/output/util/formatters';
import LinkerStack from 'documentation/lib/output/util/linker_stack';

const meta = {
title: 'Mapbox GL JS API',
description: '',
pathname: '/api'
};

const createFormatters = require('documentation/lib/output/util/formatters');
const LinkerStack = require('documentation/lib/output/util/linker_stack');

const linkerStack = new LinkerStack({})
.namespaceResolver(docs, (namespace) => {
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/style-spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,7 @@ const navigation = [
const sourceTypes = ['vector', 'raster', 'raster-dem', 'geojson', 'image', 'video'];
const layerTypes = ['background', 'fill', 'line', 'symbol', 'raster', 'circle', 'fill-extrusion', 'heatmap', 'hillshade'];

const {expressions, expressionGroups} = require('../components/expression-metadata');
import {expressions, expressionGroups} from '../components/expression-metadata';

const groupedExpressions = [
'Types',
Expand Down
6 changes: 4 additions & 2 deletions flow-typed/style-spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,8 @@ declare type GeojsonSourceSpecification = {|
"tolerance"?: number,
"cluster"?: boolean,
"clusterRadius"?: number,
"clusterMaxZoom"?: number
"clusterMaxZoom"?: number,
"lineMetrics"?: boolean
|}

declare type VideoSourceSpecification = {|
Expand Down Expand Up @@ -186,7 +187,8 @@ declare type LineLayerSpecification = {|
"line-offset"?: DataDrivenPropertyValueSpecification<number>,
"line-blur"?: DataDrivenPropertyValueSpecification<number>,
"line-dasharray"?: PropertyValueSpecification<Array<number>>,
"line-pattern"?: PropertyValueSpecification<string>
"line-pattern"?: PropertyValueSpecification<string>,
"line-gradient"?: ExpressionSpecification
|}
|}

Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"csscolorparser": "~1.0.2",
"earcut": "^2.1.3",
"geojson-rewind": "^0.3.0",
"geojson-vt": "^3.0.0",
"geojson-vt": "^3.1.0",
"gray-matter": "^3.0.8",
"grid-index": "^1.0.0",
"minimist": "0.0.8",
Expand Down Expand Up @@ -139,7 +139,7 @@
"test-unit": "build/run-tap --reporter classic --no-coverage test/unit",
"test-render": "node --max-old-space-size=2048 test/render.test.js",
"test-query": "node test/query.test.js",
"test-expressions": "node test/expression.test.js",
"test-expressions": "build/run-node test/expression.test.js",
"test-flow": "node build/generate-flow-typed-style-spec && flow .",
"test-flow-cov": "flow-coverage-report -i 'src/**/*.js' -t html",
"test-cov": "nyc --require=@mapbox/flow-remove-types/register --reporter=text-summary --reporter=lcov --cache run-s test-unit test-expressions test-query test-render",
Expand Down
Loading