Make clickable polygons on Google Maps (for Android) - android

I have continuous LatLngs of various areas in a city. Is there any way I can create clickable polygons with it. Once way to go about would be to
Generate polygons with the available LatLngs.( I want to visually show the polygons on the map with color encoding)
Set up setOnMapClickListener.
Do a point inside polygon test.
I understand that this is very naive. What are the alternative approaches?

Here's how I did it.
Polygon polygon = getMap().addPolygon(new PolygonOptions()
.add(new LatLng(12.780712, 77.770956), new LatLng(12.912006, 77.229738), new LatLng(12.412006, 77.629738), new LatLng(12.912006, 77.229738))
.strokeColor(0xFF00AA00)
.fillColor(0x2200FFFF)
.strokeWidth(2)
);
polygon.setClickable(true);
getMap().setOnPolygonClickListener(new GoogleMap.OnPolygonClickListener() {
public void onPolygonClick(Polygon polygon) {
mClusterManager = new ClusterManager<MyItem>(getApplicationContext(), getMap());
getMap().setOnCameraChangeListener(mClusterManager);
getMap().moveCamera(CameraUpdateFactory.newLatLngZoom(getMap().getCameraPosition().target, getMap().getCameraPosition().zoom));
try {
readItems();
} catch (JSONException e) {
Toast.makeText(getApplicationContext(), "Problem reading list of markers.", Toast.LENGTH_LONG).show();
}
}
});
Hope that helps.

you don't need to go crazy for having clickable polygon. I did it time ago but now, there is an api for that:
GoogleMap.setOnPolygonClickListener(OnPolygonClickListener)
You can use it easily:
GoogleMap mymap =....//init your map
mymap.setOnPolygonClickListener(new OnPolygonClickListener(){
void onPolygonClick(Polygon polygon){
//do whatever with polygon!
}
});

In adding Polygon to the map. First create a PolygonOptions object and add some points to it. These points will form the outline of the polygon. You then add the polygon to the map by calling GoogleMap.addPolygon(PolygonOptions) which will return a Polygon object.
This following code snippet show how to add polygon to a map.
// Instantiates a new Polygon object and adds points to define a rectangle PolygonOptions rectOptions = new PolygonOptions()
.add(new LatLng(37.35, -122.0),
new LatLng(37.45, -122.0),
new LatLng(37.45, -122.2),
new LatLng(37.35, -122.2),
new LatLng(37.35, -122.0));
// Get back the mutable Polygon Polygon polygon = myMap.addPolygon(rectOptions);
By default, polygons are not clickable. You can enable and disable the clickability by calling Polygon.setClickable(boolean).
Like N Dorigatti said. In using OnPolygonClickListener to listen click events, call GoogleMap.setOnPolygonClickListener(OnPolygonClickListener).
When a user clicks on a polygon, you will receive an onPolygonClick(Polygon) callback.
Check this document for more information.

Related

Draw Polylines and Polygons on Map in android studio?

Actually i am beginner to android development
I want to draw route(blue line) between my current location to marker i touch(i have some location markers on map,locations of clients)??
A Polyline is a series of connected line segments. Polylines are useful to represent routes, paths, or other connections between locations on the map.
Create a PolylineOptions object and add points to it. Each point represents a location on the map, which you define with a LatLng object containing latitude and longitude values. The code sample below creates a polyline with 6 points.
Call GoogleMap.addPolyline() to add the polyline to the map.
Polyline polyline = googleMap.addPolyline(new PolylineOptions()
.clickable(true)
.add(
new LatLng(-35.016, 143.321),
new LatLng(-34.747, 145.592),
new LatLng(-34.364, 147.891),
new LatLng(-33.501, 150.217),
new LatLng(-32.306, 149.248),
new LatLng(-32.491, 147.309)));
Set the polyline's clickable option to true if you want to handle click events on the polyline.
You can customise stroke width, stroke color, and joint type:
polyline.setEndCap(new RoundCap());
polyline.setWidth(12);
polyline.setColor(Color.parse("#0000ff"));
polyline.setJointType(JointType.ROUND);

How to change size of polygon stroke using Mapbox Android SDK

