Skip to content
This repository has been archived by the owner on Oct 7, 2024. It is now read-only.

Refactoring and splitting basic SymbolLayer icon examples #1030

Merged
merged 2 commits into from
May 14, 2019
Merged

Refactoring and splitting basic SymbolLayer icon examples #1030

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b9402a6
initial changes refactoring the basic symbol and moving icon change e…
langsmith Apr 12, 2019
4d4e13a
adding animation cancel in onDestroy
langsmith May 13, 2019
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
9 changes: 9 additions & 0 deletions MapboxAndroidDemo/src/global/java/com/mapbox/mapboxandroiddemo/MainActivity.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@
import com.mapbox.mapboxandroiddemo.examples.styles.DefaultStyleActivity;
import com.mapbox.mapboxandroiddemo.examples.styles.GeojsonLayerInStackActivity;
import com.mapbox.mapboxandroiddemo.examples.styles.HillShadeActivity;
import com.mapbox.mapboxandroiddemo.examples.styles.IconSizeChangeOnClickActivity;
import com.mapbox.mapboxandroiddemo.examples.styles.ImageSourceActivity;
import com.mapbox.mapboxandroiddemo.examples.styles.ImageSourceTimeLapseActivity;
import com.mapbox.mapboxandroiddemo.examples.styles.LanguageSwitchActivity;
Expand Down Expand Up @@ -467,6 +468,14 @@ private void initializeModels() {
null,
R.string.activity_styles_symbol_layer_url, false, BuildConfig.MIN_SDK_VERSION));

exampleItemModels.add(new ExampleItemModel(
R.id.nav_styles,
R.string.activity_styles_symbol_icon_onclick_size_change_title,
R.string.activity_styles_symbol_icon_onclick_size_change_description,
new Intent(MainActivity.this, IconSizeChangeOnClickActivity.class),
null,
R.string.activity_styles_symbol_icon_onclick_size_change_url, false, BuildConfig.MIN_SDK_VERSION));

