Create an image overlay - (Image Overlay Tool)

Introduction

• URLs (Option 1).
• Your computer (Option 2).

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

(Option 1) - Upload the image from a URL

Note: An image uploaded from a URL is not saved to the "Your Imagery" tab for later use in your account. To enable saving an image to the "Your Imagery" tab, first download the image to your computer. Then perform this procedure:
(Option 2) - Upload the image from your computer.

1. Find the web page displaying the image.

   Note: You can find many free-to-use images in the: Wikimedia Commons
   To learn about general licensing terms and requirements, visit this link:
   Commons:Reusing content outside Wikimedia

    
2. On the web page displaying the image, copy the URL.

   Copy by clicking to highlight the URL. Then use your keyboard to press:

   • Ctrl + C (for Windows).
   • Command + C (for Macs).

    

    
3. Open Scribble Maps at:
   https://www.scribblemaps.com/create 
    
4. (Optional) Login to your account.
   (Optional) To learn how to login, visit this link:
   How to login / register
    
5. Select the Image Overlay Tool in the top toolbar.
   You will see the image upload window.
    
6. (Optional) If the "Image URL" field isn’t empty, click the button: "New Image".
   You will see the "Image URL" field is now empty.
    
7. Paste the URL into the "Image URL" field.

   Paste by clicking the field. Then use your keyboard to press:

   • Ctrl + V (for Windows).
   • Command + V (for Macs).

    

    
8. When the URL upload is successful, you will see a green checkmark at the end of the URL field.
    

(Option 2) - Upload the image from your computer

1. Login to your Scribble Maps account at:
   https://www.scribblemaps.com/create 
   (Optional) To learn how to login, visit this link:
   How to login / register
    
2. Select the Image Overlay Tool in the top toolbar.
   You will see the image upload window.
    
3. (Optional) If the "Image URL" field isn’t empty, click the button: "New Image".
   You will see the "Image URL" field is now empty.
    
4. Click the button: "Choose File".
   In the window, find the file’s storage location in your computer. Click to select the file, then click the "Open" button.

   Note: When the image upload is successful, you will see a URL added to the "Image URL" field. This URL is where the image is hosted.

    
5. (Optional) If you click the "Your Imagery" tab, you will see the list of images uploaded from your computer.
    
6. (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 color.

 

(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.

See also

Add an overlay to a group/folder