MLops for beginners
Day11: Geotagging Visualization using Python
What is geotagging? How to plot geolocation on maps? Some use cases and my fun project.
This article is about how i ended up creating a web application that geo-tags any image on the map using python.
To start with it, there are some things you should know.
What is geotaging?
According to wikipedia,
Geotagging, or GeoTagging, is the process of adding geographical identification metadata to various media such as a geotagged photograph or video, websites, SMS messages, QR Codes or RSS feeds and is a form of geospatial metadata.
The data usually consists of coordinates like latitude and longitude, but may even include bearing, altitude, distance and place names.
How to plot location on map using python?
There are many ways for this, I used a python library called folium. You can start with its documentation to know how it works. There is a good article on getting started.
Now time for what i did with all this knowledge. I created a web app that asks user to upload an image to the server and then it puts a marker on the location where the image was clicked.
It was amazing for me on the first go.
Before starting with the code, you should have an idea of what we are going to do and how will it work.
- Take input image from the user.
- save the image in a location
- fetch metadata from the images and generate the location coordinates with it.
- plot the location images on the map.
Time for coding this amazing web application. I used flask framework to build the web application but there are no limitations to any specific framework and language of you get the concepts correctly.
Below is how my directory structure looks like for this project.
v2is the parent folder for the project.
location.csvis the database file where i stored the names of uploaded files and location fetched from those.
main.pyis the main python file used to start my flask appliaction.
staticis the folder used to store the the uploaded files.
templatesis the folder used to save the html template files for the web application.
Let’s explore the
main.py file and from there we’ll branch out accordingly to understand how it works.
main.py file there are 2 routes:
@app.route(“/”, methods = [‘GET’, ‘POST’])
It is very clear that the first route is the default location of the app(landing page), and this page is used for uploading the image and saving it into the
save_path and then updating the db(by invoking
updatedb()). At the end It is rendering the
You might now already have an idea of how my
index.html page would look like. But there are some tweaks i made to make it more responsive and interactive.
I added an iframe to my web page which will show the map. There is a variable in the source for the iframe tag, I have passed that variable in the route function already, that is the location for second route(
So till here we know that,
- User can upload the image to server.
- The image will be saved and
updatedb()function will be called.
- Since the
/locis used in iframe on the main page, so loc() function will also get invoked.
- And then
create_map()function will also be called. And then
loc.htmlwill be rendered.
Good thing here is that, we don’t have to code the
loc.html file. create_map() function will create this file for using data from the
Let’s first see how
updatedb() stores data in the
- Take all the images from
- open the
- and then for every image it will
extractthe name and location.
- If there is no location in the image file then the default data is set to
- and write all the extracted data to the file.(comma seperated)
If you are confused about the
f in front of the last string then you should consider studying about the f strings in python. This is a new feature from python3.6 .
→ updatedb() function updates the location.csv and create_map() function reads the file and creates the map.
This is what my create_map() function looks like.
- This function uses folium library to create the map.
- reads all the data from the
location.csvfile (except the last line because it will always be empty).
- create marker for every valid entry in the file and add that to the map.
- save the map with name
There a last thing which is left for the code → logic for how location is extracted from the image.
It’s ok…But how to get the metadata from the image?
There are already many articles written who provide the metadata extraction and geolocation extraction code.
- Select the image which you need to upload and then share it
And BOOM… We got the marker.
Note: → Important thing here is that we need to have an image which have location in metadata. If the images are shared through any social media platform then they generally remove the metadata from them which could reveal information about the user.
You can download the complete code from my github repository.
There could be many use cases for this…
- we can build an app that logs all the images of the traveler. And other travelers can see the beautiful views on a single portal.
- we can build an app that so that we can share the live update of any location on the map.
- This can also be used in this current COVID-19 pandemic situation to know if there are violation of social distancing in a particular neighborhood. People can click the images of those and upload it and some action can be then taken by local authority for that if needed.
If you have some use cases which i missed please note it down in the comment. It might help the community.