I have created circle in maps using Google maps API. When I change the radius of circle, the map contents inside the circle must be zoomed in. Pls let me know is der a way to zoom in the contents inside the circle when radius of circle is changed.
Thanks in advance
Use var bounds = circle.getBounds() to get the extent of your circle followed by map.fitBounds(bounds) to zoom your map.
Related
I am implementing a scenario where I am trying to animate map accuracy indicator surrounding the position indicator using here maps
It should animate like ripples along the route with position indicator
But could not find any interface in HereMaps Android SDK document
Can you help with the same ? !
Ripple animated circle
What about using different MapCircles on the coordinates of the current position in different colors?
A MapCircle represents a type of MapObject in the shape of a circle with an assigned radius distance and a GeoCoordinate center. It can be created by calling the constructor MapCircle(double radius, GeoCoordinate center).
I have openlayers map with a polygon feature.
When we hover over the polygon, it displays the description in overlay.
However the overlay is always displayed on the polygon and not to left and right which is what I am trying to do. In doing so I juggled with css of overlay but couldn't come to the solution. There is leaflet bindPopup() method to display tooltip on objects added to map which I tried to understand but couldn't gain anything there.
My goal is to keep the overlay within the viewport of the map so that it would always be visible.
Just to illustrate what I am expecting here is the fiddle : leaflet popup
Current status : Openlayers overlay positioning
Just set the overlay to appear on the left of the extent of the polygon, such as:
if (feature && feature.get('type') == 'Polygon') {
var ext = feature.getGeometry().getExtent();
let coordinate = [ext[0], (ext[3]-ext[1])/2];
content.innerHTML = feature.get('desc');
popup.setPosition(coordinate);
}
Then you can play with the CSS to display the overlay the way you want.
I'm struggling with google map API (with Ionic 3) :
I create a regular polygon with 6 points on the google map, and I want to put an image on the center.
I have the coordinates of the center and of course, of each point of the polygon.
When I put a marker on the center with an Icon, the bottom-left of the image start on the coordinates I set in the marker.
Does someone know how I can center the image ?
I have a script that gets the coordinate of a map by clicking. At the same time, there are circle overlays spread across the map. I can get the coordinate of anywhere but the area covered by the overlays. What is a good work-around for this problem?
Either make the circles with {clickable: false} or capture the click event on the circles also
I'm using GMap V3 API Circle to display the event location, if the more events occurs in that location, the size of the circle, i.e the radius would be bigger, in other words, the size of circle only relates to the event number occur in that location.
However, the radius of circle API is in meters on the Earth Surface, which means if I zoom in/out, the visual size of circle varies, so is there some function or formula to keep the circle size constant no matter which zoom level I'm in?
Thank you!
Ryan
I haven't seen any function to make the constant circle overlay on Google map. So the alternative solution which I am using that I have make the image of circle and then use the marker overlay with custom image on Google map. Following is the code of marker overlay.
var image = 'circle.png';
var beachMarker = new google.maps.Marker({
position: centerPoint,
map: map,
icon: image,
});