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 ?
Related
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 have 2D color image. All colored points are located inside round area in center of this rectangle image, all points outside circle are black (I get these rectangle images from fisheye camera).
I know the coordinates of center of this circle and its radius.
I need to move all colored points from circle area on 2D image to the surface of sphere. More precisely hemisphere, because my camera has 180 degrees FOV.
My question is. How to move these colored points correctly? Will it be correct to just assign Z coordinate to all points inside circle area in accordance with sphere equation?
To make my question more clear I attached 2D image from my fisheye camera and image with desirable result.
First, you need the lens calibration data of your camera. Ocam or opencv will do a great job for you.
Second, as you mentioned that you already know your optical center, you can convert image coordinate into the sphere coordinate. So, now you have mapping function that maps image coordinate to sphere coordinate.
Third, you need some sort of rendering tool to observe your image mapped sphere. The simplest way is to use OpenGL. Map your texture on a sphere and move the camera inside the sphere.
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.
Im looking for some examples of a transparent fixed postion image that overlays a map. When moving the map, the transparent image should not move and the markers should appear on top of the image.
Does anyone know of any examples?
There's a way with a div on top of another one. It positions a + marker over the center of the map.
http://code.google.com/p/gmaps-samples-v3/source/browse/trunk/geocoder/getlatlng.html
the crosshair image is http://code.google.com/p/gmaps-samples-v3/source/browse/trunk/geocoder/crosshair.gif
Test here: http://jsfiddle.net/Q27DD/1/
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,
});