I am trying to increase the width of the 1px stroke around the outside of a polygon using Mapbox Android SDK version 4.2.0.beta4.
First I tried using the PolygonOptions but there was no option available.
public Polygon addPolygon(MapboxMap mapboxMap) {
PolygonOptions polygonOptions = new PolygonOptions()
.addAll(latLngs)
.alpha(ALPHA_UNSELECTED)
.fillColor(FILL_COLOR)
.strokeColor(BORDER_COLOR);
// no option for stroke width
return mapboxMap.addPolygon(polygonOptions);
}
I then tried using the using the new Runtime Style API as defined in the Style Spec but could not find a suitable layer ID, I tried "background"
https://www.mapbox.com/mapbox-gl-style-spec/
public void changeStrokeWidth(MapboxMap mapboxMap) {
Layer styleLayer = mapboxMap.getLayer("background");
styleLayer.setProperties(PropertyFactory.lineWidth(10f));
}
Does anyone know how to make this work or do I just have to create my own set of polylines over the top of the polygon to emulate the behaviour?
You have a few options here. Currently we don't offer a way to increase polygon stroke width but you can:
Add a Polyline using the same latlngs making up the polygon. This is by far the easiest way but you have to consider that polylines are added on top of the map (covering up labels occasionally).
Your second option would be to like you mentioned, adding a linelayer to the map using the same geometry as the polygon. Here's an example showing how to take points and create such a layer.
Let me know if you have additional questions.
//Hi, Guys. Below is the simple example to change the properties of polygon border. Hope it will help you.//
{
List<LatLng> plotPolygon = new ArrayList<>();
List<com.mapbox.services.commons.models.Position> coordinates = new ArrayList<>();
plotPolygon.add(new LatLng(18.9965099,75.7316343));
plotPolygon.add(new LatLng(20.8858018,74.7288414));
plotPolygon.add(new LatLng(21.1612315,79.0024702));
plotPolygon.add(new LatLng(18.7918749,78.899195));
plotPolygon.add(new LatLng(18.9965099,75.7316343));
Polygon polygon1 = mapboxMap.addPolygon(new PolygonOptions()
.addAll(plotPolygon)
);
polygon1.setFillColor(Color.parseColor("#3bb2d0"));
Below we are creating a list of coordinates of polygon border.
coordinates.add(com.mapbox.services.commons.models.Position.fromCoordinates(75.7316343 , 18.9965099));
coordinates.add(com.mapbox.services.commons.models.Position.fromCoordinates(74.7288414 , 20.8858018));
coordinates.add(com.mapbox.services.commons.models.Position.fromCoordinates(79.0024702 , 21.1612315));
coordinates.add(com.mapbox.services.commons.models.Position.fromCoordinates(78.899195 , 18.7918749));
coordinates.add(com.mapbox.services.commons.models.Position.fromCoordinates(75.7316343 , 18.9965099));
changeStrokeProperties(mapboxMap , coordinates);
}
public void changeStrokeProperties(MapboxMap mapboxMap , List<com.mapbox.services.commons.models.Position> coordinates) {
// Create the LineString from the list of coordinates and then make a GeoJSON//
// FeatureCollection so we can add the line to our map as a layer.//
final Feature lineFeature = Feature.fromGeometry(LineString.fromCoordinates(coordinates));
final GeoJsonSource source = new GeoJsonSource(
"route", FeatureCollection.fromFeatures(new Feature[] { lineFeature }));
mapboxMap.addSource(source);
LineLayer lineLayer = new LineLayer("linelayer", "route");
lineLayer.setProperties(
PropertyFactory.lineDasharray(new Float[]{0.01f, 2f}),
PropertyFactory.lineCap(Property.LINE_CAP_ROUND),
PropertyFactory.lineJoin(Property.LINE_JOIN_ROUND),
PropertyFactory.lineWidth(5f),
PropertyFactory.lineColor(Color.parseColor("#e55e5e"))
);
mapboxMap.addLayer(lineLayer);
}

Remove a line from PolyLine map in Google Map android V2?

