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
Related
I'm working in QGIS but I can also use ArcGIS if there's a solution that works best on there.
I have a shapefile with certain plots of land highlighted and I plan to calculate the distance of features to the borders of these plots. But the plots have the roads and rivers going through them as gaps in the polygons. Like this:
Of course, this messes with the distance calculation I want. The goal is to create new polygons that just the outline only. I have tried the hole function in QGIS. I also tried buffering with dissolving then reversing the buffer. What other methods might work to fill in the gaps?
I am in the midst of reimplementing an interactive heatmap from svg to canvas in javascript. I was wondering if anyone had any ideas for how allow someone to select an area and have it zoom into that area using html5 canvas and js.
Many thanks,
Tom
Disclaimer: Because you haven't provided any code I am going to stick to Strategy here :)
Method 1: DIY
First thing you will have to decide is what your resolution or cell size in your case is and what happens to a individual cell when you zoom.
Case 1: Your cell size increases, and you just multiply the cellsize by the factor of zoom and clip the area that goes out of bounds of what user selected.
Case 2: You want your heatmap cells to be pixel sized in which case when you zoom in, now each of the previous pixel(or cell) will have to interpolated and you will increase the resolution by the factor of zoom. Of course you will have to re-run heat map function for that region with a greater resolution.
Once you have one of the two strategy figured out, Implementation on JavaScript it actually quite simple.
You hook into drag-event. and let users draw a rectangle to show them the reference area they are zooming into.
Then you calculate you zoom factor based on the ratio of the drawn rectangle, to the original image or the container. This becomes your zoom-factor
Now using the zoom factor you generate a new image, based on Case1 or Case2 depending on which you go with
Finally you replace existing image with old one.
Viola! Zoom!!
Method 2: Use a Library!
Use a awesome library like OpenLayers 3, and just load your heatmap into it. Here's an Heatmap Example done in OpenLayers 3. Zoom pan now come for FREE!
Hope this helps.
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.
My first KML project was an animated map of the Washington DC Metro system (see Animating Metro with KML and Google Earth). Unfortunately, where Metro lines share the same track, only one color prevails. The real map shows a wider line with both colors side by side.
Is there a way to draw a line in KML (Google Earth) with two side-by-side colors? I've seen a way to have a different color on the edges of the line, but that's different.
I could cheat by changing the coordinates of each station, but aside from computational difficulties, I'd have to continuously changes to positions every time the user zooms, to prevent a gap between colors (or an overlap).
Other subway systems show more than two colors running alongside each other, so an option to show multiple colors would be nice. And this is not really a gradient, as the colors don't fade together; they should be distinct, assuming the pixel width is wide enough.
This is probably a feature request, though surely someone else has run across this problem before Google Earth v6? Would love to be able to do this, or find a good workaround in the interim.
Michael
http://www.mvjantzen.com/blog/
The short answer is no, although you could probably create a custom MVC object that renders the line for you as desired (i.e. you would not need to alter the Kml)
http://code.google.com/apis/maps/articles/mvcfun.html
That said, your cheat method could work too - and I would disagree that
"...I'd have to continuously changes to positions every time the user
zooms, to prevent a gap between colors"
You can set the <gx:physicalWidth> property which allows you to set the width of a LineString to be in meters, rather than pixels.
https://developers.google.com/kml/documentation/kmlreference#gxphysicalwidth
In the case of your track example, this means you can set the width of the track to match the underlying imagery no matter what altitude the end user views it from.
I have an arrow image that I would like to put on a v3 Google Map and have it point to a specific direction (using bearing from a particular Lat/Long point). Is this possible?
Thanks.
There are two ways to tackle this:
Generate 360 arrow icons, each rotated by 1 degree, and then call the relevant one according to the direction required. You may want to call the arrows something like "arrow_123.png" to indicate 123 degrees.
You will often not require 1 degree precision. In that case you may want to generate just 36 icons at 10 degree increments, for example. Then simply use the icon that is closest to the nearest representation.
You can also use the HTML 5 canvas to rotate the icon by an arbitrary degree as in the following Stack Overflow post: Show wind direction on Google Maps. However note that this will not work in browsers that do not support the canvas element, such as Internet Explorer.