I have been following this block example to show nodes and paths as landmarks and roads. I have successfully loaded the map and I am able to zoom in enough to a "street view" level. I have also successfully added nodes following the example.
My problem, however, is that my paths are mostly straight PointA-to-PointB paths. I have been implementing them as M(sourcex),(sourcey)L(targetx),(targety)
before I added the map. Now, the paths won't show up unless the width was set to EXACTLY 0.9 / zoom.scale()
which does not work for me. I need the paths to vary in width depending on data but even slightly changing 0.9 to 1, the path will disappear again. I'm not sure if it's because of the scaling of the map but no matter what zoom level I am in, the path doesn't appear anymore.
I tried manually editing a path in the example just to compare. From M(sourcex),(sourcey)L(target1x),(target1y)L(target2x),(target2y)...
to just M(sourcex),(sourcey)L(target1x),(target1y)
and the path disappeared too. (Edit: Tried it on mbostock's example too with the same result.)
I found a workaround where I duplicate the target in the path M(sourcex),(sourcey)L(targetx),(targety)L(targetx),(targety)
. I am able to change the stroke-width of these paths however, when I add an arrow marker, the arrow head is skewed.
Here's a jsfiddle to demonstrate my problem: https://jsfiddle.net/mxzepdap/33
There are 2 paths on the jsfiddle:
Path 1: Normal M(sourcex),(sourcey)L(targetx),(targety)
- Doesn't show unless stroke-width is exactly 0.9 / zoom.scale()
- Has arrow heads pointing at the right direction
Path 2: Repeated M(sourcex),(sourcey)L(targetx),(targety)L(targetx),(targety)
- Shows path whatever width is set
- Arrow heads are skewed possibly due to the repeated point on the path. Arrow heads are crucial to what I'm doing so this is a big no still. :(
You can toggle the path widths by using the 2 buttons above the render.
Most of the examples I've seen aren't point-to-point paths and doesn't zoom in to a street view level so I'm really lost at this. Any help is greatly appreciated.