exampleItemModels.add(new ExampleItemModel(
R.id.nav_styles,
R.string.activity_styles_line_layer_title,
Expand Down
7 changes: 7 additions & 0 deletions MapboxAndroidDemo/src/main/AndroidManifest.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -487,6 +487,13 @@
android:name="android.support.PARENT_ACTIVITY"
android:value="com.mapbox.mapboxandroiddemo.MainActivity" />
</activity>
<activity
android:name=".examples.styles.IconSizeChangeOnClickActivity"
android:label="@string/activity_styles_symbol_icon_onclick_size_change_title">
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value="com.mapbox.mapboxandroiddemo.MainActivity" />
</activity>
<activity
android:name=".examples.styles.ImageSourceActivity"
android:label="@string/activity_style_image_source_title">
Expand Down
158 changes: 39 additions & 119 deletions .../src/main/java/com/mapbox/mapboxandroiddemo/examples/styles/BasicSymbolLayerActivity.java
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
package com.mapbox.mapboxandroiddemo.examples.styles;

import android.animation.ValueAnimator;
import android.graphics.BitmapFactory;
import android.graphics.PointF;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
Expand All @@ -12,7 +10,6 @@
import com.mapbox.geojson.Point;
import com.mapbox.mapboxandroiddemo.R;
import com.mapbox.mapboxsdk.Mapbox;
import com.mapbox.mapboxsdk.geometry.LatLng;
import com.mapbox.mapboxsdk.maps.MapView;
import com.mapbox.mapboxsdk.maps.MapboxMap;
import com.mapbox.mapboxsdk.maps.OnMapReadyCallback;
Expand All @@ -24,17 +21,19 @@
import java.util.ArrayList;
import java.util.List;

import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.iconAllowOverlap;
import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.iconOffset;

/**
* Display markers on the map by adding a symbol layer
* Display {@link SymbolLayer} icons on the map.
*/
public class BasicSymbolLayerActivity extends AppCompatActivity implements
OnMapReadyCallback, MapboxMap.OnMapClickListener {
OnMapReadyCallback {

private static final String SOURCE_ID = "SOURCE_ID";
private static final String ICON_ID = "ICON_ID";
private static final String LAYER_ID = "LAYER_ID";
private MapView mapView;
private MapboxMap mapboxMap;
private boolean markerSelected = false;

@Override
protected void onCreate(Bundle savedInstanceState) {
Expand All @@ -45,7 +44,7 @@ protected void onCreate(Bundle savedInstanceState) {
Mapbox.getInstance(this, getString(R.string.access_token));

// This contains the MapView in XML and needs to be called after the access token is configured.
setContentView(R.layout.activity_basic_symbol_layer);
setContentView(R.layout.activity_style_basic_symbol_layer);

mapView = findViewById(R.id.mapView);
mapView.onCreate(savedInstanceState);
Expand All @@ -55,117 +54,41 @@ protected void onCreate(Bundle savedInstanceState) {
@Override
public void onMapReady(@NonNull final MapboxMap mapboxMap) {

this.mapboxMap = mapboxMap;

mapboxMap.setStyle(Style.DARK, new Style.OnStyleLoaded() {
@Override
public void onStyleLoaded(@NonNull Style style) {
List<Feature> markerCoordinates = new ArrayList<>();
markerCoordinates.add(Feature.fromGeometry(
Point.fromLngLat(-71.065634, 42.354950))); // Boston Common Park
markerCoordinates.add(Feature.fromGeometry(
Point.fromLngLat(-71.097293, 42.346645))); // Fenway Park
markerCoordinates.add(Feature.fromGeometry(
Point.fromLngLat(-71.053694, 42.363725))); // The Paul Revere House

style.addSource(new GeoJsonSource("marker-source",
FeatureCollection.fromFeatures(markerCoordinates)));

// Add the marker image to map
style.addImage("my-marker-image", BitmapFactory.decodeResource(
BasicSymbolLayerActivity.this.getResources(), R.drawable.blue_marker_view));

// Adding an offset so that the bottom of the blue icon gets fixed to the coordinate, rather than the
// middle of the icon being fixed to the coordinate point.
style.addLayer(new SymbolLayer("marker-layer", "marker-source")
.withProperties(PropertyFactory.iconImage("my-marker-image"),
iconOffset(new Float[]{0f, -9f})));

// Add the selected marker source and layer
style.addSource(new GeoJsonSource("selected-marker"));

// Adding an offset so that the bottom of the blue icon gets fixed to the coordinate, rather than the
// middle of the icon being fixed to the coordinate point.
style.addLayer(new SymbolLayer("selected-marker-layer", "selected-marker")
.withProperties(PropertyFactory.iconImage("my-marker-image"),
iconOffset(new Float[]{0f, -9f})));

mapboxMap.addOnMapClickListener(BasicSymbolLayerActivity.this);
}
});
}
List<Feature> symbolLayerIconFeatureList = new ArrayList<>();
symbolLayerIconFeatureList.add(Feature.fromGeometry(
Point.fromLngLat(-57.225365, -33.213144)));
symbolLayerIconFeatureList.add(Feature.fromGeometry(
Point.fromLngLat(-54.14164, -33.981818)));
symbolLayerIconFeatureList.add(Feature.fromGeometry(
Point.fromLngLat(-56.990533, -30.583266)));

@Override
public boolean onMapClick(@NonNull LatLng point) {
Style style = mapboxMap.getStyle();
if (style != null) {
final SymbolLayer selectedMarkerSymbolLayer =
(SymbolLayer) style.getLayer("selected-marker-layer");

final PointF pixel = mapboxMap.getProjection().toScreenLocation(point);
List<Feature> features = mapboxMap.queryRenderedFeatures(pixel, "marker-layer");
List<Feature> selectedFeature = mapboxMap.queryRenderedFeatures(
pixel, "selected-marker-layer");

if (selectedFeature.size() > 0 && markerSelected) {
return false;
}

if (features.isEmpty()) {
if (markerSelected) {
deselectMarker(selectedMarkerSymbolLayer);
}
return false;
}

GeoJsonSource source = style.getSourceAs("selected-marker");
if (source != null) {
source.setGeoJson(FeatureCollection.fromFeatures(
new Feature[]{Feature.fromGeometry(features.get(0).geometry())}));
}

if (markerSelected) {
deselectMarker(selectedMarkerSymbolLayer);
}
if (features.size() > 0) {
selectMarker(selectedMarkerSymbolLayer);
}
}
return true;
}
mapboxMap.setStyle(new Style.Builder().fromUrl("mapbox://styles/mapbox/cjf4m44iw0uza2spb3q0a7s41")
Copy link
Member

Choose a reason for hiding this comment

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

could you add some context why we are using this specific style?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Using a style that isn't found in Style class to just shake things up a little.

Screen Shot 2019-05-13 at 1 02 59 PM


private void selectMarker(final SymbolLayer iconLayer) {
ValueAnimator markerAnimator = new ValueAnimator();
markerAnimator.setObjectValues(1f, 2f);
markerAnimator.setDuration(300);
markerAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override
public void onAnimationUpdate(ValueAnimator animator) {
iconLayer.setProperties(
PropertyFactory.iconSize((float) animator.getAnimatedValue())
);
}
});
markerAnimator.start();
markerSelected = true;
}
// Add the SymbolLayer icon image to the map style
.withImage(ICON_ID, BitmapFactory.decodeResource(
BasicSymbolLayerActivity.this.getResources(), R.drawable.red_marker))

private void deselectMarker(final SymbolLayer iconLayer) {
ValueAnimator markerAnimator = new ValueAnimator();
markerAnimator.setObjectValues(2f, 1f);
markerAnimator.setDuration(300);
markerAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override
public void onAnimationUpdate(ValueAnimator animator) {
iconLayer.setProperties(
PropertyFactory.iconSize((float) animator.getAnimatedValue())
);
}
});
markerAnimator.start();
markerSelected = false;
// Adding a GeoJson source for the SymbolLayer icons.
.withSource(new GeoJsonSource(SOURCE_ID,
FeatureCollection.fromFeatures(symbolLayerIconFeatureList)))

// Adding the actual SymbolLayer to the map style. An offset is added that the bottom of the red
// marker icon gets fixed to the coordinate, rather than the middle of the icon being fixed to
// the coordinate point. This is offset is not always needed and is dependent on the image
// that you use for the SymbolLayer icon.
.withLayer(new SymbolLayer(LAYER_ID, SOURCE_ID)
.withProperties(PropertyFactory.iconImage(ICON_ID),
iconAllowOverlap(true),
iconOffset(new Float[] {0f, -9f}))
), new Style.OnStyleLoaded() {
@Override
public void onStyleLoaded(@NonNull Style style) {

// Map is set up and the style has loaded. Now you can add additional data or make other map adjustments.


}
});
}

@Override
Expand Down Expand Up @@ -201,9 +124,6 @@ public void onLowMemory() {
@Override
protected void onDestroy() {
super.onDestroy();
if (mapboxMap != null) {
mapboxMap.removeOnMapClickListener(this);
}
mapView.onDestroy();
}

Expand Down
Loading