FOSS4G-Asia 2024

Build an Object Snap to a Geometric Location on Web Application
12-15, 09:30–13:30 (Asia/Bangkok), Room11-504

Object snapping is a fundamental feature in Geographic Information Systems (GIS) that enhances the accuracy and efficiency of spatial data editing and analysis. This technique allows users to seamlessly align and connect geographic features, ensuring spatial relationships are maintained and data integrity is preserved. By snapping objects to predefined points, lines, or polygons, GIS professionals can create more precise maps and models, which is crucial for applications in urban planning, environmental management, and infrastructure development.

The process of object snapping involves algorithms that detect proximity between features and automatically adjust their positions based on user-defined criteria. This capability not only streamlines the editing process but also reduces the likelihood of errors arising from manual adjustments.

As web mapping technologies evolve, the need for intuitive and efficient tools becomes increasingly important. Implementing object snapping in web map applications not only streamlines the editing process but also ensures that spatial relationships are maintained, thereby enhancing the overall quality of geospatial data. This session will explore various methodologies for developing robust snapping algorithms with HTML and JavaScript, highlighting how these solutions can improve user experience and practical to implement.

For those looking to create a web map application capable of managing data for real-world tasks, such as adjusting the position of a streetlight to a specified area or managing objects to snap to geographic locations, this workshop will address those needs using practical HTML and JavaScript solutions.


This workshop will guide you through the process of creating a web map application that enables users to drag points or objects on the map and snap them to specific geometries such as points, lines, or polygons. For instance, you may want to drag a point and have it snap onto a line, or if there is a polygon area where you want to place an object, you can write additional conditions to restrict the dragging of the object to only the specific areas where it can be placed.

Prerequisite knowledge:

Participants are required to have basic knowledge of HTML and JavaScript.

Material required from the participants:

Laptop with internet connection.