I'm currently developing a webpage containing a map based on Google Map Api V3 : http://www.fairaidsyria.org
I have two overlays containing polygons that appear successively as the user zooms in..
Unfortunately, annoying "white flashes" occur when zooming. The problem even occurs at max zoom levels, when both overlays are not displayed...
The blinking seems to be directly related to the presence of polygons in the zoomed area, because if you try to zoom somewhere else in the world (area without polygons), everything works fine : no flashes.
I suspect this phenomena to be "native" and not related to a mistake I could have done. In fact, the same flashes also happen when you zoom in the triangle in the following official example : https://developers.google.com/maps/documentation/javascript/examples/polygon-simple?hl=en
Did someone find a way to solve this?
based on this good article change your meta viewport tag to:
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
Related
How can the Google Vision API be used to detect if a head is completely inside an image or partly cut off by the image frame?
3 examples:
Image 1 shows a complete head
Image 2 shows a cut off head where the full "face" is visible
Image 3 shows a cut off head where also the face is cut off
To narrow down the question, the following cases should be detected:
there is a completely visible head in the image
there is a partly visible head in the image where parts of the head are outside the image bounds
The following is out of scope for this question:
heads that are spatially or scenically inside the image bounds but fully or partly covered by other objects
there are no parts of a head visible in the image, e.g. if there is only a neck visible it can't be assumed that there is or is not a head attached to it
the effectiveness or efficiency of the API in detecting faces that are fully or partly visible, file that under caveats
I have checked the documentation but it doesn't say anything about head crop-off detection.
I am not asking for code but whether / how the API can be used for the described purpose. Hence neither the question contains any code nor is an answer expected to contain any code. If you are looking for code examples for API calls, take a look at the plenty example calls in the API docs.
There was a meta discussion about this question.
Image credit
The API does provide boundingPoly and fdBoundingPoly to determine where the face (not head) is located inside the image.
Even though the API does not provide the bounds for the "head", the example below demonstrates that boundingPoly is pretty equivalent to the larger face area which can apparently be used as substitute.
Here are the API results for boundingPoly (red dots) and fdBoundingPoly (blue dots):
Image 1: shows the face bounds for a fully visible head. The boundingPoly which is described as the larger face area is apparently pretty equivalent to the "head" area.
Image 2: the bounding boxes are missing y coordinates for the 4 top dots (2 red, 2 blue; depicted with y=0 coordinates for the purpose of demonstration), which can be used as indication of a cropped-off head.
Image 3: the API does not result any faceAnnotations, so it can be easily detected as a substantially cropped-off head or an image without any partly visible head which won’t be distinguished in this case.
I'm trying to display property boundaries on top of a Google Map by using KineticJS and a Google Maps OverviewLayer.
It works great (1000 parcels being shown at a time. Much faster than Google.Maps.Polygon())
When I drag the Google Map down, then zoom in/out, the top shapes get cut off and don't re-draw when I zoom back out.
I'm guessing its a setX, setY thing but I don't understand the underlying concepts enough.
Any help would be appreciated.
Here is my app:
KineticJS and Google Maps OverlayView test site
I added a light-green background to the KineticJS canvas to see what it happening when you zoom in.
The canvas seems to stay locked in place and the same width/height but when you zoom in I'm guessing the canvas should grow proportionally.
I can't figure out how to do that though....
Any help would be appreciated!
I am using leaflet js to show a world map using cloudmade tiles. When I setMaxBounds to the map the bounds work great except to north. That is, however, not my biggest concern. My concern is, as I use maxBounds I can not zoom out to see whole world in any screen size.
The bound I used reaches all the way from north east corner of canada to south west of australia. I can pan to reach the bounds but cant zoom out to see whole map. I set minZoom to 0. Without maxBound, it is zoomed out too far you can see the world repeat thrice on big screen.
map = L.map('canvas',{zoomControl: false}).setView([38.82259, -2.8125], 0);
map.setMaxBounds([[84.67351256610522, -174.0234375], [-58.995311187950925, 223.2421875]]);
Any help is appriciated.
Anil
If I understand correctly, your problem is that you want to be able to see the entire world in your view, but you want to be able to restrict the user from seeing the tiles wrapped around.
First, Leaflet is doing exactly what you are telling it to do. Check out this JSFiddle I created with your code. http://jsfiddle.net/zF6bf/ I can zoom out to see the entire world, but only if I resize the result pane to be large enough to show the entire world, without violating your maxBounds rule. This appears to be correct behavior to me.
Second, if you really do not want the world to wrap, you can also set the noWrap option to true when creating a layer.
var osmLayer = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { noWrap: true}).addTo(map);
This will prevent that layer from wrapping around the map. If this wrapping is what made you create the bounds in the first place, then perhaps removing the wrapping will remove your need to set the maxBounds. Then the map will be able to be panned and zoomed freely.
I set up a Google Maps v3 at our website at http://wallawalla.tk/services and I encounter a minor distortion issue. That is, if you look at the map very precisely, you'll see that there are random "white/gray stripes" appearing. Most important at the very left side of the map and especially when opening InfoWindows respectively closing them. It appears that "white/gray stripes" are somehow related to the border of the InfoWindow, i.e. it seems that if one of the borders doesn't show up (most of the time at the very left side of the respective InfoWindow), there is a random "white/gray stripe" appearing near or even through the InfoWindow. Unfortunately this isn't reproducible 100% of the time which makes it even more suspicious to me. Please try to open/close some of the InfoWindows to actually see it. I guess it is somehow related to our CSS. I read a lot about related distortions but nothing seem to fit my specific case. The "white/gray stripe" on the very left side of the map itself is reproducible almost 100% of attempts trying to reproduce. All "white/gray stripes" are 1px in width and they disappear if you either pan the map or scroll it out and back into the viewport of the Browser window. I'm testing with Google Chrome 22.0.1229.79/Webkit.
Doesn't seem to affect FF11.0/Gecko. Tried it just yet and while Chrome shows described behaviour, FF doesn't
My guess is that it is being caused by OverlappingMarkerSpiderfier. Can you build a simple test that displays your points and InfoWindows without using OMS and see if you still have the issue?
i'm trying to use overlays on a custom google StreetView Panorama.
I was able to simply put one on my pano, but the position is totally random (i made some attempts until the effect was alright), and the change of rendering mode (in chrome which renders as a sphere) changes the effect.
The problem is clear: the custom panorama has no information about its dimensions (it has only a LatLng), so the relative positions are wrong.
Am i missing something?
The only thing i need is to put some clickable labels on the walls of a room, which modify themselves along with the rotating panorama. I searched a lot, but my efforts were inconclusive.
Mapsicle seemed to do what i needed, but if i understood correcly it's a dead project.