Geo Visualizer
1st Dibbendu Koley B.Tech CSE Galgotias University Greater Noida,Uttar Pradesh, India
[email protected] 2nd Manish Kumar
B.Tech CSE Galgotias University Greater Noida,Uttar Pradesh, India
[email protected] 3rd Vikash Gupta
B.Tech CSE Galgotias University Greater Noida,Uttar Pradesh, India
4th Ms. Indrakumari Assistant Professor
School of Computing Science & Engineering Galgotias University
Greater Noida,Uttar Pradesh, India [email protected]
Abstract—This paper aims to ease the hazzle of searching for any location using online applications. Generally, search engines are bombarded with random and irrelevant information which is not the scope of the search. The proposed Geo Visualizer application provides users a unique way to visualize a location with the help of graph, images and reviews. Users who provide their feedbacks and reviews about their experience can also be rewarded.
Key words: Geographic Visualization, Websites, Search Engine, React.js, Express.js, MongoDB, Users, Graphs, Tourism, Images, Reviews, Frontend, Backend, Database, Server.
I. INTRODUCTION
The purpose of this paper is to provide a platform where users can search for a ―place‖ and find related information, photographs, reviews and other miscellaneous information (like – local shops, restaurants, hotels). All information provided on this platform are real photos taken by our users for which they will receive credit in form of reward points, thus providing a unique platform for users to receive credit for providing information through images and reviews and creating a unique experience of visualizing a place even before visiting it.
Geographic Visualization [1] is a term used when any physical location is represented in the form of data.
Throughout the human history, when there was no means of storing data, people used to draw figures inside cave walls, floors to identify and memorize the location around them. Almost everything they drew represented something, be it a location where they can find food or a place where meetings would happen. [2][3] Well, these things helped so much back in time that today when we have computers and microchips to store data this idea kickstarts so many thoughts. The use of modern visualization technology unlocks many new possibilities for depicting high volume of data with ease, like online map service that we have right now. [4] These data and relations helps people to explore, understand, and communicate information with just a click of a button. [5][6] Though modern applications can lead us one to one with nature and earth but we always rely on images rather than maps to visualize the location. No matter how better the cartographer draws his maps we always need a visual image to connect with that location. That‘s the reason our Ancestors drew so many arts, out of mud, sand, clay, wood, stone etc. The visual appeal we receive after seeing those classics put smile on our faces. This idea is put together to form a modern-day legend ―Geo Visualizer‖
where we happen to do what we actually crave for. A connection which links us all with these images.
Our Objective as a team was not meant to akin to cartography, rather we wanted to move parallel to the idea that images and visuals adds to the ―idea‖ of a place. Its like visiting the place but without physically going to that place.
The visual portrayal by the means of digital media adds to that idea. Imagine a lake by the mountains, what we see on map is a blue spot with green structures but can we really acknowledge the location by only just looking at the cartography? The answer is ‗No‘. We need an image to visualize the place in Three Dimensions. The image that adds value to that location, which shows the real location in its true form. This is the idea what we thrive for.
II. EXISTINGSYSTEM
Social-networking platforms such as Flickr, Panoramio, Pinterest, Instagram, etc., has features which allows users to share images among other users. [7] Also, some platforms enable users to geo-tag a photo which in terms promote
tourism of that geo-location. But the system in existence do not give user any benefits as incentives which defers users to upload more. [8] Though likes, followers, comments and messages open new possibilities but still it does not add up to improve user experience.
Geolocations are the actual location information which is collected while a user turns on location history which then maps the image with the location. Many local tourist apps have technology and backup to maintain the system but the technology used are way old and images they provide are so different from the current reality. Also, there are none to no reviews about latest happenings. This makes it very unreliable because reading pamphlets do not portray the real location.
These are some of the hiccups that our proposed system tries to solve and it excels at it. As we can see tourism websites like Delhi Tourism [9] the website is not mobile friendly. The images are a decade old. The technology that is used to build the solution is newer, familiar and easier to understand and work with. Also, since any location is forever changing our platform will fix the issue once and for all by using various algorithms to provide users with latest and the greatest.
III. PROPOSESYSTEM
As a searching tool for locations the website is supposed to look good and make visual appeal in itself so that more people use it. The well-spaced-out information and search bar makes it easier on eyes and pulls focus of the user. The
―Fig. 1‖ represents the user interface that is chosen for front page. The search engine will be powered by Alogia, it is very powerful and efficient while processing information.
Fig.1. This figure shows the style and type of search bar that is used in front page.
As mentioned earlier, the app allows users to upload images and reviews of a location. The ―Fig. 1‖ shows the type of UI the users will get after they search for any location. It‘s important to show this banner on every page so that if any user want to contribute, they do not have to look for it.
Fig.2. The card where people can add reviews and photos. This appears in every webpage.
Also, the primary objective of this website is to provide people with beautiful graphs and images using which they can make a decision if they want to visit the location in real life or not. [10] The graphs are also useful to see, if people are actually visiting that place and how many people searched for this location. The ―Fig 2‖ shows similar objective that we are supposed to make.
Fig.3. Graphs with different data points to visualize the facts and figures.
The searching tool is useful when the user knows what exactly they need to search but sometimes it happens that
it‘s not clear what they are looking for. So, to fix this problem and save some time, there is a navigation menu which is detailed and self-explanatory. There are mountains, lakes, rivers and others to choose from.
Fig.4. Navigation Menu which groups different places together for easier searching.The user now finally searches for a location so what should the users actually expect from the results. ―Fig 5‖ shows an example search page of a location called – Akshardham. This is a very popular location in New Delhi, India. As per the information the website shows brief about the location and then shows latest images and graphs as mentioned. It also shows a banner for someone who wants to add their reviews or photos.
Fig.5. Searched information appear in this format.
Apart from all the features that is been discussed, the website also has a dashboard for individuals who want to see their statistics. The dashboard should show number of photos the user had uploaded, number of reviews the user has written and many more.
IV. METHODOLOGYOFTHEPROPOSEDSYSTEM
If we want to learn about a specific location what do we usually do, we go to the internet and open our browser and search for our location. Let‘s say we search for ―Visakhapatnam‖ on google. Our first result shows a Wikipedia page which can be good for knowing basic things and history but not so much for visiting. Then if a location is very popular it will have a tourism promotion website which are not very tactile and detailed.
On the right-hand side of our webpage, we can see few images and a map with some good general facts which may be useful in some cases. But what if we want photos, reviews of that place? We go to google maps, see if anyone has uploaded any photos. What if we want to check if any tourist is currently visiting the place? What are the top places to visit in Visakhapatnam? Then there is nowhere to go. We really can‘t talk about a place until we see it for ourselves.
A. Geo Visualizer as a searching tool
Imagine a website where one search gives you every bit of information about any place. You can see the visitors, their photos and reviews all at one place without any hazzle. You can see the graph of visitors, how actively people are going to a place. You can read amazing in-depth reviews and view high quality images of that place. [4][14] This creates a beautiful representation of the location and gives us confidence to plan and decide on any location. [10] The data analysis done for every location helps in determining the activity of that area.
B. Geo Visualizer as a talent and reward platform
Our website will have an option to upload images and reviews for individual locations they visit and people who will upload will get reward points which can be redeemed and used in many ways. This will work as an incentive for uploading more and create a flow in the website. Though we plan to make a ranking algorithm which will keep quality check and moderate the uploads.
Uploading images or reviews are optional for any visitor, but our active rewards system motivates our users to create content and get popular.
The reward system will work on an algorithm which will check all the content which is uploaded by the users and give points on the basis of it.
There is also a dashboard for users who choose to provide with valuable content for our website where they can track their achievements and points.
C. When it can be useful and when its not?
Our website ―Geo Visualizer‖ is useful for every user that uses it. The website intends to provide genuine
information over made-up information but since most of the data is from the users itself it may not always be accurate and to the point. Many times, a simple issue can lead to bad reviews so users should always keep that in mind. What maybe good to someone, may not be good for someone else, and vice versa.
Secondly our website is not intended as a marketplace for other websites and misleading information. The website will only show genuine information regarding the location and nothing more. It will not show any information regarding transport or hotels (if any). This part will be left for future update.
V. TECHNICALBACKGROUNDOFTHEPROPOSEDSYSTEM A. Selecting a technical stack
We are using MERN stack [11] for our paper. MERN, an acronym for MongoDB, Express, React, Node, is used in this work. The key technologies that embrace the MERN are
MongoDB – A document oriented and cross platform database which uses JavaScript.
Express(.js) – A back-end framework of Node.js
React(.js) - A Front-end framework of JavaScript used for making User Interface and Components.
Node(.js) – A JavaScript web server.
B. Working of MERN stack
The MERN architecture is a complete 3-tier architecture which includes Frontend, Backend and Database that work independently using JavaScript and JSON. MERN is also quite popular because of its fast performance.
Development of Backend -
MongoDB, Node.js and Express are solely used for developing the back-end of Online Web Applications. These technologies correspond to database management system, server-side scripts, html documents, etc.
The Developers need to create application, users, like URLs then they can communicate with the MongoDB Database. These URLs represent functions, which makes HTTP calls to the exchange data from the server. The Data is returned in the JSON format.
Development of Frontend -
The main purpose of React.js here is to execute these requests calls. Using React the developers only have to make AJAX calls which allows them to concatenate dynamic data bindings. The whole process then reloads only the components which requires updating, therefore saves overall processing and decrease page reload times. The web application also becomes much faster.
Ajax is helpful because it acts in a middle ground. This gives an impression to the user that the information is always there while Ajax just downloads and reloads precise components. For Example- When user clicks more info button, Ajax quickly fires a call and retrieves information and displays the data instantaneously.
React.js Front End
The First technology used in the MERN stack is React.js, an open-source JavaScript library [12] which was developed and maintained by Facebook and a community of individuals who are learning and developing, including companies that work and develop react. The library is basically used in front end web development for creating user interfaces also known as UI components. Many companies use React.Js as a base for designing and developing a Single page Web application or a mobile application by using similar tool called React Native.
React‘s is very flexible and has many features which makes it one of the best JavaScript frameworks in existence.
The following things mentioned below adds to the pack.
React Components –
The React components are made of entities which can be rendered to a specific element in the DOM by utilizing the React DOM library. Also, we can pass values as ‗props‘ while rendering a component, making it dynamic.
React Virtual DOM –
This is a very important feature in React, a virtual Document Object Model, or virtual DOM. React has a data structure cache a clever mechanism which precisely re-render the components that are updated and saves processing time by not reloading the whole page. This process of selective rendering makes the website feels faster and lighter.
Also gives an illusion that the data is always present.
JSX –
JSX also known as JavaScript XML, is an extension to the JavaScript language syntax and is very similar to
HTML in practice. It‘s like writing HTML syntax inside JavaScript looking code. Though a number of the components are bit different but they create same sense. Also, it‘s not always compulsory to write down JSX everywhere.
Express.js Server for Node.js
The final technology that resides below the React tier or the front-end lineup is our Express.js server of Node.js.
Express.js is fast, reliable and minimalist. It has powerful system to manage and route URLs and handle HTTP requests and responses.
When React.js (frontend) makes HTTP requests we communicate them to express server which then routes the request to the database. This also checks for the request and validates it so no bad data is stored inside the database system.
MongoDB Database Tier
Since we have lots of data to handle and work with like user profiles, images, comments and other requests we want a strong database that is easy to work with and complements our JavaScript model from front and back end.
VI. WORK LAYOUT
We have already decided that we will be using MERN stack for our paper which is currently very popular and is growing in industry.
A. THE VISUAL FRONTEND
We will use React.js a modern JavaScript framework for designing the website. Also, we will use Material.ui for designing the website and import styles according to our needs. This will reduce the work load and it will make sense on such a large paper like this where all location needs to be similarly designed and presented. We first initiate the work using create-react-app.
1) Since React works with components it is easy to handle information and route it through different pages or sections of the pages.
2) We will also use chart.js for visualizing the data for every location. It is also a javascript library which helps in creating amazing graphs.
B. IMAGE PROCESSING
Digital image processing [13] is a term used when a processing algorithm is implemented to do changes to an image. The regular images that we see online are defined on two dimensions therefore various algorithms can be used to modify the values in these dimensions. This processing of values is known as Digital image processing.
Since our website heavily deals with huge number of images, we need an image processor to reduce the size of images without hindering the visual quality of overall image. We will use Squoosh app for this purpose which is created by google developers to process images extensively at any scale. This is done because we don‘t have huge storage on our database to store all the high-quality images. Also, some images may not be useful enough to upload in the database.
This image processing is an important role that the website needs to perform before uploading data to the database because the storage space is limited and it takes high bandwidth to upload large files. which affects user experience that may sometimes lead to lesser interaction with the website. [15] Overall, the basic idea is to digitally compress an image to the point that its dimension remains the same but the size goes down to kilo bytes. This heavily improves website performance and simultaneously improves user experience because image processing is easily done at client‘s end and uploading takes less bandwidth. Also, the visual quality is quite good after the complete process.
C. REACTDOM
DOM in web development stands for ―Document Object Model‖ its a World Wide Web Consortium standard logical representation of any webpage. In other words, DOM is a tree-like structure that contains all the children under itself which are represented by nodes. DOM provides a language-neutral interface that permits accessing and updating of the content of any element of a webpage in an easier and procedural way.
Before React had DOM manipulation developers had to manually manipulate the DOM elements which resulted in regular DOM manipulation by the browser itself every time a change happens, which made the entire process to consume tons of the time . Therefore, as an update, React brought into the scene the virtual DOM.
ReactDOM packs many useful tools some of them are mentioned below. It is deployed at the highest level of a
web app and is responsible for loading and rendering components to the webpage.
render ()
findDOMNode ()
unmountComponentAtNode ()
hydrate ()
createPortal ()
D. AJAX
AJAX is an acronym that stands for Asynchronous JavaScript and XML, it is used in React.Js to make requests to server. Axios which is an AJAX library is used in react to make http request to external resources. We are using it here to send server callouts to our server.
Axios is promise-based library, which gives us the functionality to use JavaScirpt‘s Async and Await for more readable asynchronous code. This also has features to intercept the requests and cancel them. It has many built-in features to protect the users from cross-site forgery.
E. BACKEND
For our backend validation and interaction with the
database we are using Express which is a framework for Node.js, an open-source backend JavaScript server environment. Node.js is free and it runs on various platform.
The backend server code will check login credentials when the user logins and retrieves information from the server. It will also check whenever the user wants to upload any information like images and reviews.
F. DATABASE
A database is a tool that stores data in an organized way which makes it easier to insert, update or retrieve data with simple lines of code. In our case, we are using MongoDB as our database which is compatible with JavaScript requests. The backend server can easily communicate information to and from the database. The database provides various functions which makes huge quantity of data accessible with ease. The data is stored in tabular format and using certain restrictions we can ensure that database work properly and is reliable.
• Data definition – Creating and inserting the actual data to the database which creates a base for inserting more data.
• Update – Inserting the data, modification of data and deletion of data when needed.
• Retrieval – Extracting the specific data that we need to display or use. Retrieval is as easy as inserting the data to database.
• Administration – A admin is required to monitor the data, enforcing data security, monitoring performance and maintain integrity of the whole database. Also, to recover any information that somehow gets lost or corrupted by some unexpected event.
VII. CONCLUSION
The project we are proposing makes it easier for users and makes for more efficient searches. It saves time of everyone by providing information all at one place. Tour and Travel makes up larger part of our economy so promoting them and giving them exposure through the website is very helpful. The system will also allow local places and areas to stand out. Since the website is ever-growing due to its nature, it will keep serving its purpose for long duration. The main challenge of this project was time constraint and limited availability of resources.
REFERENCES
[1] Sanjay Rana, Jayant Sharma, Frontiers of Geographic Information Technology. Publisher: Springer, Year:
2006
[2] Toyamo K., Logan R., Roseway A., Geographic Location Tags on Digital Images. Published on 2003.
[3] Paul A. Longley, Michael F. Goodchild, David J. Maguire, David W. Rhind, Geographic Information Systems and Science (2005)(22nd ed.)(en)(536s) Publisher: Wiley, Year: 2005.
[4] Dykes J.A., (1999) Interactive Maps for Exploratory Spatial Data Analysis: Cartographic Visualization - Approach, Implementation and Application, Ph.D. Thesis University of Leicester, UK.
[5] Folkert de Vriend, Lou Boves, Roeland van Hout, Jos Swanenberg in Digital Scholarship in the Humanities, Literary and Linguistic Computing, Volume 26, Issue 1, April 2011, Pages 17–34,
[6] Bas. C. van Fraassen, The scientific image —(Clarendon library of logic and philosophy) Science—
Philosophy
[7] Kisilevich, Slava & Krstajić, Miloš & Keim, Daniel & Andrienko, Natalia & Andrienko, Gennady. (2010).
Event-Based Analysis of People's Activities and Behavior Using Flickr and Panoramio Geotagged Photo Collections. First publ. in: IV 2010 : 2010 14th International Conference Information Visualisation : proceedings, 26-29 July 2010, London, United Kingdom / ed. by Ebad Banissi. Los Alamitos, Calif. : IEEE Computer Society, 2010. pp. 289-296. 289-296. 10.1109/IV.2010.94.
[8] Alex York, from Sprout social writes about geo tagging in Instagram https://sproutsocial.com/insights/instagram-geotag/
[9] Tourist website like Delhi Tourism http://delhitourism.gov.in/delhitourism/tourist_place/index.jsp has mentioned several places with images of the location
[10] Collins G.W, Fundamental numerical methods and data analysis, Published 2003
[11] The information and features of database and MERN stack was referenced from https://www.mongodb.com [12] The official website for learning React https://reactjs.org/
[13] Tinku Acharya, Ajoy K. Ray, Image Processing: Principles and Applications. Publisher: Wiley-Interscience, Year: 2005
[14] Hanan Samet, The design and analysis of spatial data structures, Series: Addison-Wesley series in computer science, Publisher: Addison-Wesley, Year: 1990
[15] Brent Hall, Michael G. Leahy, Open Source Approaches in Spatial Data Handling. Series: Advances in Geographic Information Science. Publisher: Springer, Year: 2008
