Tutorial Membuat WebGIS Menggunakan Leaflet.js dan GeoJSON

Summary

This tutorial guides viewers through the process of converting SHP files into GeoJSON format using Quantum GIS and displaying them on the web with the Leaflet.js library. The presenter explains the steps to set up a web server, configure the map with coordinates, and use a GeoJSON file. Additionally, they explore the integration of Leaflet.js plugins, customize the map’s appearance, and modify properties like line thickness and color. The tutorial encourages users to dive into the documentation and experiment further with the Leaflet.js library for more advanced mapping capabilities.

Takeaways

• 😀 Open the Quantum GIS application to convert SHP files to GeoJSON format.
• 😀 Save the file as GeoJSON by selecting the 'Save As' option in the Layout menu.
• 😀 Embed the GeoJSON file on the web using the Leaflet.js JavaScript library.
• 😀 Use a web server for hosting the file, and create an index HTML file in the project folder.
• 😀 Copy the GeoJSON file and the Leaflet.js library files (CSS and JS) into the project folder.
• 😀 Add the required Leaflet.js links to the HTML document, either via CDN or local files.
• 😀 Set the map's height using CSS and match the ID in the HTML with the map variable in the script.
• 😀 Obtain a valid token from the map documentation and include it in the script for the map to display.
• 😀 Adjust the map’s coordinate point by copying the desired location’s coordinates from Google Maps.
• 😀 Make the map more efficient by using Leaflet.js plugins, such as the Ajax plugin for GeoJSON handling.
• 😀 Customize the appearance of map features, including the line thickness and color, by modifying variables in the script.

Q & A

What is the main objective of this tutorial?

The main objective of the tutorial is to guide users on how to convert SHP files to GeoJSON format and display them on a web map using the Leaflet.js library.

What software is used to convert the SHP file to GeoJSON?

The tutorial uses Quantum GIS (QGIS) to convert SHP files to GeoJSON format.

How does the user save the SHP file as GeoJSON in QGIS?

The user opens QGIS, clicks the 'Layout' menu, selects 'Save As', and then chooses the GeoJSON format before saving the file.

What web server is used for this tutorial?

The tutorial uses a web server tool covered by 'Tampipi', although specific details about this server are not elaborated.

What is the purpose of the 'leaflet.js' library?

The Leaflet.js library is used to display the GeoJSON file on an interactive web map, allowing users to visualize spatial data.

How does the user set up the HTML page for the map display?

The user creates an HTML index file, includes the necessary Leaflet.js CSS and JS files, and sets up the map container with specific ID and dimensions.

What is the issue with the map not appearing initially in the tutorial?

The issue arises because the token for the map is invalid. The user needs to retrieve a valid token from the map's documentation and refresh the page for the map to appear.

How does the user add the GeoJSON data to the map?

The user uses a Leaflet.js plugin to load the GeoJSON data and display it on the map, following the instructions in the documentation.

What additional customization is made to the map in the tutorial?

The tutorial demonstrates how to customize the appearance of the map by changing the line thickness and color of the GeoJSON data using Leaflet.js variables.

What is the final recommendation given to users at the end of the tutorial?

The final recommendation is for users to explore the Leaflet.js library further and to make use of the documentation to experiment and enhance their map customization.