Map Picker Widget

The fastest way to add map drawing, annotation, and route planning to any web application. Users draw on Scribble Maps and your app receives the geodata (GeoJSON, KML, CSV, GPX, Shapefile, and more) via a simple popup — no map rendering library, server code, or OAuth tokens required. Drop in a single script tag and call ScribbleMapsConnect.pick() to get started.

Try It

Click the button below to try the picker with a demo client. You will be prompted to log in if not already signed in.

Quick Setup

1. Get a Client ID:

Create a free project at developers.scribblemaps.com to get your Client ID.

2. Include the SDK:

<script src="https://api.scribblemaps.com/connect/picker.js"></script>

3. Open the Picker:

ScribbleMapsConnect.pick({
  clientId: 'YOUR_CLIENT_ID',
  format: 'geojson',
  tabs: ['user', 'team', 'shared'],  // optional - default: all three
  onSelect: function (result) {
    console.log(result.mapCode);
    console.log(result.title);
    console.log(result.data);
  },
  onCancel: function () {
    console.log('User cancelled');
  },
  onError: function (err) {
    console.log('Error:', err.message);
  }
});

How It Works

Your page calls ScribbleMapsConnect.pick() which opens a popup.
The user logs in to their Scribble Maps account (if not already logged in).
The user sees a list of their maps with search and sort.
The user clicks Select on a map.
The popup fetches the map data in the requested format and sends it back to your page via postMessage.
Your onSelect callback receives the result.

Options

Option	Type	Required	Description
`clientId`	string	Yes	Your Client ID from developers.scribblemaps.com
`format`	string	Yes	The format for the returned map data (see Supported Formats below)
`onSelect`	function	No	Called when the user selects a map. Receives the result object.
`onCancel`	function	No	Called when the user cancels or closes the popup.
`onError`	function	No	Called when the popup is blocked or a validation error occurs.
`width`	number	No	Popup width in pixels (default: 900)
`height`	number	No	Popup height in pixels (default: 600)
`tabs`	string[]	No	Which map source tabs to show. Values: `'user'`, `'team'`, `'shared'`. Default: all three. Example: `['user', 'team']`

Supported Formats

geojson – GeoJSON object
kml – KML string
csv – CSV string
smjson – ScribbleMaps JSON object
gpx – GPX string
dxf – DXF string
shp – Returns a downloadUrl for the zipped shapefile

Result Object

{
  mapCode: "BvE7Ux9iRC",
  title: "My Map",
  description: "A description",
  thumbUrl: "//scribblemaps.com/api/maps/images/BvE7Ux9iRC_thumb_400x400.jpg",
  format: "geojson",
  data: { ... },           // map data in the requested format
  downloadUrl: null         // only set for binary formats (shp)
}

Picker Buttons

Use these ready-made buttons in your app to launch the Map Picker. Available in dark and light styles.

The button CSS classes (sm-picker-btn, sm-picker-btn-dark, sm-picker-btn-light) are automatically injected when you include picker.js - no extra stylesheet needed.

Dark Button:

<button class="sm-picker-btn sm-picker-btn-dark"
        onclick="openScribbleMaps()">
  <img src="https://www.scribblemaps.com/assets/icons/mobile/Icon-32.png"
       alt="Scribble Maps" />
  <span>Select a Map</span>
</button>

Light Button:

<button class="sm-picker-btn sm-picker-btn-light"
        onclick="openScribbleMaps()">
  <img src="https://www.scribblemaps.com/assets/icons/mobile/Icon-32.png"
       alt="Scribble Maps" />
  <span>Select a Map</span>
</button>

Full Example:

<script src="https://api.scribblemaps.com/connect/picker.js"></script>

<button class="sm-picker-btn sm-picker-btn-dark"
        onclick="openScribbleMaps()">
  <img src="https://www.scribblemaps.com/assets/icons/mobile/Icon-32.png"
       alt="Scribble Maps" />
  <span>Select a Map</span>
</button>

<script>
function openScribbleMaps() {
  ScribbleMapsConnect.pick({
    clientId: 'YOUR_CLIENT_ID',
    format: 'geojson',
    onSelect: function (result) {
      console.log(result.data);
    }
  });
}
</script>