Introduction

• PNG.
• JPG/JPEG.
• GIF - regular/animated.
• SVG.

Create an Image Overlay

Upload the image from your computer

1. Login to your Scribble Maps account at:
   https://www.scribblemaps.com/create 
   (Optional) To learn how to log in, visit this link:
   How to login/register
    
2. Select the Image Overlay Tool in the top toolbar.
   You will see the IMAGE OVERLAY window.
    
3. Click the button: "Choose Files".
   In the window, find the file’s storage location on your computer. Click to select the file, then click the "Open" button.
   OR
   Drag and drop the images into the "Drag image here" area.
    
4. (Optional) If you click the "Your Imagery" tab, you will see the list of images previously uploaded from your computer.
    
5. (Optional) At the bottom of the image upload window, you will see the: "Space Used" bar.

   Note:
   

   For images in the "Your Imagery" tab:

   • Free accounts include 2MB of storage space.
   • Pro Basic accounts include 500MB of storage space.
   • Pro Business accounts include 3000MB of storage space.

   To learn how to upgrade, visit this link: How to upgrade to a Pro account

    

(Optional) - Set the opacity of the image - (non-transparency)

• Click on the up/down arrows to the right of the "Opacity" field.
  
  OR
• Click the "Opacity" field. Then type in the value.

The opacity value:

• 0% is invisible.
• 50% is see-through.
• 100% is the solid colour.

 

(Optional) - Lock the width/height ratio of the image

Click the "Lock Ratio" checkbox if you want the image to retain its width/height ratio when you manually resize the image. If you don’t click the "Lock Ratio" checkbox, manual resizing is freeform.

(Optional) - Type in the coordinates for the size and location of the image

Note: The coordinate system is WGS84.

1. Click the checkbox: "Set Location".
    
2. Under the "North" heading, type in the latitude coordinate for the top of the image.

   Note: By clicking the field's up/down arrows, you can make adjustments to the 5th digit to the right of the decimal.

    
3. Under the "West" heading, type in the longitude coordinate for the left side of the image.
    
4. Under the "South" heading, type in the latitude coordinate for the bottom of the image.
    
5. Under the "East" heading, type in the longitude coordinate for the right side of the image.

(Optional) - Use a rectangle to set the coordinates for the size and location of the image

1. (Optional) If the rectangle isn't already in the Map View, draw a rectangle.

    

   1. Close the image upload window by clicking the "X" in the top-right corner.
   2. Draw the rectangle. To learn how, visit this link: Draw a rectangle - (Rectangle Tool)

    

    
2. Select the Image Overlay Tool in the top toolbar.
    
3. In the image upload window, select the image.

   Note: These are the two options for how to select the image:

   (Option 1) - Upload the image from a URL

   (Option 2) - Upload the image from your computer

    
4. Click the checkbox: "Set Location".
    
5. To the right of the "East" coordinate field, click the button: "Use Rect".
    
6. In the pop-up, click to select the rectangle.
   In the "North"/"West"/"South"/"East" fields, you will see the coordinates are updated.

(Optional) - Delete an image from the "Your Imagery" tab

Note: If you delete the image from the "Your Imagery" tab in your account, the image remains in the map locations where you previously placed it. After the image is deleted, it won’t be available to place in maps.

1. In the image upload window, click the tab: "Your Imagery".
   You will see the list of images you uploaded from your computer. Search for the image you want to delete.
    
2. On the right side of the image’s row, click the Garbage Bin Icon.
    
3. A pop-up will appear to confirm you want to delete the image. Click "Yes".

Place the image overlay on the map

1. In the image upload window, click the button: "PLACE ON MAP".
    
2. There are two options for this step:
   • If you selected the "Set Location" option, you will see the image placed in the Map View.
     OR
   • If you didn’t select the "Set Location" option, click on the location where you want to place the image in the Map View.
     You will see the image placed in the map location.
    
3. (Optional) If the image overlay is an animated GIF, you can test the animation display by hovering the cursor over the image.

(Optional) View the image overlay's row in the Layers Panel

Note: To view the Layers Panel, you must be logged-in to a Pro account. To learn how to upgrade, visit this link: How to upgrade to a Pro account

1. Select the Edit/Measure Tool in the top toolbar.

   Or you can press the "Q" button on your keyboard.

    
2. (Optional) If the "LAYERS" Panel isn't open on the right side of the browser window, click the vertical bar. 
    
3. In the Map View, hover over the image overlay.
   In the Layers Panel, you will see the image overlay’s row is highlighted.

Move the Image Overlay

1. Select the "Edit/Measure Tool" in the top toolbar.

   Or you can press the "Q" button on your keyboard.

    
2. In Map View, click and hold the image.
    
3. Drag the image to the new location.

Delete the Image Overlay

1. Select the Delete Tool in the top toolbar.

   Or you can press the "E" button on your keyboard.

    
2. In the Map view, click on the image.

See also

Add an overlay to a group/folder