Symbol Layer Icons become hidden with textfield

[asifjavaid]

Hi,

We are using SymbolLayer Infow Window code from the following url:

https://github.com/mapbox/mapbox-android-demo/blob/master/MapboxAndroidDemo/src/main/java/com/mapbox/mapboxandroiddemo/examples/dds/InfoWindowSymbolLayerActivity.java

We have noticed that if we placed the symbols/ markers without TextField then the mapbox display more icons on the screen. For example if have we total 10 icons then on a specific zoom level without textfield, we can see 5 to 6 six icons. But with a textField the mapbox show only 2 to 3 icons, means it shows less icons. While we zoom in the map, then rest of the icons also displayed. Why the icons become hidden at the same zoom level? As we zoom out the map, the icons going to disappear, and shown again as we zoom in.

Any idea. Please see the following code.

if (isMarkerNameShowing) {
                    style.addLayer(new SymbolLayer(MARKER_LAYER_ID, GEOJSON_SOURCE_ID)
                            .withProperties(
                                    iconImage("{markercolor}"),
                                    PropertyFactory.textField("{name}"),
                                    PropertyFactory.textColor(Color.RED),
                                    PropertyFactory.textOffset(new Float[]{0f, 1f}),
                                    PropertyFactory.iconIgnorePlacement(true),
                                    iconAllowOverlap(false),
                                    iconOffset(new Float[]{0f, -8f})
                            ));
                } else {
                    style.addLayer(new SymbolLayer(MARKER_LAYER_ID, GEOJSON_SOURCE_ID)
                            .withProperties(
                                    iconImage("{markercolor}"),
                                    PropertyFactory.iconIgnorePlacement(true),
                                    iconAllowOverlap(false),
                                    iconOffset(new Float[]{0f, -8f})
                            ));
                }

Thank you.

[LukasPaczos]

Hey @asifjavaid, you're setting iconAllowOverlap to false, which means that if the icon collides with any other symbol (text fields are also symbols) one of them is going to be hidden.

Adding additional text fields increases the density of the symbols which means that more symbols are going to collide.

You can look into setting iconAllowOverlap or textAllowOverlap to true. Let us know if you were able to reach the desired state!

[langsmith]

@asifjavaid,

https://docs.mapbox.com/android/maps/examples/symbol-collision-detection allows you to play with the settings that @LukasPaczos describes above.

[asifjavaid]

Awesome. Thank you. It worked.

[mortezahosseinee]

Hi, i wrote these lines of code based on mapbox-android-plugin-annotation-v8:0.7.0' tutorial:

private void addSymbolToMap() {
        mapStyle.addImage("sample_image_id", getResources().getDrawable(R.drawable.mapbox_marker_icon_default));

        // create symbol manager object
        SymbolManager sampleSymbolManager = new SymbolManager(mapView, map, mapStyle);

        // set non-data-driven properties, such as:
        sampleSymbolManager.setIconAllowOverlap(true);
        sampleSymbolManager.setIconRotationAlignment(ICON_ROTATION_ALIGNMENT_VIEWPORT);

        // Add symbol at specified lat/lon
        SymbolOptions sampleSymbolOptions = new SymbolOptions()
                .withLatLng(samplePoint)
                .withIconImage("sample_image_id")
                .withIconSize(1f);

        // save created Symbol Object for later access
        Symbol sampleSymbol = sampleSymbolManager.create(sampleSymbolOptions);
    }

then, i saw my icon in defined latLng, but after i add this line of code: withTextField("my text"), symbol icon disappears and not see any text on map. help me.
result code after add that line of code:

private void addSymbolToMap() {
        mapStyle.addImage("sample_image_id", getResources().getDrawable(R.drawable.mapbox_marker_icon_default));

        // create symbol manager object
        SymbolManager sampleSymbolManager = new SymbolManager(mapView, map, mapStyle);

        // set non-data-driven properties, such as:
        sampleSymbolManager.setIconAllowOverlap(true);
        sampleSymbolManager.setIconRotationAlignment(ICON_ROTATION_ALIGNMENT_VIEWPORT);

        // Add symbol at specified lat/lon
        SymbolOptions sampleSymbolOptions = new SymbolOptions()
                .withLatLng(samplePoint)
                .withIconImage("sample_image_id")
                .withIconSize(1f)
                .withTextField("hi you");

        // save created Symbol Object for later access
        Symbol sampleSymbol = sampleSymbolManager.create(sampleSymbolOptions);
    }