I have searched in google and find this answer where i can remove all polyLine of a Map.
But I want to remove only a particular line from the poly Line. For Example I want to remove the line from 2nd to 3rd LatLng in the given code. I want to change color of a particular line of a polyLine or make it transparent. And I also want to add a clickListener to PolyLine
PolylineOptions rectOptions = new PolylineOptions()
.add(new LatLng(37.35, -122.0))
.add(new LatLng(37.45, -122.0)) // North of the previous point, but at the same longitude
.add(new LatLng(37.45, -122.2)) // Same latitude, and 30km to the west
.add(new LatLng(37.35, -122.2)) // Same longitude, and 16km to the south
.add(new LatLng(37.35, -122.0)).width(5).color(Color.RED);; // Closes the polyline.
Polyline polyline = myMap.addPolyline(rectOptions);
Main goal is to remove/make it transparent a particular line of a PolyLine on click or tap.
PolylineOptions line= new PolylineOptions().add(HAMBURG,// these are latlong
KIEL,
KIEL2,
KIEL3
new LatLng(40.748963847316034,
-73.96807193756104)
)
.width(5).color(Color.RED);
Polyline polyline= googleMap.addPolyline(line);
And i want to remov line between KIEL1 and KIEL2
You'll have to manually remove points from the polyline.
EDIT:
Step by step:
Create a List of polylines:
List<Polyline> mPolylines = new ArrayList<Polyline>();
Add PolylineOptions to the map:
Polyline polyline1 = myMap.addPolyline(rectOptions1);
Polyline polyline2 = myMap.addPolyline(rectOptions2);
Polyline polyline3 = myMap.addPolyline(rectOptions3);
Then save the added polylines to your array
mPolylines.add(polyline1);
mPolylines.add(polyline2);
mPolylines.add(polyline3);
Now at any time you can trim the polyline like so:
// Get polyline1
List<LatLng> points = mPolylines.get(0).getPoints();
// Set the bounds of points to remove (inclusive)
int startPoint = 1, endPoint = 2; // will remove kiel1 and kiel2
// Remove the points
for (int i=startPoint; i<=endPoint; i++) {
points.remove(i);
}
// Added this line as getPoints returns a copy
mPolylines.get(0).setPoints(points);
Now in theory this should work fine. I found that the points don't actually change after setPoints.
I even tried:
Polyline polyline = mPolylines.get(0);
// Get copy of the points
List<LatLng> points = polyline.getPoints();
mPolylines.get(0).remove();
mPolylines.remove(0);
for (int i=3000; i<7000; i++) {
points.remove(i);
}
// Create a PolylineOptions object with the new points
PolylineOptions polylineOptions = new PolylineOptions().addAll(points);
mPolylines.add(0, mMap.addPolyline(polylineOptions));
And to my surprise a new Polyline was added (I can tell by the changed stroke width and color), but it still used the old points, even though points.size() returned the correct (trimmed) count.
I'm not sure why this is so, perhaps some error in my code. You can try these methods yourself and see if you are any luckier.

How can I get the visible markers in Google Maps v2 in Android?

