On my map I use the Marker Cluster Utility to group the markers. All the markers when first put on the map have the same icon, then, when I move close to one of the markers, its icon must change. I've read other discussions about this, but as far as I've understood, I'd need to remove the marker and generate it again with the new icon.
My markers belong to a cluster, so I should remove the marker from the cluster, generate a new marker and add it to the cluster manager object.
The problem is that the cluster manager object has a renderer attached to it which also defines the marker's icon and it would use the same icon as for the removed marker.
Some code:
the renderer class
class VenueMarkerRender(private val context: Context, map: GoogleMap, clusterManager: ClusterManager<Venue>)
: DefaultClusterRenderer<Venue>(context, map, clusterManager) {
override fun onBeforeClusterItemRendered(item: Venue?, markerOptions: MarkerOptions?) {
super.onBeforeClusterItemRendered(item, markerOptions)
markerOptions!!.icon(bitmapDescriptorFromVector(context, R.drawable.ic_map_black))
}
override fun onBeforeClusterRendered(cluster: Cluster<Venue>?, markerOptions: MarkerOptions?) {
super.onBeforeClusterRendered(cluster, markerOptions)
markerOptions!!.icon(bitmapDescriptorFromVector(context, R.drawable.ic_home_black_24dp))
}
override fun shouldRenderAsCluster(cluster: Cluster<Venue>?): Boolean {
return cluster!!.size > 1
}
/**
* Takes a vector image and make it available to use as a marker's icon
*/
private fun bitmapDescriptorFromVector(context: Context, #DrawableRes vectorDrawableResourceId: Int): BitmapDescriptor {
// ...
return BitmapDescriptorFactory.fromBitmap(bitmap)
}
}
the Venue class
class Venue : ClusterItem {
private var mPosition: LatLng
private var mTitle: String? = null
private var mSnippet: String? = null
constructor(lat: Double, lng: Double, title: String, snippet: String) {
mPosition = LatLng(lat, lng)
mTitle = title
mSnippet = snippet
}
override fun getPosition(): LatLng {
return mPosition
}
override fun getTitle(): String {
return mTitle!!
}
override fun getSnippet(): String? {
return mSnippet
}
}
finally how the cluster manager is created and how a venue is added to it
mClusterManager = ClusterManager(this, map)
val renderer = VenueMarkerRender(this, map, mClusterManager!!)
mClusterManager!!.renderer = renderer
// other code
for (i in 0 until markers.length()) {
val marker = JSONObject(markers.getJSONObject(i).toString())
val venue = Venue(
marker.getDouble("lat"),
marker.getDouble("lng"),
marker.getString("title"),
marker.getString("snippet"),
)
mClusterManager!!.addItem(venue)
}
mClusterManager!!.cluster()
Is it possible to generate a new Venue object with its own icon and to add it to the cluster manager object? Or is there a better way to obtain what I need?
I've just found the solution, I hope this will help someone else.
I've declared the renderer as a class attribute to make it available everywhere inside the activity
private var renderer: VenueMarkerRender? = null
before it was a private variable inside the method which sets up the Cluster Manager. Then it is initialized as already shown in the previous message
renderer = VenueMarkerRender(this, map, mClusterManager!!)
Now to change the marker when I get close to it, it is enough to call this method each time that the location changes
private fun markerProximity() {
// get the venues' list from the cluster
val venues = mClusterManager!!.algorithm.items
// if the cluster was not empty
if (venues.isNotEmpty()) {
// initialize the array which will contain the distance
val distance: FloatArray = floatArrayOf(0f,0f,0f)
// loop through all the venues
for (venue:Venue in venues) {
// get the distance in meters between the current position and the venue location
Location.distanceBetween(
venue.position.latitude,
venue.position.longitude,
lastLocation.latitude,
lastLocation.longitude,
distance)
// if closer than 3 meters
if ( distance[0] < 3 ) {
// change this marker's icon
renderer!!.getMarker(venue)
.setIcon(BitmapDescriptorFactory
.fromResource(R.drawable.my_location))
}
}
}
}
Related
I'm brand new to Open Street Map and have successfully added a map to my activity at the user's location and implemented an onClickListener that upon a click shows a marker and retrieves the latitude and longitude of that point. Here is my code
private fun showMap(dLatInit: Double, dLonInit: Double){
mapView.setTileSource(TileSourceFactory.MAPNIK)
Configuration.getInstance().userAgentValue =packageName
mapView.setMultiTouchControls(true)
mapController = mapView.controller as MapController
mapController.setZoom(10.0)
val pointCenter= GeoPoint(dLatInit, dLonInit)
mapController.setCenter(pointCenter)
val mReceive: MapEventsReceiver = object : MapEventsReceiver {
override fun singleTapConfirmedHelper(geoPoint: GeoPoint): Boolean {
Marker(mapView).apply {
this.position = geoPoint
this.setAnchor(Marker.ANCHOR_CENTER, Marker.ANCHOR_CENTER)
mapView.overlays.add(this)
}
populateEditText(textInputLayoutMapLat.editText, geoPoint.latitude.also { dMapLat =it })
populateEditText(textInputLayoutMapLon.editText, geoPoint.longitude.also { dMapLon =it })
return false
}
override fun longPressHelper(p: GeoPoint): Boolean {
return false
}
}
val overlayEvents = MapEventsOverlay(mReceive)
mapView.overlays.add(overlayEvents)
}
It works. The latitude and longitude immediately populate, however the marker takes from 3-5 seconds to show on my map. I'd like the marker to show much quicker.
My dependency
implementation 'org.osmdroid:osmdroid-android:6.0.3'
add
mapView.postInvalidate()
to force a redraw
I use the SymbolManager class to add a marker as SymbolOption on Mapbox.
This is the code I wrote to add the marker and it runs:
fun addMarker(marker : MapboxMarker) {
map?.style?.let {
it.getImage(MARKER_IMAGE_ID) ?: run {
it.addImage(MARKER_IMAGE_ID, BitmapFactory.decodeResource(context.resources, R.drawable.marker), true)
}
}
symbolManager ?: run {
symbolManager = SymbolManager(mapView!!, map!!, map!!.style!!)
symbolManager!!.iconAllowOverlap = true;
symbolManager!!.textAllowOverlap = true;
}
symbolManager!!.create(SymbolOptions().apply {
withLatLng(marker.latLng)
withIconImage(MARKER_IMAGE_ID)
marker.markerOptions?.let {
withIconColor(ColorUtils.colorToRgbaString(it.markerColor))
}
withIconSize(1f)
withSymbolSortKey(10.0f)
})
}
where MapboxMarker is my model with latitude, longitude and marker color
data class MapboxMarker(
var latLng: LatLng,
var markerColor: Int = Color.WHITE
)
Now, I need to remove a marker from map, but
symbolManager?.delete(symbolOption)
doesn't compile, it needs a Symbol object and SymbolOption is not a Symbol.
So... how can I remove a single SymbolObject?
Declare a SymbolManager:
private lateinit var mSymbolManager : SymbolManager
In your Fragment / Activity implement the interface OnMapReadyCallback
class MapFragment : Fragment(), OnMapReadyCallback {
override fun onMapReady(mapboxMap: MapboxMap) {
mapboxMap.setStyle(Style.SATELLITE) { style ->
mSymbolManager = SymbolManager(*YOUR_MAP_VIEW*, mapboxMap, style)
mSymbolManager.iconAllowOverlap = true
mSymbolManager.textAllowOverlap = true
}
}
}
To add a marker:
style.addImage("NAME_OF_MARKER_IMG", BitmapFactory.decodeResource(resources, YOUR_DRAWABLE_ICON))
mSymbolManager.create(
SymbolOptions()
.withLatLng(LatLng(LATITUDE, LONGITUDE))
.withTextAnchor(Property.TEXT_ANCHOR_TOP)
.withTextField("YOUR_TEXT_HERE")
.withIconImage("NAME_OF_MARKER_IMG")
.withTextColor("#COLOR") // #FFFFFF = WHITE
)
To delete all markers:
mSymbolManager.deleteAll()
To delete specific marker:
// Declare reference to that marker
private lateinit var mSymbol: Symbol
// During the creation save that reference
mSymbol = mSymbolManager.create(...)
// Use the SymbolManager to delete it
mSymbolManager.delete(mSymbol)
A special thanks to Aboukinane for saving my life on this.
You are correctly creating the symbol object, but you are not storing a reference to it. You need that reference to delete it. Therefore you can solve your problem by keeping track of the symbols you create.
For that just keep the reference in a variable:
val symbolManager = SymbolManager(mapView, mapboxMap, style)
symbolManager.iconAllowOverlap = true
symbolManager.iconIgnorePlacement = true
// Add symbol at specified lat/lon
val symbol = symbolManager.create(SymbolOptions()
.withLatLng(LatLng(60.169091, 24.939876))
.withIconImage(ICON_ID)
.withIconSize(2.0f))
You now have the reference to that symbol stored inside symbol.
If you want to remove the symbol, you can use the reference:
symbolManager.delete(symbol)
Im making a project where i need to add and remove some markers created dynamically. i'm creating my markes this way:
private fun AddMarkerFromArray(name:String, adrs:String,cod:String,imgSrc:String){
val info = MarkerDataNormal(name, adrs,
cod )
val markerOptions = MarkerOptions()
markerOptions.position(LatLng(0.0,0.0))
.title("Location Details")
.snippet("I am custom Location Marker.")
.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE)
)
val customInfoWindow = CustomInfoWindowGoogleMap(this)
mMap.setInfoWindowAdapter(customInfoWindow)
val spot: Marker = mMap.addMarker(markerOptions)
spot.tag = info
// spot.showInfoWindow()
}
And this is the rest of code:
data class MarkerDataNormal(val mLocatioName: String,
val mLocationAddres: String,
val mLocationCood: String)
class CustomInfoWindowGoogleMap(val context: Context) : GoogleMap.InfoWindowAdapter {
override fun getInfoContents(p0: Marker?): View {
var mInfoView = (context as Activity).layoutInflater.inflate(R.layout.markernormal, null)
var mInfoWindow: MarkerDataNormal? = p0?.tag as MarkerDataNormal?
mInfoView.txtNombre.text = mInfoWindow?.mLocatioName
mInfoView.txtDireccion.text = mInfoWindow?.mLocationAddres
mInfoView.txtCoordenadas.text = mInfoWindow?.mLocationCood
return mInfoView
}
override fun getInfoWindow(p0: Marker): View? {
return null
}
}
so i'm using the function to make apear all the Markers i need, they are displayed correctly, but i can't clear() only one cause every one of them are "spot"
how can i change the name of the variable or assign an id to each one for later access?
I think you should store the references to the marker objects in a List<Marker>. This way you will have access to these references later.
I have a list of places which are marked in google maps using Markers. I want to select a Marker so that it will highlight with a different color. When I click on the same marker or any other marker I want remove the selection made in the first marker and set it back to the default color.
This is my onClusterItemClick method
override fun onClusterItemClick(p0: Station?): Boolean {
dragView.visibility = View.VISIBLE
viewModel.loadStation(p0?.id!!)
val marker = renderer.getMarker(p0)
//save previous merker here
marker?.setIcon(BitmapDescriptorFactory.fromResource(R.drawable.ic_map_pin_selected))
return true
}
This is my Station Renderer
/**
* Class to design the pin point into the map
*/
inner class StationRenderer(context: Context, map: GoogleMap,
clusterManager: ClusterManager<Station>) : DefaultClusterRenderer<Station>(context, map, clusterManager) {
override fun onBeforeClusterRendered(cluster: Cluster<Station>?, markerOptions: MarkerOptions?) {
markerOptions?.icon(BitmapDescriptorFactory.fromBitmap(createStoreMarker(cluster?.size.toString())))
}
override fun onBeforeClusterItemRendered(item: Station?, markerOptions: MarkerOptions?) {
markerOptions?.icon(BitmapDescriptorFactory.fromResource(R.drawable.ic_map_pin))
}
private fun createStoreMarker(stationsCount:String): Bitmap {
val markerLayout = layoutInflater.inflate(R.layout.marker_item, null)
val markerImage = markerLayout.findViewById(R.id.marker_image) as ImageView
val markerRating = markerLayout.findViewById(R.id.marker_text) as TextView
markerImage.setImageResource(R.drawable.ic_map_pin)
markerRating.text = stationsCount
markerLayout.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED), View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED))
markerLayout.layout(0, 0, markerLayout.getMeasuredWidth(), markerLayout.getMeasuredHeight())
val bitmap = Bitmap.createBitmap(markerLayout.getMeasuredWidth(), markerLayout.getMeasuredHeight(), Bitmap.Config.ARGB_8888)
val canvas = Canvas(bitmap)
markerLayout.draw(canvas)
return bitmap
}
override fun shouldRenderAsCluster(cluster: Cluster<Station>?): Boolean {
return cluster?.size !!> 1
}
}
In googleMaps these is no such thing as selected or deselected or some kind of listeners specifically for that but you have onMarkerClick(); you can use this Listener and add some logic to achieve that thing.
googleMap.setOnMarkerClickListener(new GoogleMap.OnMarkerClickListener(){
#Override
public boolean onMarkerClick(Marker marker){
return false;
}
});
You can get the Idea from this: How to select and deselect a marker in google maps in android?
I am building some app like image below, I want to force markers not to be clickable, but there is no setClickable(false) for Marker or MarkerOptions.
Currently area around marker (see attachment) is not clickable ( click is passed to marker, not map)
You have to use Overlay instead of marker in the Map to get exactly what you desire. You could follow this link, similar is done in JavaScript here.
I found a way to manually handle clicks for markers.
Add a touchable wrapper as described in this stackoverflow answer: https://stackoverflow.com/a/58039285/1499750
Add a gesture detector to your fragment and listen to single taps, then find the closest marker based on lat lng:
private var gestureDetector: GestureDetector? = null
...
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
gestureDetector = GestureDetector(context, GoogleMapsGestureListener { e -> onMapSingleTap(e) })
//id of touchable wrapper - can use findViewById here instead if not using kotlin synthetics
googleMapsTouchableWrapper?.onTouch = {
gestureDetector?.onTouchEvent(it)
}
}
private fun onMapSingleTap(e: MotionEvent) {
val latLng = map?.projection?.fromScreenLocation(Point(e.x.toInt(), e.y.toInt())) ?: return
//this assumes you are maintaining a set of the latlngs for your markers
val closestNearbyLatLng = markerLatLngs?.findClosestNearbyLatLng(latLng)
//assuming you have a map of latlng to marker you can now find that marker based on latlng and do whatever you need to with it
}
private fun Set<LatLng>.findClosestNearbyLatLng(latLng: LatLng): LatLng? {
val map = map ?: return null
val screenDistance = map.projection.visibleRegion.latLngBounds.northeast.distanceBetweenInKm(map.projection.visibleRegion.latLngBounds.southwest)
val closestLatLng = this.minBy { latLng.distanceBetweenInKm(it) } ?: return null
if (latLng.distanceBetweenInKm(closestLatLng) < screenDistance/40) {
return closestLatLng
}
return null
}
fun LatLong.distanceBetweenInKm(latLng: LatLng): Double {
if (this == latLng) {
return 0.0
}
val earthRadius = 6371.0 //km value;
//converting to radians
val latPoint1Radians = Math.toRadians(latitude)
val lngPoint1Radians = Math.toRadians(longitude)
val latPoint2Radians = Math.toRadians(latLng.latitude)
val lngPoint2Radians = Math.toRadians(latLng.longitude)
var distance = sin((latPoint2Radians - latPoint1Radians) / 2.0).pow(2.0) + (cos(latPoint1Radians) * cos(latPoint2Radians)
* sin((lngPoint2Radians - lngPoint1Radians) / 2.0).pow(2.0))
distance = 2.0 * earthRadius * asin(sqrt(distance))
return abs(distance) //km value
}
class GoogleMapsGestureListener(private val onSingleTap: (MotionEvent) -> Unit) : GestureDetector.SimpleOnGestureListener() {
override fun onSingleTapConfirmed(e: MotionEvent?): Boolean {
super.onSingleTapConfirmed(e)
e?.let { onSingleTap(it) }
return true
}
}
I recently was able to create a formula to create an area surrounding a certain position on a Google Map, that is also scalable with zoom level.
Here I converted the LatLng coordinates from the marker to actual coordinates on the phone:
//array that holds all locations of every marker
//after a marker is created add the position in here
val positionList = mutableListOf<LatLng>()
//map is variable type GoogleMap
map.setOnMapClickListener {
var inRange = false
for(i in positionList.indices) {
//establish corners of boundaries surrounding markers
val points = positionList.toCoordinates(map)
//check if clicked position falls in one of the positions' bounds
val isInRangeLng = (points[i][2]..points[i][3]).contains(it.longitude)
val isInRangeLat = (points[i][0]..points[i][1]).contains(it.latitude)
//if click lands in of the positions' bounds, stop loop and return inRange
//true
if(isInRangeLat && isInRangeLng) {
inRange = true
break
}
}
if(!inRange) {
//APPLY YOUR LOGIC IF CLICK WAS NOT IN AREA
} else {
//APPLY YOUR LOGIC IF CLICK WAS IN AREA
}
}
//Extension function used to simplify logic
/** Convert LatLng to coordinates on phone **/
fun List<LatLng>.toCoordinates(map: GoogleMap): List<List<Double>> {
val proj: Projection = map.projection
val coordinateList = mutableListOf<List<Double>>()
//create bounds for each position in list
this.forEach {
//get screen coordinates at the current LatLng
val point = proj.toScreenLocation(it)
val left = point.x - 100
val right = point.x + 100
val top = point.y - 100
val bottom = point.y + 100
//convert bounds into two points diagonal of each other
val topRight = Point(right, top)
val bottomLeft = Point(left, bottom)
//convert the two points into LatLng points and get the bounds in north,
//south, west, and east
val northEast = proj.fromScreenLocation(topRight)
val north = northEast.latitude
val east = northEast.longitude
val southWest = proj.fromScreenLocation(bottomLeft)
val south = southWest.latitude
val west = southWest.longitude
//add the bounds to be returned in a list which corresponds to a certain
//position
coordinateList.add(listOf(
south,
north,
west,
east
))
}
return coordinateList
}
This can be used for a lot more than markers too.