Drawing and Overlays

Drawing on the map works very similar to drawing on a canvas. However, drawing with the Scribble Maps API is not limited to shapes, it applies to markers as well. Once you set a global style, all following draw operations will utilize that style unless an override style is specific in the draw operation. Consider the following example.

api.draw.setStyle({
        lineColor: '#FF0000',
        lineOpacity: 1,
});

sm.draw.line([[0, 0], [-43, -24]]);
sm.draw.line([[0, 0], [43, 24]], { lineColor: "#0000FF" });

In the above example the first line would be drawn with the global color of #FF0000 (red) while the second line would be drawn with an override color of #0000FF (blue).

Overlay Interactivity

Draw operations always return the overlay, and this overlay has chainable functions.

api.draw.line([[0, 0], [-43, -24]])
       .click(function() {})
       .mouseover(function() {})
       .mouseout(function() {});

In addition to the above, there are global handlers for handling all clicks and mouse overs for all overlays. If for some reason you want to create an overlay that will be used later, you can do the following.

var myOverlays = [];
myOverlays.push(sm.draw.line([[0, 0], [-43, -24]]).remove());

Tool Based Views

The Scribble Maps API utilizes a variety of tools to allow the user to interface with the map. In the majority of cases you will not have a user drawing both a polygon and a line at the same time although, this functionality is possible by defining a custom tool.

Whenever a tool is selected, a deslect operation is called on the previous tool. The deselect operation cleans up anything the user was doing previously. For instance, if a user was drawing a polygon and did not click "complete polygon" on mobile or double click to finish on desktop, the overlay the user was working on is committed to the overlay stack.

In some instances a tool might have dual functionality such is the case of the drag which also has the capability to click on markers since this is a familar experience.