UNIVERSITI TEKNOLOGI MARA

SCHOOL OF GEOMATICS SCIENCE & NATURAL RESOURCES

COLLEGE OF BUILT ENVIRONMENTAL

LAB: WEB MULTIMEDIA LAB REPORT

PREPARED BY:

NAME STUDENT ID

SYIEKH MOHD AMIRUL HAFIZI BIN ROSLAN 2022453628

JEFFERY

PREPARED FOR:
Sir Saharuddin Lin

DATE OF SUBMISSION:
08 JANUARY 2024

1
 INTRODUCTION

QGIS, a powerful and open-source Geographic Information System (GIS) software, offers a versatile
platform for creating interactive web maps enriched with multimedia elements. This innovative
capability within QGIS allows users to go beyond traditional mapping by seamlessly integrating various
multimedia components like images, videos, audio, and other interactive content directly into their
geographic visualizations.

With its user-friendly interface and extensive functionalities, QGIS empowers users to incorporate
multimedia elements into their web maps, enabling the creation of engaging, informative, and visually
compelling experiences. Through plugins, extensions, or custom development, QGIS facilitates the
embedding of multimedia directly into maps or pop-up windows associated with specific geographic
features.

This integration of web multimedia within QGIS expands the horizons of spatial data visualization by
enabling users to present comprehensive information alongside geographical data layers. It offers an
opportunity to tell stories, showcase historical transformations, illustrate environmental changes,
display cultural heritage, and convey complex information effectively, all within the context of the
mapped geography.

By leveraging the capabilities of QGIS for web multimedia integration, users can create interactive
mapping applications that offer a deeper understanding of spatial data. This feature-rich environment
not only enhances the communication of geographical information but also fosters exploration and
comprehension by providing a dynamic and immersive experience for map users.

2
 LAB 1:
MALAYSIA MAP , COLOR

MANUAL:
1. First of all, open up Qgis on your pc
2. Click on ‘layer’ and ‘add layer’ then add vector layer.
3. Next to the ‘vector dataset’, a button with ‘…’ on the right then click on it and a popup will
appear.
4. Look for ‘ne_10m airports’ file and add.
5. Next step is to go to layer properties.
6. Fields except name, iata_code, type, and Wikipedia are turned off by clicking on the field and
change the Widget Type to Hidden because it is irrelevant to the user.
7. In the wikipedia field check the Multiline and HTML so that the link present in this field will be
rendered as a hyperlink for the user. After setting the respective Widget Type for each field, click
‘OK’

3
4
8. Next, click on the ‘identify features’
9. Click on any point on the map, the details of the name,type,iata_code and Wikipedia fields will be
shown on the right tab. The Wikipedia fields will be highlighted as hyperlink.

5
10. Add a new field by clicking on the ‘open field calculator’ on the top bar to make it more
informative
11. Enter the Output field name as class, choose Text (String) in Output field type. The layer field
type contains values such as small, mid, large etc. We can add an expression to change the case of
the words to sentence case and append the word airport for better readability. Enter “concat(
title("type"), ' Airport')” in the Expression box and click ‘OK’
12. Now that we have the ‘class’ field, you can make the ‘type’ field in the layer properties hidden by
doing the same thing as step 6.

6
7
13. Now we can make the layer styling by clicking on the ‘open layer styling’
14. Change the type to ‘categorized’, in the ‘value’ select ‘class’ and click ‘classify’
15. Different colors of circle will appear with many categories. Delete all the categories for military
airports. Hold ‘CTRL’ key and select all the military airports.
16. Click on ‘delete’

8
9
17. Double click on the circle for small airport. Set the size to 2. Mid airport to 3 and large airport to
4
18. You can change the color for each circle with your own creativity

10
11
19. To add the base layer for Geo-referencing, Stamen Watercolor would be a nice background
map for this project, to add the layer select Web ‣ QuickMapServices ‣ google terrain
20. Save the project

12
21. Next . install the qgis2web plugin by going to Plugins ‣ Manage and Install Plugin
22. Once the plugin is installed, go to Web ‣ qgis2web ‣ Create a web map.
23. Now Export to web map dialog box will appear. This is the primary console for customizing the
web layout of your web map. The left-hand panel contains all the configuration options. You can
change any setting and preview the updates on the right side by clicking the Update preview. The
plugin can export the map using many different web mapping libraries
24. Change the popup fields of the layer, change it to inline label.
25. Now switch to the Appearance tab. Check the following boxes - Add address search, Geolocate user,
Highlight on hover. In Add layer list: choose Collapsed . For Layer search choose ne_10m_airport:
iata_code field. This option adds a search box where the user to search for an airport with its code.
Once made all the changes, click Update preview.
26. Now, let’s check the features added to the map, click on the Find (binocular) icon and type DXB
and press enter, this will center the map to Dubai international airport

13
27. Click on the airport icon to explore the information about the airport.
28. Click the Search (Magnifying glass) icon, and search for new york and press enter.
29. Now lets measure the linear distance in SI units, between EWR and JFK airports. Click on the
Measure (ruler) icon and select Create a new measurement. Then, click over the airports once the
point is chosen, the latitude and longitude of the point are captured and used to compute the
distance, now the distance is displayed in meters.

14
15
30. Switch to the Export tab and check the Minify GeoJSON files box. This reduces the size of the
resulting file. Click on the ‘…’ next to Exporter
31. Choose the desired location (folder) of export and click Select Folder, then click Export button.
32. Now all properties, styling, and customized options are exported in a self-contained folder. Upon
successful completion, a link will appear in the Progress popup dialog box, click on the link to
open the file

16
\
THIS IS THE RESULT OF THE PROJECT.

17
Conclusion
In essence, QGIS's integration of web multimedia transforms maps into engaging stories. By blending
images, videos, and interactive content seamlessly into geographic data, it goes beyond standard
mapping. This feature enables users to create captivating web maps that convey a deeper understanding
of information. QGIS empowers users to craft interactive experiences that not only display data but also
engage audiences, offering a more immersive and insightful way to explore spatial information.

18