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/
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'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 used css & corner images to get rounded corners on a map but when showing streetview the close button is under the image and can't be clicked. Anybody have any ideas?
I ran into this problem recently... I created a "frame" (ie: a div that acts like a like a "picture frame" that sits perfectly on top of the map div; position it absolutely if you need to) and apply the rounded effects and corner images to the frame instead of the map div.
Alternatively you could experiment with wrapping the map inside a parent div with overflow hidden.
I ended up binding an event to the top right div to close the street view on click.
I would like to customize the shape of the button to different shapes like circle, star, square or of any shape. How would i achieve so?
I apologize because this doesn't answer your question, but:
In order to make sure the user can reliably click on your button, you probably want it to be a convex shape. A rectangle or circle is fine, and you could paint a star on it. But you wouldn't want the user to try to click your star and miss, just because they were not quite inside one of its arms.
Canvas can be used as button.
Take a canvas of required size. Give your required button shape(image) as background image to canvas.
Example:
Explanation: {nextYellowButton} is the embedded button. It is an arrow mark shape button.
It is a .PNG image. So, it doesn't include the background color.
Now your button is of arrow shape. it occupies 50px * 50px area on screen. But it looks exactly like an arrow mark.
I am now writing a image viewer, It is used for view thumbnails.
As it is ugly, I decide to draw shadow round thumbnail.
There is background color.
I am using StretchDIBits to draw a shadow image at the location of thumbnail.
However it is really annoying that it cover the background color...
When the background is white, it looks perfect.
but if the backgound is not white, it has a white border.
so I make use of AlphaBlend, first draw the shadow image onto a DC, then use AlphaBlend onto the background. However, I can still see the white border.
Is there any why to generate a perfect shadow , no matter what background is.
Are you sure the shadow bitmap contains alpha values for the alpha channel ? I.o.w.: how are you creating the shadow bitmap: are you doing that by blurring a square on a transparent target or a white target? If the first, the shadow bitmap contains an alpha channel and should blend fine with the background. if the second, your shadow bitmap contains white fragments and thus will blend that white with the background.