One of the things currently not finished yet in the beta API is a drawing tool. I talked about DIY editing, but you can also DIY the drawing tools you may want to use for editing.
So let’s think about the steps needed to draw something on the map.
You will have the following steps to draw a line:
- Click on the map.
- Draw a line while the mouse hovers over the map.
- Finish drawing the line when you click on the map again.
There are a couple of things we need to keep in mind. You can listen for "click" events on the View, but it doesn’t have "mousemove" events yet, so we need to get a little creative on this one, but it’s no big deal, all the tools we need to mimic it are right there in the API.
The way we can work around the missing "mousemove" event is to listen for the native "mousemove" of the Views container and convert screen points to map points. There should be little more math here usually to take into consideration padding and margins, but this isn’t a math lesson.
view.toMap(evt.offsetX, evt.offsetY, mp2)
The logic to draw a line is pretty simple. You can expand this even further to draw a polygon and even use these results to edit your data on the map.
Here is a sample of this in action.
Draw Lines on jsbin.com
As you can see, beta is beta, but that doesn’t mean you can’t apply a little elbow grease and get stuff done.