I am working with a map on which I put an overlay to highlight certain areas, now I want to zoom the map in and out and reposition the overlay so that it is still over the same region. The map is displayed in a JavaFX WebView and the overlay is a polygon that is drawn into a group that is in a pane on top of the WebView.
Now I am trying to calculate the correct position for the overlay, but I can't figure out how. Does someone have some experience there and maybe can point me into the right direction ?
Related
I am using three.js and created a basic scene with a few meshses rendered with some basic lighting . My torus geometry was previously pointy with few polygons but I was able to smooth it out by adding more segments but now I would like to straighten the lines out in my cube. They seem jaggy. In the pic I am including my render on the left seems a lot jaggier then the example I am following on the right. I have even set width and height segments to very large values (200). Any Ideas why the aliasing/jagginess?My render on left, example on right
I am rendering a data as shown below using cluster analysis.
As you can see that ports in the range of 0-200 are clubbed together. Is there a way to zoom in on the scale when I mouse over a coordinate and thereby redrawing that section of the graph again in a zoomed window. What i mean is that for the coordinates shown in blue circle, when I mouse over, I want the x, y axis redrawn for 0-10000 using a different scale so that overlapping circles move apart. Is it possible ?. I must confess I find matplotlib little challenging and my apologies if my question is little cryptic. thanks for the help!
Assuming youre using pyplot then this functionality is built right in to the pyplot output.
See the following from the matplotlib documentation.
The Zoom-to-rectangle button
Click this toolbar button to activate this mode. Put your mouse somewhere over an axes and press the left mouse button. Drag the mouse while holding the button to a new location and release. The axes view limits will be zoomed to the rectangle you have defined. There is also an experimental ‘zoom out to rectangle’ in this mode with the right button, which will place your entire axes in the region defined by the zoom out rectangle.
If you need to enable zoom to rectangle functionality without actually clicking then this will be possible by creating a transparent figure positioned in a location of your choice on your plot and then initiating a matplotlib event to be handled when the mouse hovers over this area. This functionality is not built in and will require customisation.
Detail relating to event handling on mouseover events can be found at this URL
I have a map which pulls in GeoJSON polygons and points.
I represent these using the standard Leaflet methods to create SVG and html markers respectively.
To get an idea: http://i.imgur.com/GSJSZIc.jpg
SVG = blue, markers = green.
Leaflet creates 'panes', div.leaflet-overlay-pane for the SVG, and div.leaflet-marker-pane for markers. The leaflet-marker-pane (bordered in red) covers half the viewport and has a higher z-index then the leaflet-overlay-pane, thereby making the SVG polys under it unclickable.
If I set the zindex of the overlay pane to be less than the marker pane, all the markers are unclickable as the overlay pane covers the whole view port.
I've read some things in the Leaflet Github issues about createPane(), but so far haven't seen it working. Should/will this be something which fixes this problem? ie, puy all markers and SVG polys in the same pane/div.
For the time being I've set the marker pane to be 1px x 1px. This seems to work fine, leading me to ask, why would the marker pane ever be set to half the viewport size?
you have to add your svg into leaflet-marker-pane, for that just use option 'pane' when you add your SVG to the map
L.svgOverlay(svgOverlayElement, map.getBounds(), { pane: 'markerPane' }).addTo(map)
I have done zooming in SVG chart. Please refer below screenshot.
above screenshot series is zoomed state.i used clipping concept to hide the outside lines from chart area after zooming.
i need to do panning here ? how can i implement like google maps. when i start pan to move the series and see the zoomed chart of another area.
how can i perform "translate" operation for path element in SVG. element in the screenshot is called series (i.e. data points /line).
i need to move the element zoomed area based on mouse movec(i.e. like scrolling the hidden content).
Is "translate" attribute is used to view the other zoomed area ? how can i perform "translate" in path element that will make the panning.
Normal chart screenshot.
Zoomed Screenshot.
Please refer below link.
http://www.cyberz.org/projects/SVGPan/tiger.svg
Thanks,
Siva
First be sure:
Download svgpan.js file in your project location
is must be the right place in your code
You must add this: xmlns:xlink="http://www.w3.org/1999/xlink"
I'm using Raphael to draw rectangles. Whoo-hoo!
Is there a way to right align contents of an SVG file?
Not just text, but shapes as well?
I can do the math and get the computed x value, but I'm looking for the lazy-simple solution.
Thank you.
There isn't. Unlike normal web pages where the window is resized and the content flows into it, when a Raphael paper is resized, there is no sort of flow, so aligning is irrelevant. Instead of setting align=right, you just set the right edge to be the same position you set the width of the paper to be. If you enlarge the paper, you can scale the contents with a single operation. Once you've set the position of the right edge, you've essentially set the align position. You don't need to re-set all edge values when the paper changes size, you just scale everything with one command. Hope that helps