Base APIs and Loading

When the Scribble Maps API loader is added to the page it first checks if a projectId is present and if it is, the base API and key associated with the project (which can be specified at manage.scribblemaps.com) are pulled in and the base API selected is then hot loaded.

Scribble Maps has its own rendering engine and sits on top of these other APIs. If interactivity is required, the Scribble Maps API should be exclusively utilized. However, all the visualization captabilities of the underlying API are still available by using the below function.

  1. ScribbleMap.getBaseAPIMap()

Drawing and Overlays

Unlike other mapping APIs, you do not need to create new instances of objects to add overlays to the map. 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.

  1. var sm = new ScribbleMap('scribblemapdiv')
  2.  
  3. sm.draw.setStyle({
  4. lineColor: '#FF0000',
  5. lineOpacity: 1,
  6. });
  7.  
  8. sm.draw.line([[0, 0], [-43, -24]]);
  9. 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.

  1. var sm = new ScribbleMap('scribblemapdiv')
  2.  
  3. sm.draw.line([[0, 0], [-43, -24]])
  4. .click(function() {})
  5. .mouseover(function() {})
  6. .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.

  1. var sm = new ScribbleMap('scribblemapdiv')
  2.  
  3. var myOverlays = [];
  4. 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.