IMPLEMENTATION
The implementation of the major features built using HTML, CSS, JavaScript and
Google Maps API is explained in this chapter.
Implementation of Map
I have used Google Maps JavaScript API for generating the map and plotted
points on the map using markers. The Google Map is initialized to center at a userdefined latitude and longitude. The map is also zooming customizable. The points are
plotted on the map using markers, which are inherited from Google API as shown in the
following figure. Each point on the map is clickable and when clicked, it redirects to the
corresponding war on the Wars webpage. The title of the war is shown when hovered on
the marker.
Figure: Google Map Implementation
All the historical events are represented using a timeline in a chronological order,
which is very easy to navigate. The vertical bar represents the year in which the event
occurred and the description and image of the corresponding event are displayed on the
right as shown in the following figure.
Figure: Timeline
The application has a big heading “Chinese Empire” in the homepage. It has a
vertical menu bar that is used to navigate to all the modules in the applications like
biographies of emperors, wars, historical events, culture and books and movies on
Chinese history.
Figure: Homepage
The background of the homepage contains a HD image of The Great Wall of
China. All the webpages are made interactive using JavaScript and JQuery. The menu
item in the vertical navigation bar is highlighted once hovered on it.
Figure: Biographies
The above figure shows the biographies of the important leaders in the Chinese
history.
Figure: Maps
This is the interesting module in the application. It is an interactive Google map
application showing all the locations of the wars as in the above figure. When clicked on
a marker, information about the war is displayed on the next screen.
Figure: Wars
This module contains the information about all the wars located on the map. After
clicking on a particular marker on the map, one is redirected to the corresponding war on
the Wars webpage.
Figure: Topography
This module of the application shows the topography of China on interactive Google
Map. The major deserts, longest rivers, mountain ranges and Chinese Administrative
Regions by population are shown on the map. The deserts are represented by polygons
while rivers are represented by polylines. The mountain ranges are represented by a
mountain image icon and circles show population. The top 12 provinces by population
are displayed on the map.
An information window pops up showing the image when clicked on the icons,
which in turn opens up a Wikipedia page when clicked on image pop up.
Figure: Historical Events
This module uses a horizontal jQuery plugin. The vertical bar represents the timeline in
chronological order. It represents the year in which the event started, the name of the
event, a brief description of the event and a corresponding picture of the event.
Figure: Culture
This module gives information about Chinese culture embedded with some pictures and
videos. The images are magnified once you hover on them.
Figure: Videos
This module is the multimedia part of the application, which gives the additional details
of the war.