Category: Design

Android App VidOverlay Introduction and Usage Instructions

Posted on in category: Android App Design Video Editing

Add Overlays and Convert Videos to MP3 right from your phone app.

Ever wondered how people and companies embed a logo at the top right or left corner or bottom right or left corners of their videos? Do you have a logo or a smiling face that you want to place on a video before uploading it to Facebook or YouTube so it has a watermark and recognition of your ownership of the video? This becomes important when anyone can download videos and upload them again under their own name, not giving proper credits to original videographers.

Latest release version: 1.2



  • Video Overlays
  • Watermarking
  • Mp3 Converter
  • Upload to Google Drive

Screenshots of the android app



Usage Instructions

Make sure to explicitly allow this app to have storage access permissions.  To do this: go to settings > apps and permissions > open this app and allow the permissions.

Recommended Overlay Sizes

Any logo from 16×16 to 128 x 128 would look good at the corners of video. Any size bigger than that might look unreal. You can test different sizes according to your needs.

Other Information

Files loaded from downloads folder seem to produced better results.


Process completed but video not found

In rare cases, depending on the type of phone, it is possible that the app informs you the process has finished but you are unable to view the file. The app will most likely let you preview the video, from video player click share button and share it directly to youtube.

This issue can also be resolved by using the newly added feature: upload to google drive. 

Export Google Map Currently Displayed Map Using Html2Canvas

Posted on in category: Design Javascript Map Drawings

For this to work, you would need jQuery and Html2Canvas js libaries. Add a button and then add a click handler to initiate this function and it will export the image in DataURI base64 string format. From there on you can either display it in an image placeholder or save the string in database, email it or let the user download it.

$(document).ready(function() {
 function saveMapToDataUrl() {

    var element = $("#map_canvas").find(".gm-style")[0];
    html2canvas(element, {
        useCORS: true,
        onrendered: function(canvas) {
           dataUrl= canvas.toDataURL("image/png");
            // Eg. write it to the page
                var image = document.getElementById('saveImage');
              image.src = dataUrl;


dataURI is a base64 encoded string which in other words means a simple file. Getting the contents of a file as a string means that you can have a light weight image in string format to directly embed the data within your HTML or  CSS . When the browser intercepts a data URI, it is able to handle and decode the data and construct or build the original file, which in this case would be an image in png format.