Skip to content

Commit

Permalink
[WIP] match the casing for the shaft layer (blurriness), hide arrow u…
Browse files Browse the repository at this point in the history 
…nder a certain zoom level (14) and fix arrow size
  • Loading branch information
@Guardiola31337
Guardiola31337 committed Jun 5, 2018
1 parent 00451bc commit e2e9211
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 35 deletions.
87 changes: 56 additions & 31 deletions .../src/main/java/com/mapbox/services/android/navigation/ui/v5/route/NavigationMapRoute.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
import static com.mapbox.mapboxsdk.style.expressions.Expression.linear;
import static com.mapbox.mapboxsdk.style.expressions.Expression.literal;
import static com.mapbox.mapboxsdk.style.expressions.Expression.match;
import static com.mapbox.mapboxsdk.style.expressions.Expression.product;
import static com.mapbox.mapboxsdk.style.expressions.Expression.step;
import static com.mapbox.mapboxsdk.style.expressions.Expression.stop;
import static com.mapbox.mapboxsdk.style.expressions.Expression.zoom;
import static com.mapbox.mapboxsdk.style.layers.Property.ICON_ROTATION_ALIGNMENT_MAP;
Expand Down Expand Up @@ -105,14 +105,23 @@ public class NavigationMapRoute implements ProgressChangeListener, MapView.OnMap
private static final String ARROW_HEAD_ICON = "mapbox-navigation-arrow-head-icon";
private static final String ARROW_HEAD_ICON_CASING = "mapbox-navigation-arrow-head-icon-casing";
private static final int MAX_DEGREES = 360;
private static final float ARROW_SHAFT_CASING_LINE_WIDTH_FACTOR = 8.5f / 5;
private static final float ARROW_SHAFT_LINE_WIDTH_FACTOR = 6.25f / 5;
private static final String ARROW_HEAD_CASING_LAYER_ID = "mapbox-navigation-arrow-head-casing-layer";
private static final float ARROW_HEAD_CASING_SIZE_FACTOR = 1.75f / 5;
private static final Float[] ARROW_HEAD_CASING_OFFSET = {0f, -1f};
private static final Float[] ARROW_HEAD_CASING_OFFSET = {0f, -7f};
private static final String ARROW_HEAD_LAYER_ID = "mapbox-navigation-arrow-head-layer";
private static final float ARROW_HEAD_SIZE_FACTOR = 1.25f / 5;
private static final Float[] ARROW_HEAD_OFFSET = {0f, -1.25f};
private static final Float[] ARROW_HEAD_OFFSET = {0f, -7f};
private static final int MIN_ARROW_ZOOM = 10;
private static final int MAX_ARROW_ZOOM = 22;
private static final float MIN_ZOOM_ARROW_SHAFT_SCALE = 2.6f;
private static final float MAX_ZOOM_ARROW_SHAFT_SCALE = 13.0f;
private static final float MIN_ZOOM_ARROW_SHAFT_CASING_SCALE = 3.4f;
private static final float MAX_ZOOM_ARROW_SHAFT_CASING_SCALE = 17.0f;
private static final float MIN_ZOOM_ARROW_HEAD_SCALE = 0.2f;
private static final float MAX_ZOOM_ARROW_HEAD_SCALE = 0.8f;
private static final float MIN_ZOOM_ARROW_HEAD_CASING_SCALE = 0.2f;
private static final float MAX_ZOOM_ARROW_HEAD_CASING_SCALE = 0.8f;
private static final float OPAQUE = 0.0f;
private static final int ARROW_HIDDEN_ZOOM_LEVEL = 14;
private static final float TRANSPARENT = 1.0f;

@StyleRes
private int styleRes;
Expand Down Expand Up @@ -520,16 +529,20 @@ private LineLayer createArrowShaftLayer() {
PropertyFactory.lineColor(color(arrowColor)),
PropertyFactory.lineWidth(
interpolate(linear(), zoom(),
stop(10, product(ARROW_SHAFT_LINE_WIDTH_FACTOR, 1)),
stop(13, product(ARROW_SHAFT_LINE_WIDTH_FACTOR, 2)),
stop(16, product(ARROW_SHAFT_LINE_WIDTH_FACTOR, 3)),
stop(19, product(ARROW_SHAFT_LINE_WIDTH_FACTOR, 4)),
stop(22, product(ARROW_SHAFT_LINE_WIDTH_FACTOR, 5))
stop(MIN_ARROW_ZOOM, MIN_ZOOM_ARROW_SHAFT_SCALE),
stop(MAX_ARROW_ZOOM, MAX_ZOOM_ARROW_SHAFT_SCALE)
)
),
PropertyFactory.lineCap(Property.LINE_CAP_ROUND),
PropertyFactory.lineJoin(Property.LINE_JOIN_ROUND),
PropertyFactory.visibility(NONE)
PropertyFactory.visibility(NONE),
PropertyFactory.lineOpacity(
step(zoom(), OPAQUE,
stop(
ARROW_HIDDEN_ZOOM_LEVEL, TRANSPARENT
)
)
)
);
}

