Ionic 4 | Geolocation Camera clicking Pictures with Watermarked Latitude & Longitude Coordinates

In this article, we are going to create an Ionic 4 application with a GeoCamera feature. The application will take pictures from device camera then watermark them with current location coordinates with Lattitude and Longitude.

Sometimes users may need this functionality in application to watermark images with any of such information for validation purposes. In this tutorial, we will also discuss a very useful js library WatermarkJS which can be used to marker mark images with text or images.

WatermarkJS quickly does its job with single or multiple images you can check more on the documentation here.

Let’s start with our Geo Camera application.

Create a new Ionic 4 application

Make sure you have latest Ionic CLI version installed (current is v5.1.0). Create a new Ionic 4 app with a blank template. If you already have an application up and running just skip this step.

Install Required Plugins

For this app, we need Camera, Geolocation and WatermarkJS modules. Just run following NPM commands one by one to install them.





Add Camera & Geolocation App Module

Camera and Geolocation modules need to be imported in the app.module.ts file after that we will add them in providers array as shown below:

Get Location and Watermark Pictures

In the Home template, we will add a button to call the getPicture method to take pictures from the device camera.

Also, add a <img> tag with template variable to show the coordinate marked image.

Move to file them import Camera, Geolocation and Watermark module, then add in the class constructor


the getLatLong method will fetch device coordinates on component load and put details in locationCordinates


@ViewChild will access image element to show the updated image.

cameraOption will have the configuration of the camera.

sourceType is CAMERA, it can also be PHOTOLIBRARY to pick photos from device gallery.

takeSnap() will call the getPicture method of camera service to get click picture and convert it into blob object using fetch() method

watermarkImage() will add text on image blob object then set IMG tag with an updated picture.

WatermarkJS plugin can be used to watermark images with image, text with CSS styles and location.

the complete file will look like this:

That’s it now you can check it by running the app on a real device


Leave a Reply

1 Comment threads
2 Thread replies
Most reacted comment
Hottest comment thread
1 Comment authors
Matthew Harris Recent comment authors
newest oldest most voted
Notify of
Matthew Harris
Matthew Harris

Couple of notes with this tutorial, locationCordinates should be locationCoordinates. The tutorial misses telling you to set the class level variables. They are in the final listing but not explained while writing the code. Same with ViewChild, its announced but not shown with a code snippet until the end.

Matthew Harris
Matthew Harris

Also ViewChild needs {static: false} as a second param since angular 8.

Matthew Harris
Matthew Harris

Also the watermarkImage() function has a typo accessing the lat as lattitude

And the final snippet doesn’t access the coords at all, it uses a predefined string.