I’m currently using the ‘GroundOverlay’ function within a KML file to display an circular image. I know the circle is 48 degrees in diameter, and I want it to look like a circle when I overlay it on the earth. Rather than being a perfect circle though, it’s distorted, most visibly at the poles. I think the reason for the distortion is that GoogleEarth assumes my original image used a map projection, so GE “unprojects” my image, creating the distortion. Is there a way to overlay my circular image as a circle through KML or the maps API by turning off the projection? Or is my only option to project my circular image into a simple cylindrical projection before I call GroundOverlay on it? I'd really prefer the first option if it exists.
Related
I want to create a tileset background for my html 2d game with svg. I have a tileset image and want to render a map based on these tiles on the html page. With canvas it is very easy to do this (read [this][1] for example). But for SVG I didnt find an easy way. The only solution I found out is a use a clip path for every tile and it looks very complex. Are there more straightforward ways to render single tile from the tileset image with SVG?
For a given geoJSON file, which in this case is the county boundaries for Illinois, I'm overlapping the google.maps.Data() layer and D3.geo.path() with mercator projection, and I notice a displacement between both projections.
The google data layer (in red) is an object which displays in the same canvas as any google overlay (polygons, markers, polylines, etc) while the D3.geo.path() (in blue) shows up in an SVG container I overlap on top of the google container.
As you can see, the westernmost counties show the google borderline to the left of the D3 line, while towards the east, the D3 is the one displaced to the left.
At first I thought I was mis-centering the SVG container, but this example shows that the displacement is not uniform, so I can't fix it playing with SVG transform matrix.
This fenomena happens to any geoJSON, no matter the zoom or the place of the world I try with. Now, this is strange, because if d3.geo.mercator() was mistranslating coords to pixels, the miscalculation wouldn't be uniform. It isn't an approximation issue either, because it doesn't vary with zoom.
Is this just a minor issue with different projection engines? I wouldn't expect google, d3, leaflet and openlayers translating a coordinate pair to the exact same pixel, but I don't want to ignore this one for I might be doing somethign wrong.
Any ideas would be appreciated. #mbostock, I summon thee.
EDIT: It took me a lot to come out with a self-contained example, but it helped me understand better what was happening under the hood.
Please see http://bl.ocks.org/amenadiel/ba21cbada391e053d899
i'm trying to render geometrical shapes over uneven terrain (loaded from heightmap / shapes geometry is also generated based on averaged heights across the heightmap however they do not fit it exactly). I have the following problem - somethimes the terrain shows through the shape like showed on the picture.
Open Image
I need to draw both terrain and shapes with depth testing enabled so they do not obstruct other objects in the scene.. Could someone suggest a solution to make sure the shapes are always rendered on top ? Lifting them up is not really feasible... i need to replace the colors of actual pixel on the terrain and doing this in pixel shader seems too expensive..
thanks in advance
I had a similar problem and this is how I solved it:
You first render the terrain and keep the depth buffer. Do not render
any objects
Render solid bounding box of the shape you want to put on the terrain.
You need to make sure that your bounding box covers all
the height range the shape covers
An over-conservative estimation is to use the global minimum and maximum elevation of the entire
terrain
In the pixel shader, you read depth buffer and reconstructs world space position
You check if this position is inside your shape
In your case you can check if its xy (xz) projection is within the given distance from
the center of your given circle
Transform this position into your shape's local coordinate system and compute the desired color
Alpha-blend over the render target
This method results in shapes perfectly aligned with the terrain surface. It also does not produce any artifacts and works with any terrain.
The possible drawback is that it requires using deferred-style shading and I do not know if you can do this. Still, I hope this might be helpful for you.
I'm trying to find (without luck so far) any examples of Google Maps that are shown in a shape that is not the standard rectangle.
I know that ultimately the map IS a rectangle, but specifically I'd like examples of how I could show graphics on top of that rectangle to give the illusion that the map borders are a different shape.
To explain further what I mean, imagine a page with a black background with a standard Google Map (rectangle) in the top left. Now imagine placing a DIV over the bottom half of the map, where this DIV contains half a black circle and a transparent background. The purpose would be to give the illusion that the map has a curved bottom edge.
I'd then want to do something similar with the remaining 3 sides so that the map no longer appears like it's in a rectangle.
To explain further still, I'm going to be given a web page template which will have a shape - not a rectangle - into which I'm expected to put a Google Map...
Importantly, I'd still need to be able to 'grab' the map with the mouse and move it about within its 'new shape'.
Any advice would be appreciated - thanks.
I'm currently using Google Maps API and I'm open to try out other free map APIs to accomplish my task.
In one of the projects I'm working on, I need to be able to overlay multiple shape overlay layers on top of one another. My initial thought is to have the first overlay layer to use different shades of solid colors. For subsequent overlay layers, I plan to use different color-coded patterns... ex: the second overlay layer uses color-coded stripe pattern and another overlay layer uses color-coded checkerbox pattern. This way, I can stack these overlay layers to represent multiple things. For the first overlay layer, I'm able to create irregular shape boundaries using Polygon objects and I'm able to set different fill colors on the polygons depending on the associated values.
After digging around, it seems like the Polygon object in Google Maps API only accepts fill and stroke colors, and I don't seem to be able to set custom pattern on a Polygon object. I was hoping it will at least take a PNG pattern file but it doesn't. The closest things I could use is GroundOverlay object but that's not going to work for me because it accepts only 2 coordinates (top left and bottom right, I believe) whereas I need to create custom pattern overlays on irregular shapes.
Can I accomplish this using Google Maps API, or any other map APIs (Bing, Yahoo, etc)? Are there any third party APIs that allow me to integrate custom pattern overlays on Google Maps?
I don't believe any of the APIs you mention support patterned vector shape layers. The two options I can think of are:
To use fill colours that are semi-transparent. Let's say you have a layer that has semi-transparent red polygons, and another layer on top that has semi-transparent blue polygons - the area of overlap between them will be filled with the combined colour (i.e. purple in this case). Bing Maps certainly supports an alpha channel for polygon fills, and I suspect Google Maps does too.
Rather than using a vector shape layer, render your data as raster layers, using whatever fill pattern you want. Cut these layers into 256px x 256px tiles numbered according to the quadkey tile numbering system and place them on the map as custom tile layers. (i.e. the way that the built-in road map and aerial tiles are displayed). If you render your tiles as PNGs, you can stack several layers on top of each other and have transparent (or semitransparent) areas to show through the data in the layers underneath. Depending on what the source of your data is, you might find tools like Mapnik or Geoserver useful to create the tile layers.
If you can live with just a stroke pattern, as opposed to a fill pattern, the latest version of the Bing maps sdk allows you to set the strokeDashArray when creating polygons. Maybe that will suffice for identifying the different shapes you have to overlay on the map.
Hope that helps...