How to create Info Window on OSM Maps?

Question

How to create Info Window on OSM Maps?

I am new in android OSM, i want to create custom marker, i dont find any relevant reference code, plz share me any ref link or code sample.

Info window displays text or images in a popup window above the map.

Answer 1

Dependency:

   // open street map
    implementation 'org.osmdroid:osmdroid-android:6.1.10'

Map Fragment: OSM map

class HomeFragment : Fragment() {
    private var binding: FragmentHomeBinding? = null
    //private lateinit var homeViewModel: HomeViewModel

    override fun onCreateView(
            inflater: LayoutInflater,
            container: ViewGroup?,
            savedInstanceState: Bundle?
    ): View {
        binding = FragmentHomeBinding.inflate(inflater)



        // OSM
        Configuration.getInstance().userAgentValue = BuildConfig.APPLICATION_ID

        binding!!.mapview.apply {
            // osm map
            setTileSource(TileSourceFactory.DEFAULT_TILE_SOURCE)
            setBuiltInZoomControls(false)  //https://stackoverflow.com/questions/67184020/what-do-i-use-now-that-osm-setbuiltinzoomcontrols-is-deprecated
            setMultiTouchControls(true)
            val mapController: IMapController = controller
            mapController.setZoom(10.0)
            val zoomLocation = GeoPoint(38.2352328, -85.7602859)
            mapController.setCenter(zoomLocation)

            // map marker
            val startMarker = Marker(this)
            startMarker.position = zoomLocation // marker location
            startMarker.icon =ContextCompat.getDrawable(requireContext(), R.drawable.test_marker)
            startMarker.setAnchor(Marker.ANCHOR_CENTER, 1.0f)
            val infoWindow: InfoWindow = MyInfoWindow(R.layout.map_infobubble_black, binding!!.mapview)
            startMarker.infoWindow = infoWindow
            binding!!.mapview.overlays.add(startMarker)
            //startMarker.title = "Title of the marker"

            startMarker.setOnMarkerClickListener { marker, mapView ->
                marker.showInfoWindow()
                //mapView.controller.animateTo(marker.position)
                Toast.makeText(context, "on click to show info box", Toast.LENGTH_LONG).show()
                true
            }


            // polyline
            val gPt0 = GeoPoint(38.2352328, -85.7602859)
            val gPt1 = GeoPoint(38.2350183, -85.7603073)
            val gPt2 = GeoPoint(38.2348895, -85.7586551)
            val gPt3 = GeoPoint(38.2348037, -85.757850)
            val gPt4 = GeoPoint(38.2347286, -85.757035)
            val line = Polyline(this)
            line.addPoint(gPt0)
            line.addPoint(gPt1)
            line.addPoint(gPt2)
            line.addPoint(gPt3)
            line.addPoint(gPt4)

            overlays.add(line)

            line.setOnClickListener { polyline, mapView, eventPos ->
                Toast.makeText(context, "on click", Toast.LENGTH_LONG).show()
                true
            }

        }











        /*homeViewModel =
                ViewModelProvider(this).get(HomeViewModel::class.java)
        val root = inflater.inflate(R.layout.fragment_home, container, false)
        val textView: TextView = root.findViewById(R.id.text_home)
        homeViewModel.text.observe(viewLifecycleOwner, Observer {
            textView.text = it
        })*/
        return binding!!.root
    }


    override fun onResume() {
        super.onResume()
        binding!!.mapview.onResume()
    }

    override fun onPause() {
        super.onPause()
        binding!!.mapview.onPause()
    }
    override fun onDestroyView() {
        super.onDestroyView()
        binding=null
    } }

xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.home.HomeFragment">

    <org.osmdroid.views.MapView
        android:id="@+id/mapview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Custom Info layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/bubble_layout"
    android:background="@color/white"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/dialog_info"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book."/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_below="@id/dialog_info">

        <Button
            android:id="@+id/dialog_cancel"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.50"
            android:background="@color/purple_700"
            android:text="Cancel"/>

        <Button
            android:id="@+id/dialog_ok"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.50"
            android:background="@color/purple_500"
            android:text="Agree"/>
    </LinearLayout>
</RelativeLayout>