Update map icons style (#3420)

* Update icons style * code refactor * code refactor 2 * Update status fill colors --------- Co-authored-by: Benjamin Mwalimu <[email protected]>
opensrp · Aug 2, 2024 · 501420e · 501420e
1 parent 38bf5b4
commit 501420e
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 9 deletions.
diff --git a/android/engine/src/main/res/drawable/base_icon.png b/android/engine/src/main/res/drawable/base_icon.png
diff --git a/...geowidget/src/main/java/org/smartregister/fhircore/geowidget/screens/GeoWidgetFragment.kt b/...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
@@ -2,4 +2,5 @@
 <resources>
     <string name="style_map_fhir_core">asset://fhircore_style.json</string>
     <string name="data_set_quest">quest-data-set</string>
+    <string name="quest_data_points">quest-data-points</string>
 </resources>
diff --git 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
       }
     },