D3 Maps + Drawing Shapes + Drag&Drop

Jul 15, 2009 at 12:32 PM

I am building an application using Map component from the D3 library. I like it very much - great job guys!

What I need to do is to draw custom shapes, with corners (anchor points) hooked to the specific Geographic Coordinates (as shown in the pictures). 

Free Image Hosting at www.ImageShack.us

After I zoom in or zoom out, the anchor points should stay exactly in the same coordinates and the symbol should rebuild itself accordingly. Additionaly, it should be possible to edit the symbols visible in the map (grab the anchor point and move it to change the shape of the symbol). You have an example of DraggablePoint object in the solution, but you move the whole component across the map. Im my case I need to move just one end/corner of the shape that I draw.

So, just to summarize: I need to be able to put custom symbols (consiting on many shapes) on the map in the specific coordinates and I need an ability to edit the shape (or just some parts of the shape). The shape should stick to the given coordinates while panning/zooming map.

Any ideas on how to implement this? Any help will be appreciated.


Jul 15, 2009 at 7:45 PM



That's what I've wrote for you - http://cid-eaf0a921258b5980.skydrive.live.com/self.aspx/.Public/D3/EditableShapes.zip

This simple app enables you to display and edit interactively polygons and polylines.

I'm leaving the other part of you application to you)


If you have some questions, do not hesitate to ask them here.


Best regards,




Jul 16, 2009 at 7:33 AM
Edited Jul 16, 2009 at 8:29 AM

Thanks Mikhail!

That's a very good example. This is almost what I need ;). Just additional question. Is it very difficult to make this example work for shapes built of WPF components like Rectangles, Lines, Ellipses (from the System.Windows.Shapes namespace) or it only works for Path based objects?. Bascally, I already have my own library with number of different symbols built using WPF components and I want to make them work with the map, just the way ViewportPolygon or ViewportPolyline do.



Jul 22, 2009 at 5:12 PM

Hi Pawel,


You should write your own editor in adorner layer (as if I have done this).

Ellipse's ViewportX and Y coordinates (center on viewport) can be easily bound to draggable point. So it is just a question of your's work, nothing more, there is no magic in it)

Rectangle can be edited if you have two draggablePoints in its opposite corners, which'll adjust its position and size with special case.


This can be done easily, but it's work not for me, but for a creator of such a GIS application.


Best regards,