I am using leaflet 1.7.1 and I need to put custom markers on map.
I am currently using circles (as in: L.circle([lat, lon], {radius: rad}).addTo(map);) as my markers (note radius is significant and should be in meters).
Now I need to add a "direction" to this circle essentially displaying something like:
I actually need to implement some L.directedCircle([lat, lon], {radius: rad, heading=45}).addTo(map);, but I don't know how to do that.
I also tried looking for plugins, but nothing seems to do what I need.
Note that the image above is just an example, I'm open to other options but that seems very simple (it's just a 4-points SVG poliline) and effective.
If that matters I'm using leaflet through pyqtlet2, but I'm prepared to "get my hands dirty" using directly javascript.
Any help appreciated.
Related
I'm kicking around an idea for a side project and am looking for advice on which direction to go in terms of technology. I've done some research already, but am still fairly confused as to what the realistic options are.
I'd like to make an interactive map based on a fictional world (think Middle Earth), including a timeline filter and a details section for additional information on an event or location.
Desired Features:
map on the left
details pane on the right
timeline slider/filter at bottom
Territories
color for political affiliation
displays details in details pane
labels
labels for cities
Hurdles:
Get a clean map image to work with
Map image into intermediate format (svg, geojson, topojson?)
Display map on webpage, style map, add animations, etc
Technologies
SVG
I'm pretty sure I could code all of this in SVG using events and boundaries. I've already been able to create SVG Paths from the image using GIMP, so converting the map into an SVG file seems plausible.
The issue with doing it this way is I would end up doing all the work the hard way when there seems to be lots of frameworks for this kind of thing already.
Kartograph
La Bella Italia is a very nice example and would serve as a good starting point. I love the trade route animations and the border styling with the glow filters.
The bonus here is that I know I can make an svg map, which is all this would need to get up and running.
My issue here is it doesn't seem like Kartograph is as rich of a platform as D3.js. I'm not sure if I can double dip and link some D3 stuff with the kartograph events. If I could, that might be the solution.
D3.js
The sliders, animations(hover and selection), and topojson seem like they would be perfect. But the main issue I have here is getting my image converted into a GeoJson format. From what I can tell these formats are strictly for Real World maps, using longitude/latitude.
So there you have it! I'm hoping there is some good news on how I might convert my map image into topojson so I can enjoy the benefits of D3.js. If not, I suppose I could just try kartograph and wire the events up with D3 controls.
Thoughts?
I'm currently writing my master thesis and I have the same topic like you had these days. I called my project Arda Maps. Feel free to ask me anything if have techonology questions.
I'm using the following frameworks/tools in my project:
QGIS
JQuery
D3.js
GeoJSON/TopoJSON
TimeGlider
is it possible to create a stroke with a dynamic width with SVG? I want to achieve a Calligraphy look like here, here or here.
Is this even possible? It seems customization of strokes in SVG is fairly limited. Even gradients in strokes seem to be non-trivial (see here).
There is a proposal to add into SVG standard a mechanism, that does exactly what you want:
http://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Variable_width_stroke
http://lists.w3.org/Archives/Public/www-svg/2013May/0041.html
There's even an example implementation available here:
https://rawgit.com/birtles/curvy/master/index.html
It is, however, by no means official and we cannot be even sure it'll ever be.
Until then you'll need to stick to Bezier curves and object filling:
You can also use calligraphic fonts, for example - Tangerine available on Google CDN:
This approach requires less work since you don't need to draw everything from scratch, but then again, using third party fonts leaves you with little control over the final result.
You can't dynamically adjust the stroke of a path element. However you could draw a path, use a fill color on it instead of stroke, then double back upon the letters at a slight distance away from the original line.
Also, if you are using the SVG on the web then you can use css fonts on text elements. There are some pretty good cursive fonts that you can use for free... just check google web fonts.
I am trying to make a tool for my website which traces over Japanese characters, showing the stroke order etc.. something like this: http://www.chinesehideout.com/tools/strokeorder.php?c=5pel
I have made a bunch of SVG files in inkscape, which are made up of just curves, one for each stroke of the character. I have then imported these into Raphael using the raphael-svg-import: https://github.com/wout/raphael-svg-import
The SVGs are displaying perfectly, however I want to animate them.
My question is: Is there a way to take each path from the SVG in turn in Raphael, and then animate/stroke them? If so..how??
If you need any more info please say!
Thanks
EDIT: Perhaps I should clarify, when I say stroke I mean progressively draw the line, starting from the first point and ending at the last. At the moment it draws all paths simultaneously and draws the whole of each path at once.
The technique people use in svg for doing this is outlined in this answer. It's probably possible to adapt that to Raphaël, though the Raphaël documentation doesn't list stroke-dashoffset.
Raphaël has a method Element.getSubpath(from, to) that can be used to get only part of a path, that should probably also be an option.
Is there any way to bring about the bevel effect like the one in photoshop in svg or by using an external js like Raphaeljs.? I tried in raphael but it doesnt look that good.
There are so many "Photoshop bevel effects", so my advice would be to pull up Inkscape, create the bevel effect you want, then look the resulting SVG code and pick what you like.
I am attempting to apply an SVG filter (Gaussian blur) to only a portion of an image (i.e. the background). I have achieved the effect by appending a clipped SVG image with Gaussian blur applied at the same position (to make it appear like the Gaussian blur is applied to the original image).
This is obviously inefficient and I'm looking for a better method. After reading some SVG docs and examples it looks like the enable-background attribute is needed but I would greatly appreciate some help on how to actually implement it!
Edit:
An example of the effect I'm looking for: http://img695.imageshack.us/img695/92/chromeblur.png
Here is a good description of how it should work in SVG
http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/Filters2.htm
But SVG support is still incomplete in all common browsers. Especially the filter effects on backgrounds using the in="BackgroundImage" and enable-background attributes are not supported by any common browser.