[langsmith]

Hi @mortezahosseinee , thanks for using Mapbox. For Mapbox implementation questions, please contact the Mapbox support team via https://support.mapbox.com/hc/en-us/requests/new?ticket_form_id=360000291231.

[yummmyz]

Hi, i wrote these lines of code based on mapbox-android-plugin-annotation-v8:0.7.0' tutorial:

private void addSymbolToMap() {
        mapStyle.addImage("sample_image_id", getResources().getDrawable(R.drawable.mapbox_marker_icon_default));

        // create symbol manager object
        SymbolManager sampleSymbolManager = new SymbolManager(mapView, map, mapStyle);

        // set non-data-driven properties, such as:
        sampleSymbolManager.setIconAllowOverlap(true);
        sampleSymbolManager.setIconRotationAlignment(ICON_ROTATION_ALIGNMENT_VIEWPORT);

        // Add symbol at specified lat/lon
        SymbolOptions sampleSymbolOptions = new SymbolOptions()
                .withLatLng(samplePoint)
                .withIconImage("sample_image_id")
                .withIconSize(1f);

        // save created Symbol Object for later access
        Symbol sampleSymbol = sampleSymbolManager.create(sampleSymbolOptions);
    }

then, i saw my icon in defined latLng, but after i add this line of code: withTextField("my text"), symbol icon disappears and not see any text on map. help me.
result code after add that line of code:

private void addSymbolToMap() {
        mapStyle.addImage("sample_image_id", getResources().getDrawable(R.drawable.mapbox_marker_icon_default));

        // create symbol manager object
        SymbolManager sampleSymbolManager = new SymbolManager(mapView, map, mapStyle);

        // set non-data-driven properties, such as:
        sampleSymbolManager.setIconAllowOverlap(true);
        sampleSymbolManager.setIconRotationAlignment(ICON_ROTATION_ALIGNMENT_VIEWPORT);

        // Add symbol at specified lat/lon
        SymbolOptions sampleSymbolOptions = new SymbolOptions()
                .withLatLng(samplePoint)
                .withIconImage("sample_image_id")
                .withIconSize(1f)
                .withTextField("hi you");

        // save created Symbol Object for later access
        Symbol sampleSymbol = sampleSymbolManager.create(sampleSymbolOptions);
    }

Hi，I have the same problem.Have you solved this？

[yummmyz]

@mortezahosseinee @langsmith ,Hi，I have the same problem.Have you solved this:#1238 (comment)

[mortezahosseinee]

Hi, yes i solved my problem.
i set textFont Property and done!!! i have my customize style, so my map had not access to any font unless one font in font-stack so i set it and see text as i expect. so you can check it. if this approach solve your problem, like response, thank you.

@yummmyz

[AzadehY-Dev]

Hi, i wrote these lines of code based on mapbox-android-plugin-annotation-v8:0.7.0' tutorial:

private void addSymbolToMap() {
        mapStyle.addImage("sample_image_id", getResources().getDrawable(R.drawable.mapbox_marker_icon_default));

        // create symbol manager object
        SymbolManager sampleSymbolManager = new SymbolManager(mapView, map, mapStyle);

        // set non-data-driven properties, such as:
        sampleSymbolManager.setIconAllowOverlap(true);
        sampleSymbolManager.setIconRotationAlignment(ICON_ROTATION_ALIGNMENT_VIEWPORT);

        // Add symbol at specified lat/lon
        SymbolOptions sampleSymbolOptions = new SymbolOptions()
                .withLatLng(samplePoint)
                .withIconImage("sample_image_id")
                .withIconSize(1f);

        // save created Symbol Object for later access
        Symbol sampleSymbol = sampleSymbolManager.create(sampleSymbolOptions);
    }

then, i saw my icon in defined latLng, but after i add this line of code: withTextField("my text"), symbol icon disappears and not see any text on map. help me.
result code after add that line of code:

private void addSymbolToMap() {
        mapStyle.addImage("sample_image_id", getResources().getDrawable(R.drawable.mapbox_marker_icon_default));

        // create symbol manager object
        SymbolManager sampleSymbolManager = new SymbolManager(mapView, map, mapStyle);

        // set non-data-driven properties, such as:
        sampleSymbolManager.setIconAllowOverlap(true);
        sampleSymbolManager.setIconRotationAlignment(ICON_ROTATION_ALIGNMENT_VIEWPORT);

        // Add symbol at specified lat/lon
        SymbolOptions sampleSymbolOptions = new SymbolOptions()
                .withLatLng(samplePoint)
                .withIconImage("sample_image_id")
                .withIconSize(1f)
                .withTextField("hi you");

        // save created Symbol Object for later access
        Symbol sampleSymbol = sampleSymbolManager.create(sampleSymbolOptions);
    }

thanks for your help. i add text font but it didnt work for me. would you share your correct code?

[mortezahosseinee]

Hi, as i said before, you need to set text font with any font in font-stack, so if you use main mapbox-sdk, you can add some font from mapbox style, something like this.

private void addSymbolToMap() {
mapStyle.addImage("sample_image_id", getResources().getDrawable(R.drawable.mapbox_marker_icon_default));

    // create symbol manager object
    SymbolManager sampleSymbolManager = new SymbolManager(mapView, map, mapStyle);

    // set non-data-driven properties, such as:
    sampleSymbolManager.setIconAllowOverlap(true);
    sampleSymbolManager.setIconRotationAlignment(ICON_ROTATION_ALIGNMENT_VIEWPORT);

    // Add symbol at specified lat/lon
    SymbolOptions sampleSymbolOptions = new SymbolOptions()
            .withLatLng(samplePoint)
            .withIconImage("sample_image_id")
            .withIconSize(1f)
            .withTextField("hi you")
            .withTextFont(new String[] {"Ubuntu Medium", "Arial Unicode MS Regular"});

    // save created Symbol Object for later access
    Symbol sampleSymbol = sampleSymbolManager.create(sampleSymbolOptions);

}

// mapbox sdk checks font array one by one, if reaches any accessible font, take it, so we can set any sequence of defined fonts from font-stack. feel free to tell me if you can't see text on map. like me if you see expected result.

@azadeh18

[AzadehY-Dev]

@mortezahosseinee
thanks dear Morteza, i used your exact code but unfortunately it doesn't work for me :(
i should mention that i am using map.ir sdk for map.

[mortezahosseinee]

@mortezahosseinee
thanks dear Morteza, i used your exact code but unfortunately it doesn't work for me :(
i should mention that i am using map.ir sdk for map.

If you like, share your complete code(Activity or fragment) even your project: M.Hosseini@map.ir

[Cloud9Clone]

Hey Morteza, I'm also getting issues with the Symbol.

I basically display a Line of LatLngs over the time and after I'm done updating the Line I put a start and an end icon on the map. The start icon appear above the Line, but the end icon appears under the Line. Here's the code:

`symbolManager = new SymbolManager(mapView, mMapboxMap, style);

symbolManager.setIconAllowOverlap(true);
symbolManager.setIconIgnorePlacement(true);

SymbolOptions symbolOptionsFinishFlag = new SymbolOptions()
.withIconImage(IMAGE_FINISH_FLAG)
.withIconSize(2.0f)
.withLatLng(newLatLngs.get(newLatLngs.size()-1));

symbolManager.create(symbolOptionsStartFlag); //The start Flag
symbolManager.create(symbolOptionsFinishFlag); //The finish Flag

LatLngBounds.Builder builder = new LatLngBounds.Builder();
builder.includes(newLatLngs);
LatLngBounds bounds = builder.build();

final CameraUpdate cu = new CameraUpdateFactory().newLatLngBounds(bounds,300);
mMapboxMap.easeCamera(cu,5000);`

symbolOptionsStartFlag are already defined in another place and just referenced here. However, the start symbol get displayed correct, but the end one is under the Line.

Any suggestions, where the issues might be?

[vtmaps]

@azadeh18
You must use font: .withTextFont(new String[] {"Open Sans Bold", "Arial Unicode MS Bold"}
ex:
SymbolOptions sampleSymbolOptions = new SymbolOptions()
.withLatLng(new LatLng(16.04791610056455,108.21643351855755 ))
.withIconImage("icon")
.withIconSize(1f)
.withTextField("hi you")
.withTextSize(16f)
.withIconOffset(new Float[] {0f, -20f})
.withTextFont(new String[] {"Open Sans Bold", "Arial Unicode MS Bold"});