In Google Maps v2 for Android, how can I get the visible markers? I know I can use Projection and eliminate points < 0 and points > screen size. But I do not wish to check one by one, it can be too slow if I have a lot of markers. Is there any easy way? Or some off-the-shelf solution? If yes, which one?
Ok, the following is the code the I have used before to determine what the user can see and then only draw the markers that are visible.
I think you might be able to adapt it to your purpose.
get the current rectangle "viewport" of the map (note:must be run on the main thread)
this.mLatLngBounds = this.mMap.getProjection().getVisibleRegion().latLngBounds;
sort the 2 points (top-left and bottom-right) so that we can use min/max logic
double lowLat;
double lowLng;
double highLat;
double highLng;
if (this.mLatLngBounds.northeast.latitude < this.mLatLngBounds.southwest.latitude)
{
lowLat = this.mLatLngBounds.northeast.latitude;
highLat = this.mLatLngBounds.southwest.latitude;
}
else
{
highLat = this.mLatLngBounds.northeast.latitude;
lowLat = this.mLatLngBounds.southwest.latitude;
}
if (this.mLatLngBounds.northeast.longitude < this.mLatLngBounds.southwest.longitude)
{
lowLng = this.mLatLngBounds.northeast.longitude;
highLng = this.mLatLngBounds.southwest.longitude;
}
else
{
highLng = this.mLatLngBounds.northeast.longitude;
lowLng = this.mLatLngBounds.southwest.longitude;
}
then in my case I had this data in a db, so i could use >= and <= to extract only the pins i wanted
You could use the android-map-extension library. Amongst others it offers a List GoogleMap.getDisplayedMarkers() method.
You could add this Extension Function to GoogleMap class if you are using Kotlin
fun GoogleMap.isMarkerVisible(markerPosition: LatLng) =
projection.visibleRegion.latLngBounds.contains(markerPosition)
You just pass the marker position as a parameter of this method and do whatever you want with the result.
If you are using Java you can just declare the function wherever fits better for you.
Hope it helps!
You are looking for either markers:
https://developers.google.com/maps/documentation/android/marker
private GoogleMap mMap;
mMap = ((MapFragment) getFragmentManager().findFragmentById(R.id.map)).getMap();
mMap.addMarker(new MarkerOptions()
.position(new LatLng(0, 0))
.title("Hello world"));
Or direct drawing:
https://developers.google.com/maps/documentation/android/shapes
// Instantiates a new Polyline object and adds points to define a rectangle
PolylineOptions rectOptions = new PolylineOptions()
.add(new LatLng(37.35, -122.0))
.add(new LatLng(37.45, -122.0)) // North of the previous point, but at the same longitude
.add(new LatLng(37.45, -122.2)) // Same latitude, and 30km to the west
.add(new LatLng(37.35, -122.2)) // Same longitude, and 16km to the south
.add(new LatLng(37.35, -122.0)); // Closes the polyline.
// Get back the mutable Polyline
Polyline polyline = myMap.addPolyline(rectOptions);

How to remove all the polylines from a map

Following
How to draw a path between two markers
I had to add lot of polylines between two markers, to make a path.
One of the markers is draggable, lets say source is draggable.
So, when user starts dragging the marker, the path previously drawn must be erased and a new path between new source and destination must be draw.
I am able to draw the new path, but how can i erase the previous path?
This is how the path is drawn:
for (int z = 0; z < list.size() - 1; z++) {
LatLng src = list.get(z);
LatLng dest = list.get(z + 1);
Polyline line = map.addPolyline(new PolylineOptions()
.add(new LatLng(src.latitude, src.longitude),
new LatLng(dest.latitude, dest.longitude))
.width(2).color(Color.RED).geodesic(true));
}
One solution i can get is
map.clear();
To clear all the polylines, markers etc.. and add the markers again, then drawn the path.
But as soon as I start dragging, the marker is cleared, hence not visible on the map :(
Thank You
Keep track of the Polyline as you add it to the map:
Polyline polyline = this.mMap.addPolyline(new PolylineOptions().....);
Then when you want to remove it:
polyline.remove();
If you have lots of Polylines, just add them to a List as they are put on the map:
List<Polyline> polylines = new ArrayList<Polyline>();
for(....)
{
polylines.add(this.mMap.addPolyline(new PolylineOptions()....));
}
And when you want to delete:
for(Polyline line : polylines)
{
line.remove();
}
polylines.clear();
The key is to keep a reference to the Polyline objects and call .remove() on each one.
I know this is very old question but I noticed that this is very common need. I found another way and I wanted to share it.
Here is the basic idea:
Polyline polylineFinal;
PolylineOptions polylineOptions;
loop {
polylineOptions.add( new LatLng( latitude, longitude ) );
}
polylineOptions.width(2);
polylineOptions.color(Color.RED);
polylineOptions.geodesic(true);
polylineFinal = map.addPolyline (polylineOptions);
Map's "addPolyline" method returns a single polyline which contains all the points. When I need to remove the points, I call polylineFinal's "remove" method.
polylineFinal.remove();
Update
If you want to removes all markers, polylines, polygons, overlays, etc from the map use
mMap.clear(); //it will remove all additional objects from map
and if you only want to remove all or single polyline, polygon, marker etc see #DiskDev Answer above. In this case you must keep track of every single additional object you add to map

Categories

Resources