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)
Related
How can I place a complex SVG image (with css-styles!) geo-referenced over an openlayers map so that the document's CSS styles are used with rendering the SVG.
A regular ImageLayer does a fine job of showing the georeferenced svg on the map as an image. But because it is an image, the CSS of the document has no effect on the rendered SVG
The SVG Layer example on the other hand places the SVG into the DOM and makes it react to the document's CSS and reacts when you change the CSS. But it always maps the SVG over the whole planet and seems to hide any layer I place under it.
To give you an idea of the use case: we have an externally generated SVG with several 'groups or layers' in it representing different aspects of infrastructure. This svg has to be put correctly over a map (like we can do with the imagelayer), but we want to be able to selectively show/hide the different 'groups or layers' that are within the SVG.
I guess in the end we would be needing something similar to ol/layer/Image/ImageLayer to happen in the SVG-layer example.
Any suggestions about how to approach this would be very welcome, but working code is also OK ;-)
In the example the image width is 360 degrees and the center is at [0, 0]. For a smaller extent you would need to use the appropriate width and adjust the center used in the transform https://codesandbox.io/s/lucid-poitras-i1qyb?file=/main.js Use an opacity setting to avoid completely hiding the base layer.
I'm trying to use d3's brush control. All works good except the rect.background of the brush is not expanding to fill the whole SVG, thus not allowing me to use the brush on the most right and bottom areas of SVG (which are not covered with background).
This jsFiddle illustrates the problem (scroll to the right and try using brush there) I've outlined the .background rect with the border.
What is the reason of this? And how to make the brush control to work all over the SVG?
Here are the facts:
I have a div with rounded corners containing an SVG element with rounded corners that creates a circle.
Inside the circle (SVG) I am drawing four polygons that make out different circle quadrants.
The polygons respond to hover by changing color - so that when a user mouse is over a specific quadrant in the circle - it lights up.
The SVG and the div containing the SVG both have overflow:hidden CSS directive.
When I mouse over an area outside the circle (but inside the clipped rectangle of the polygon) - the corresponding quadrant lights up...
Why is the element responding to mouse over even though I am hovering over a clipped area?
How can I make sure this will not happen? (without creating occluding transparent elements - I want to be able to touch something in the layer below...).
EDIT:
added fiddle as requested:
http://jsfiddle.net/JVQD8/
In the fiddle - note that the surrounding div is bordered with a red line.
the polygons (in blue) are clipped by the red border (div), and when you hover over a polygon it becomes a lighter shade of blue.
The polygon highlights outside the area of the red circle border if on the polygon.
Edit:
As commented by Robert Longson, there is no problem at all in Firefox.
However, in chrome the problem is as described, and in IE the SVG polygon is not even responding to hover.
So the question about chrome remains as is - only in chrome. How do i know if this is a bug that i should report, or if this is a designed behavioral difference?
Try experimenting with the pointer-events attribute.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pointer-events
In XAML there is the concept of a [Border] object that behaves much like an SVG rectangle except that a XAML [Border] can contain a child element.
So I could create a [Border] with a black stroke and inside it have another border that had a white stroke and a fill of Green.
This gives the the look of a single rectangle with both a black border & then an inner white border.
How can you create this in SVG?
You need multiple paths. In this particular case you could 'cheat' by having the same path twice, with the lower path having a larger border that appears 'outside' the upper object; in general, though you will need to create paths with offsets if you want this behavior.
I created a set of svg glyphs for a font I am building, in Inkscape.
They look fine in Inkscape, and fill the full canvas. But when I import them into FontForge, they appear tiny - around 1/10th of the size they should take up.
Can anyone explain why this is happening, and what I can do to fix it?
This happens because your artboard in inkscape has many more units than the font's cartesian grid space.
Open Inkscape
From the File menu, select Document Properties.
Set units to pixels (px) and document dimensions to 1000 x 1000, click OK
Set a horizontal guide at 200px
Draw a glyph – the hardest part! :-)
Save the drawing as an SVG
Open FontForge
From the File menu, select Import, chose SVG, find your drawing, click OK
Inkscape now has a template, 'FontForge Glyph' that should make this more convenient.
There are some bugs in the FontForge.This is a way to solve it.