I want to draw a curve line. I want o make a path. Is it possible to draw like a path in React.js?
Related
The goal
I have to add a PNG overlay over an open street map. The PNG is a drawn road and I need to possisionate it over the real road.
What I have now
I have my PNG draw and 2 coordinates to place it over my map. The bottom left corner and top right corner.
What I found
I already found the software MapTiler which can display an image and the map side by side or one over the other and place some point to possisionate it.
The problem is that it generates a folder that contains different splitted image and data. Is there a way with MapTiler to generate the png with the coordinate ?
Is there any other software that can do this ?
Its not clear on why you'd use MapTiler. Less is more. Keep it simple, make it easy. I did the same thing, but instead I played around with transparency to ensure I was able to align things up. Obviously, I'd do the line up by adjusting the lat/lon numbers in the code. It's very precise and easy to do.
final output:
and here are some code snippets:
// Overlay a map of Bootleg Canyon
// Constructs a rectangle from the points at its south-west and north-east corners.
var BootlegCanyonimageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(35.9691, -114.8824), // lower left
new google.maps.LatLng(36.01217, -114.8468)); // upper right
var BootlegCanyonMap = new google.maps.GroundOverlay(
"images/bcmap.png",
BootlegCanyonimageBounds);
BootlegCanyonMap.setMap(map);
BootlegCanyonMap.setOpacity(0.75);
I have a path (which is essentially a line). I am able to draw an arrowhead with the help of marker-end attribute of path. But now I want to make a + sign in the middle of the path. I think for that purpose, marker-mid should be used.
Here is the code and output when I use marker-end.
Here is the code and output when I use marker-mid.
marker-mid specifies the marker type that should be placed for the points in a path that are not the first or last point.
In other words, if you have a path that consists of four points (thus three lines), marker-mid markers will be placed on the middle two points.
There is currently no way to automatically place markers in the middle of a line segment as you wish. You would need to either place an appropriate shape at that point yourself, or split the line into two half-lines.
SVG 2, which is still in development, will likely have this feature, but you can't do it yet.
I need to draw a BitmapData into an other one and the result should be a tile formed by 4x the source at 1/4 the size.
Right now I am using 4 calls to BitmapData.draw() with a matrix to scale down the source and a clip rectangle to draw in each corner, but I'm wondering if the same result could be achieved with a single draw call.
Thanks
Thomas
I would like to create a world map in 3D perspective like this, including the shadow:
http://www.google.com/zeitgeist/2012/#explore
(Please wait 3 seconds for it to animate to its position)
On top of the world map, I would like to place simple red cubes (also casting shadows) instead of the markers in the above example.
What web standards/frameworks would you use?
In pseudo code, how would you achieve the above?
You can do it with pure webGL, but if you wanna code it fast than Three.js
create plane
apply world map texture
pixel-shader displacement for country shapes and shadow
red cubes
render shadow map for directional light and apply it to plane
I'd like to replicate the outline effect shown on this map: https://maps.google.co.uk/maps?hl=en&safe=off&q=switzerland&ie=UTF-8&hq=&hnear=0x478c64ef6f596d61:0x5c56b5110fcb7b15,Switzerland&gl=uk&ei=PXO3UK3UPMS1hAfmjoDgBQ&sqi=2&ved=0CKQBELYD
In other words, I'd like to draw a path that:
is shown along one side only of the path defined in GeoJSON
fades in transparency from the outer side of the path to the inner?
Are either of these things possible with the Google Maps API?
I believe to do this you would need to create a custom overlay - which can be a somewhat daunting task. See the documentation on Custom Overlays for a basic example.
Were I implementing this, I would create an overlay which used HTML5 canvas elements as tiles.