Expand All @@ -538,16 +551,20 @@ private LineLayer createArrowShaftCasingLayer() {
PropertyFactory.lineColor(color(arrowBorderColor)),
PropertyFactory.lineWidth(
interpolate(linear(), zoom(),
stop(10, product(ARROW_SHAFT_CASING_LINE_WIDTH_FACTOR, 1)),
stop(13, product(ARROW_SHAFT_CASING_LINE_WIDTH_FACTOR, 2)),
stop(16, product(ARROW_SHAFT_CASING_LINE_WIDTH_FACTOR, 3)),
stop(19, product(ARROW_SHAFT_CASING_LINE_WIDTH_FACTOR, 4)),
stop(22, product(ARROW_SHAFT_CASING_LINE_WIDTH_FACTOR, 5))
stop(MIN_ARROW_ZOOM, MIN_ZOOM_ARROW_SHAFT_CASING_SCALE),
stop(MAX_ARROW_ZOOM, MAX_ZOOM_ARROW_SHAFT_CASING_SCALE)
)
),
PropertyFactory.lineCap(Property.LINE_CAP_ROUND),
PropertyFactory.lineJoin(Property.LINE_JOIN_ROUND),
PropertyFactory.visibility(NONE)
PropertyFactory.visibility(NONE),
PropertyFactory.lineOpacity(
step(zoom(), OPAQUE,
stop(
ARROW_HIDDEN_ZOOM_LEVEL, TRANSPARENT
)
)
)
);
}

Expand All @@ -558,17 +575,21 @@ private SymbolLayer createArrowHeadLayer() {
iconAllowOverlap(true),
iconIgnorePlacement(true),
PropertyFactory.iconSize(interpolate(linear(), zoom(),
stop(10, product(ARROW_HEAD_SIZE_FACTOR, 1)),
stop(13, product(ARROW_HEAD_SIZE_FACTOR, 2)),
stop(16, product(ARROW_HEAD_SIZE_FACTOR, 3)),
stop(19, product(ARROW_HEAD_SIZE_FACTOR, 4)),
stop(22, product(ARROW_HEAD_SIZE_FACTOR, 5))
stop(MIN_ARROW_ZOOM, MIN_ZOOM_ARROW_HEAD_SCALE),
stop(MAX_ARROW_ZOOM, MAX_ZOOM_ARROW_HEAD_SCALE)
)
),
PropertyFactory.iconOffset(ARROW_HEAD_OFFSET),
PropertyFactory.iconRotationAlignment(ICON_ROTATION_ALIGNMENT_MAP),
PropertyFactory.iconRotate(get(ARROW_BEARING)),
PropertyFactory.visibility(NONE)
PropertyFactory.visibility(NONE),
PropertyFactory.iconOpacity(
step(zoom(), OPAQUE,
stop(
ARROW_HIDDEN_ZOOM_LEVEL, TRANSPARENT
)
)
)
);
}

Expand All @@ -579,16 +600,20 @@ private SymbolLayer createArrowHeadCasingLayer() {
iconIgnorePlacement(true),
PropertyFactory.iconSize(interpolate(
linear(), zoom(),
stop(10, product(ARROW_HEAD_CASING_SIZE_FACTOR, 1)),
stop(13, product(ARROW_HEAD_CASING_SIZE_FACTOR, 2)),
stop(16, product(ARROW_HEAD_CASING_SIZE_FACTOR, 3)),
stop(19, product(ARROW_HEAD_CASING_SIZE_FACTOR, 4)),
stop(22, product(ARROW_HEAD_CASING_SIZE_FACTOR, 5))
stop(MIN_ARROW_ZOOM, MIN_ZOOM_ARROW_HEAD_CASING_SCALE),
stop(MAX_ARROW_ZOOM, MAX_ZOOM_ARROW_HEAD_CASING_SCALE)
)),
PropertyFactory.iconOffset(ARROW_HEAD_CASING_OFFSET),
PropertyFactory.iconRotationAlignment(ICON_ROTATION_ALIGNMENT_MAP),
PropertyFactory.iconRotate(get(ARROW_BEARING)),
PropertyFactory.visibility(NONE)
PropertyFactory.visibility(NONE),
PropertyFactory.iconOpacity(
step(zoom(), OPAQUE,
stop(
ARROW_HIDDEN_ZOOM_LEVEL, TRANSPARENT
)
)
)
);
}

Expand Down
4 changes: 2 additions & 2 deletions libandroid-navigation-ui/src/main/res/drawable/ic_arrow_head.xml
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:width="72dp"
android:height="72dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
Expand Down
4 changes: 2 additions & 2 deletions libandroid-navigation-ui/src/main/res/drawable/ic_arrow_head_casing.xml
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:width="96dp"
android:height="96dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
Expand Down

0 comments on commit e2e9211

Please sign in to comment.