API usage examples

For your cases, you can use the repository with various examples of using the MapGL JS API. All examples are available in source code: see MapGL Examples.

General examples

• Markers backend: demonstrates working with markers in GeoJSON format and simulating a backend sending data to the client.
• Color buildings: shows how to use featureState to change the color of buildings on the map.
• GLTF-plugin: example of adding an interactive 3D real estate scene to the map using the glTF plugin.
• Polygon drawing: allows the user to draw polygons on the map.
• Raster overlay: overlaying an old paper map on top of a vector map.
• Style changing: applying a new style to the map at specified intervals.

Clustering

• Clustered markers with arcs: clustering markers using arc geometries.
• Clustered markers with popups: displaying popups when clicking on clustered markers.
• Huge clustering: handling a large number of markers with clustering.

Directions API

• Directions API floors: using the Directions API to build routes through building floors.
• Directions API with obstacles: building routes, considering obstacles on the way.
• Basic directions search app: simple application for finding routes using the Directions API.

GeoJSON

• GeoJSON data update: real-time data updates in a GeoJSON source.
• Hover GeoJSON with Polygon: hover effect on GeoJSON data with an additional polygon display.
• Hover GeoJSON setData: hover effect using the setData method for the GeoJSON source.

Dragging

• GeoJSON point dragging: example of a draggable GeoJSON point.
• HTML marker drag: example of a draggable HTML marker.
• Marker drag: example of a draggable marker based on WebGL.

More detailed descriptions and the source code for these examples are available in the GitHub repository.