Note:

Use the ScribbleMaps Connect Picker when you want users to sign in to Scribble Maps, browse their available maps, and return map data directly to your web application.

 

The picker opens in a popup and handles the user sign-in process there, so your application does not need to collect Scribble Maps credentials directly.

Contents

How the Connect Picker works

The ScribbleMaps Connect Picker allows your users to browse, search, and select maps from Scribble Maps, then return that map data directly to your application in the format you choose.

This is useful when you want users to create or manage geodata in Scribble Maps and then load that data into your own app without building your own map browser or sign-in flow.

Use Case / Example:

This integration is useful for dashboards, property tools, field-data applications, and other web apps that need users to select and load mapped data from Scribble Maps.

View Contents ↑

Get your Client ID

1. Open the Scribble Maps developer site:
   https://developers.scribblemaps.com

    

2. Register a free project.

    

3. Copy your Client ID.

   You will use this value when calling the Connect Picker.

View Contents ↑

Add the SDK to your page

1. In your web page, add the Connect Picker SDK:

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

    

2. Save your page changes.

   The Scribble Maps Connect Picker is now available to your application.

View Contents ↑

Open the Connect Picker

1. Call ScribbleMapsConnect.pick() from your page.

    

2. Pass your clientId, the export format you want, and an onSelect callback.

    

3. Use code similar to the following example:

   ScribbleMapsConnect.pick({
     clientId: 'YOUR_CLIENT_ID',
     format: 'geojson',
     onSelect: function (result) {
       // result.data contains your GeoJSON
       // result.title, result.mapCode, result.thumbUrl also available
       loadIntoMyApp(result.data);
     }
   });

   When the picker opens, the user can authenticate, browse their available maps, and select one.

View Contents ↑

Handle the selected map data

1. In the onSelect callback, access result.data.

   This contains the map data in the format you requested.
    

2. (Optional) Use the additional returned fields:

   • result.title — the map title
   • result.mapCode — the Scribble Maps map code
   • result.thumbUrl — a thumbnail URL for the map
    

3. Pass the data into your application logic.

   For example, load the returned GeoJSON into your own map viewer or data workflow.

View Contents ↑

Optional configuration

You can configure the picker to match your application workflow better.

1. Select the export format by changing the format value.

   For example: geojson, kml, csv, gpx, dxf, shapefile, or smjson.
    

2. Choose which map sources users can browse with the tabs option.

   Users can browse maps from their personal library, team-shared maps, or the community collection.
    
3. (Optional) Use the included button styles to match a light or dark interface.

View Contents ↑

Supported formats and returned fields

Supported export formats:

• GeoJSON
• KML
• CSV
• GPX
• DXF
• Shapefile
• SMJSON

Returned result fields:

• data
• title
• mapCode
• thumbUrl

Once configured, the Connect Picker gives your users access to their Scribble Maps data directly from within your application through a single integration point.

Related

Scribble Maps Developers

Scribble Maps Connect Picker

Import/Export Files & Data - GeoJSON, images, PDF, CSV, KML, GXP, SHP, DXF, SMJSON, SMT, WKT, etc.

Import/Export: Descriptions, Examples, Restrictions and Workarounds - CSV, DXF, GeoJSON, GPX, KML, KMZ, SHP