How to use

How to use Map Pin Studio

This is the basic flow for making your first annotated image: load an image, place pins, edit comments, preview the output, and save it as a PNG.

Sample image created with Map Pin Studio

Load an image

Use Load image in the project card and choose a local image. The image is saved in your browser storage and is not uploaded to the app server.

Choose the pin style

In Pin settings, choose an icon and accent color. You can use numbers, text, built-in icons, and imported image icons.

Place a pin

Press Place pin near the upper-right of the map or inside Pin settings. Then tap or click the point where you want to add the pin.

Write a comment

Select a pin to open the comment editor. Text entered in the note field appears as a comment label on the map.

Move the comment label

Drag a comment label to place it by hand. A connector line links the label to its pin, so the relationship stays clear.

Check the preview

Open Preview to check the rendering used for the saved image. Pin size and comment size for export can be adjusted inside the preview.

Save the image

Use Export from the preview or the top controls to save a PNG. On PC this usually starts a download. On mobile, the browser may open sharing or save options.

Create a backup when needed

The project card can export a restorable backup file containing the image, pins, text icons, and custom icons.

If pins are not placed

Clicking the map alone will not place a pin. Press Place pin first and confirm that placement mode is active.

If comments overlap

Drag comment labels to move them. You can also reset the selected comment position or reset all manual comment positions.

If you change devices

Data is stored in the current browser. Export a backup if you want to continue on another device or protect against browser data deletion.