Drawing Library - some thoughts

[Qunhuan]

Hi,

I have been playing with the drawing tools example and found it very well designed, neat, capable and functional. However, I think the current design MAY, to some extent, limit it to client side and geometry based apps, rather than client/server and business based apps (although we could provide customised marker, which is good but not enough).  

I have put some thoughts in order to expand the applicable fields (could be wrong but hope to put my purpose across, or let me know if any of them is already achievable):

1.    have an accessible id field for each overlay, either managed by map or user, so that the developer could easily distinguish between each overlay. This would be useful, for example, if we want to correlate an overlay on map screen and its copy in the backend database when editing.

2.    Expose the functions which are called when we click the drawing icons/buttons on map (MARKER, POLYLINE, RECTANGLE, CIRCLE, POLYGON), so that developer could also call them through other means, e.g. via menu items if they wish, without using icons/buttons on map.

3.    Provide customisation for map icon/buttons, i.e. images and titles (shown when mouseover), so that we could use “business” based map buttons, rather than “geometry” based map buttons (e.g. “Plant a tree” vs. “Add a marker”).

Make sense?

Qunhuan

[Enoch Lau (Google Employee)]

 1.    have an accessible id field for each overlay, either managed by map or user, so that the developer could easily distinguish between each overlay. This would be useful, for example, if we want to correlate an overlay on map screen and its copy in the backend database when editing.

To achieve this, you can simply attach the id as a property on the overlay object:

     polygon.customId = 1234;

 

2.    Expose the functions which are called when we click the drawing icons/buttons on map (MARKER, POLYLINE, RECTANGLE, CIRCLE, POLYGON), so that developer could also call them through other means, e.g. via menu items if they wish, without using icons/buttons on map.

This is already possible. Firstly, turn off the buttons on the map by specifying drawingControl:false in the options of the DrawingManager. Then, you can change the drawing mode programmatically by calling setDrawingMode on the DrawingManager object: http://code.google.com/apis/maps/documentation/javascript/reference.html#DrawingManager

 

3.    Provide customisation for map icon/buttons, i.e. images and titles (shown when mouseover), so that we could use “business” based map buttons, rather than “geometry” based map buttons (e.g. “Plant a tree” vs. “Add a marker”).

You can implement your own custom control on the map: http://code.google.com/apis/maps/documentation/javascript/controls.html#CustomControls

This control can have buttons with your own icons and tooltips, and these buttons, when clicked, would cause setDrawingMode to be called on the DrawingManager object to change the drawing mode, as above.

Enoch 

[Qunhuan]

I see and silly me!

Enoch, thank you so much!

I suppose if I want to have two drawingManagers, say, one drawing white circle, another drawing black circle, I could arrange it from menu.

One more question, can I have two such drawingManagers on map at the same time (so that the user could choose to use either menu item or corresponding icon). I guess the issue might be if the drawingMangers knows how to align the icons, right?

Qunhuan

[Enoch Lau (Google Employee)]

It's probably easier to have one DrawingManager, and then have buttons that change the styles of the circles drawn. You can change the circle styles like this:

    drawingManager.set('circleOptions', { strokeColor: 'black' });

[Q Mei]

Yes, I agree with you, Enoch.

 

I hit a small problem with drawingManager: I can’t seem to control the stroke weight and color together. The stroke’s weight uses 0 in your demo, which works normal when color is changed. However, if I set the weight NOT  to 0 (e.g. 1), then the stroke color always appears to be black (tried for circle, rectangle and polygon), while fill color works normal. However, if not using drawingManager, the stroke color works normal when using Circle/Rectanle/Polygon class.

 

Is this a known problem or I did something wrong?

On 6 January 2012 00:29, Enoch Lau (Google Employee) <enoc...@google.com> wrote:

It's probably easier to have one DrawingManager, and then have buttons that change the styles of the circles drawn. You can change the circle styles like this:

    drawingManager.set('circleOptions', { strokeColor: 'black' });

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/uAqsHMGtNSwJ.

To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

[Enoch Lau (Google Employee)]

Would you be able to post up a demo that illustrates this please? Thanks.

Enoch

[Q Mei]

Yes, I will extract the code and find a host site and setup a demo page (currently it is my spare time project and runs inside my laptop).

May take a little time. 

Qunhuan

On 8 January 2012 21:33, Enoch Lau (Google Employee) <enoc...@google.com> wrote:

Would you be able to post up a demo that illustrates this please? Thanks.

Enoch

--

You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/DQPYxT4YpXAJ.

[Enoch Lau (Google Employee)]

ok, sure.

Just a stab in the dark: are you changing the stroke weight like this?

    drawingManager.set('circleOptions', { strokeWeight: 1 });

If you are, you need to set the color again, otherwise it gets clobbered:

    drawingManager.set('circleOptions', { strokeWeight: 1, strokeColor: 'red' });

Enoch

[Q Mei]

Hi again Enoch,

Very sorry for not replying sooner.

Maybe I miss-understand the design. The problem appears to be quite obvious to me (runing on IE8 and Firefox):

 

When strokeWeight is set to 0, the border and filling will have the same color for all overlays. Also when strokeWeight is set to 1, the polyline will use the same color as set.

 

But when strokeWeight is set to 1, all other overlays appear to have this issue: the border color is no longer the same as the filling and the border color is no longer controllable.

 

Attached please find the code I tested from http://gmaps-samples-v3.googlecode.com/svn/trunk/drawing/drawing-tools.html

 

The only change I made to reproduce the issue is 1. added strokeWeight: 1 to polylineOptions, 2. changed strokeWeight from 0 to 1 for polyOptions.

Is this behaviour as designed?

Thanks,

 

Qunhuan

Enoch

--

You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/0Txp7GOmKZQJ.

[Enoch Lau (Google Employee)]

The problem is that in the function selectColor, it's only setting the fillColor for rectangles, circles and polygons. The strokeColor is unset, which means that it defaults to black.

[Q Mei]

I had a check again and found the real problem was I had a typo in my code (options.strokeColo = color;)

I should have been careful. Felt very sorry!

Many thanks

On 15 January 2012 21:53, Enoch Lau (Google Employee) <enoc...@google.com> wrote:

The problem is that in the function selectColor, it's only setting the fillColor for rectangles, circles and polygons. The strokeColor is unset, which means that it defaults to black.

--

You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/HGN7kDD5-iwJ.