MapMetrics Examples
Getting Started
| Example | Path |
|---|---|
| Simple Map (CDN) | /sdk/examples/simple-map-cdn |
| Simple Map (NPM) | /sdk/examples/simple-map-npm |
| React Map Integration | /sdk/examples/react-map-example |
Markers & Popups
| Example | Path |
|---|---|
| Add a Marker | /sdk/examples/add-a-marker |
| Add a Popup | /sdk/examples/add-a-popup |
| Add Image as a Marker | /sdk/examples/add-image-marker |
| Draggable Marker | /sdk/examples/draggable-marker |
| Display a Popup | /sdk/examples/display-popup |
| Popup on Click | /sdk/examples/popup-on-click |
| Popup on Hover | /sdk/examples/popup-on-hover |
3D & Buildings
| Example | Path |
|---|---|
| 3D Building | /sdk/examples/3d-building |
| Add a 3D Model (Three.js) | /sdk/examples/3d-model-threejs |
| Building Color by Zoom | /sdk/examples/building-color-zoom |
Terrain & Elevation
| Example | Path |
|---|---|
| 3D Terrain | /sdk/examples/3d-terrain |
| Sky, Fog and Terrain | /sdk/examples/sky-fog-terrain |
| Add a Hillshade Layer | /sdk/examples/add-a-hillshade-layer |
| Add a Color Relief Layer | /sdk/examples/add-a-color-relief-layer |
| Add Contour Lines | /sdk/examples/add-contour-lines |
| Satellite Map with Terrain | /sdk/examples/satellite-terrain |
Geometry & GeoJSON
| Example | Path |
|---|---|
| Add a GeoJSON Line | /sdk/examples/add-geojson-line |
| Add a GeoJSON Polygon | /sdk/examples/add-geojson-polygon |
| Draw GeoJSON Points | /sdk/examples/draw-geojson-points |
| Add a Geometry | /sdk/examples/add-a-geometry |
| Multiple Geometries from One Source | /sdk/examples/multiple-geometries |
Clustering & Heatmaps
| Example | Path |
|---|---|
| Create and Style Clusters | /sdk/examples/add-a-cluster |
| Cluster Points with Custom Styling | /sdk/examples/html-clusters |
| Add a Heatmap | /sdk/examples/add-a-heatmap |
Camera & Navigation
| Example | Path |
|---|---|
| Fly to a Location | /sdk/examples/fly-to-location |
| Fit to Bounding Box | /sdk/examples/fit-to-bounding-box |
| Set Pitch and Bearing | /sdk/examples/set-pitch-and-bearing |
| Animate Camera Around a Point | /sdk/examples/animate-camera-around-point |
| Jump to a Series of Locations | /sdk/examples/jump-to-locations |
| Slowly Fly to a Location | /sdk/examples/slowly-fly-to-location |
| Fly to Location on Scroll | /sdk/examples/fly-to-location-on-scroll |
| Sync Multiple Maps | /sdk/examples/sync-multiple-maps |
Lines & Polygons
| Example | Path |
|---|---|
| Animate a Line | /sdk/examples/animate-a-line |
| Animate a Point Along a Route | /sdk/examples/animate-point-along-route |
| Style Lines with Data-Driven Property | /sdk/examples/data-driven-lines |
| Draw a Gradient Line | /sdk/examples/gradient-line |
| Draw a Circle | /sdk/examples/draw-a-circle |
| Add a Pattern to a Polygon | /sdk/examples/add-pattern-to-polygon |
| Filter Within a Layer | /sdk/examples/filter-within-layer |
Animations
| Example | Path |
|---|---|
| Animate a Point | /sdk/examples/animate-point |
| Animate a Marker | /sdk/examples/animate-marker |
| Update a Feature in Realtime | /sdk/examples/update-feature-realtime |
User Interaction
| Example | Path |
|---|---|
| Hover Effect | /sdk/examples/hover-effect |
| Mouse Coordinates | /sdk/examples/mouse-coordinates |
| Locate the User | /sdk/examples/locate-user |
| Get Features Under Mouse | /sdk/examples/get-features-under-mouse |
| Show Polygon Info on Click | /sdk/examples/show-polygon-info-on-click |
| Measure Distances | /sdk/examples/measure-distances |
Icons & Images
| Example | Path |
|---|---|
| Add an Icon to the Map | /sdk/examples/add-an-icon-to-the-map |
| Add a Generated Icon | /sdk/examples/add-generated-icon |
| Add an Animated Icon | /sdk/examples/add-animated-icon |
| Add a Stretchable Image | /sdk/examples/add-stretchable-image |
| Add Custom Icons with Markers | /sdk/examples/add-custom-icons-markers |
| Display a Remote SVG Symbol | /sdk/examples/display-remote-svg-symbol |
Layer Styling & Filtering
| Example | Path |
|---|---|
| Add Layer Below Labels | /sdk/examples/add-layer-below-labels |
| Change Layer Color at Runtime | /sdk/examples/change-layer-color |
| Filter by Text Input | /sdk/examples/filter-by-text-input |
| Filter by Toggle List | /sdk/examples/filter-by-toggle-list |
Map Controls
| Example | Path |
|---|---|
| Navigation Controls | /sdk/examples/navigation-controls |
| Disable Map Rotation | /sdk/examples/disable-map-rotation |
| Disable Scroll Zoom | /sdk/examples/disable-scroll-zoom |
| Fullscreen Map | /sdk/examples/fullscreen-map |
| Toggle Map Interactions | /sdk/examples/toggle-interactions |
Labels & Text
| Example | Path |
|---|---|
| RTL Script Support | /sdk/examples/rtl-support |
| Change Label Case | /sdk/examples/change-label-case |
Advanced
| Example | Path |
|---|---|
| Create a Draggable Point | /sdk/examples/draggable-point |
| Display the Whole World | /sdk/examples/display-whole-world |
| Render World Copies | /sdk/examples/render-world-copies |
| Game-Like Controls | /sdk/examples/game-controls-navigation |