diff --git a/android/engine/src/main/res/drawable/base_icon.png b/android/engine/src/main/res/drawable/base_icon.png new file mode 100644 index 0000000000..0571cec4d8 Binary files /dev/null and b/android/engine/src/main/res/drawable/base_icon.png differ diff --git a/android/geowidget/src/main/java/org/smartregister/fhircore/geowidget/screens/GeoWidgetFragment.kt b/android/geowidget/src/main/java/org/smartregister/fhircore/geowidget/screens/GeoWidgetFragment.kt index 95cef25e88..7626cdc7fb 100644 --- a/android/geowidget/src/main/java/org/smartregister/fhircore/geowidget/screens/GeoWidgetFragment.kt +++ b/android/geowidget/src/main/java/org/smartregister/fhircore/geowidget/screens/GeoWidgetFragment.kt @@ -22,6 +22,7 @@ import android.view.LayoutInflater import android.view.View import android.view.ViewGroup import android.widget.LinearLayout +import androidx.core.content.ContextCompat import androidx.core.content.res.ResourcesCompat import androidx.fragment.app.Fragment import androidx.fragment.app.FragmentManager @@ -179,6 +180,8 @@ class GeoWidgetFragment : Fragment() { } private fun addIconsLayer(mMapboxMapStyle: Style) { + addIconBaseImage(mMapboxMapStyle) + val dynamicIconSize = Expression.interpolate( Expression.linear(), @@ -193,10 +196,18 @@ class GeoWidgetFragment : Fragment() { val icon: Bitmap? = ResourceUtils.drawableToBitmap( ResourcesCompat.getDrawable( - resources, - servicePointType.drawableId, - requireContext().theme, - )!!, + resources, + servicePointType.drawableId, + requireContext().theme, + )!! + .apply { + setTint( + ContextCompat.getColor( + requireContext(), + org.smartregister.fhircore.engine.R.color.white, + ), + ) + }, ) icon?.let { mMapboxMapStyle.addImage(key, icon) @@ -209,7 +220,8 @@ class GeoWidgetFragment : Fragment() { PropertyFactory.iconImage(key), PropertyFactory.iconSize(dynamicIconSize), PropertyFactory.iconIgnorePlacement(false), - PropertyFactory.iconAllowOverlap(false), + PropertyFactory.iconAllowOverlap(true), + PropertyFactory.symbolSortKey(2f), ) symbolLayer.setFilter( Expression.eq( @@ -222,6 +234,43 @@ class GeoWidgetFragment : Fragment() { } } + private fun addIconBaseImage(mMapboxMapStyle: Style) { + val baseIcon: Bitmap? = + ResourceUtils.drawableToBitmap( + ResourcesCompat.getDrawable( + resources, + org.smartregister.fhircore.engine.R.drawable.base_icon, + requireContext().theme, + )!!, + ) + + baseIcon?.let { + val dynamicBaseIconSize = + Expression.interpolate( + Expression.linear(), + Expression.zoom(), + Expression.literal(0.7f), + Expression.literal(0.67f), + ) + + val baseKey = "base-image" + mMapboxMapStyle.addImage(baseKey, it) + val symbolLayer = + SymbolLayer( + String.format("%s.layer", baseKey), + getString(R.string.data_set_quest), + ) + symbolLayer.setProperties( + PropertyFactory.iconImage(baseKey), + PropertyFactory.iconSize(dynamicBaseIconSize), + PropertyFactory.iconAllowOverlap(true), + PropertyFactory.symbolSortKey(1f), + PropertyFactory.iconOffset(arrayOf(0f, 8.5f)), + ) + mMapboxMapStyle.addLayerBelow(symbolLayer, getString(R.string.quest_data_points)) + } + } + private fun KujakuMapView.addMapStyle(style: Style) { val baseLayerSwitcherPlugin = BaseLayerSwitcherPlugin(this, style) diff --git a/android/geowidget/src/main/res/values/strings.xml b/android/geowidget/src/main/res/values/strings.xml index b32a728eb8..26b969e8e6 100644 --- a/android/geowidget/src/main/res/values/strings.xml +++ b/android/geowidget/src/main/res/values/strings.xml @@ -2,4 +2,5 @@ asset://fhircore_style.json quest-data-set + quest-data-points diff --git a/android/quest/src/main/assets/fhircore_style.json b/android/quest/src/main/assets/fhircore_style.json index 405609210b..a0bee993ff 100644 --- a/android/quest/src/main/assets/fhircore_style.json +++ b/android/quest/src/main/assets/fhircore_style.json @@ -12405,18 +12405,17 @@ [ "in_progress" ], - "hsl(45.1,62.5%,50.8%)", + "hsl(32, 88%, 44%)", [ "finished" ], - "hsl(101.6,66.8%,44.9%)", + "hsl(119, 74%, 40%)", [ "not_started" ], - "hsl(0, 0%, 64%)", + "hsl(0, 0%, 56%)", "hsl(100, 100%, 100%)" ], - "circle-stroke-width": 2, "circle-opacity": 1 } },