LogoLogo
Sign upHelp CenterContactSocial
Home
Home
  • Overview
  • REST API
    • Getting started
    • Navigating maps and workspaces
    • Uploading files and URLs
    • Styling layers
    • Refreshing live data layers
    • Working with elements
    • Listening to updates using webhooks
    • API Reference
      • Authentication
      • Maps
      • Layers
      • Elements
      • Users
      • Comments
      • Embed Tokens
      • Sources
      • Projects
  • JS SDK
    • Getting started
    • General concepts
    • Controlling maps
    • Working with selection
    • Reading entities
    • Drawing elements
    • Working with layers
    • Layer filters
    • Building custom charts
    • Map interactions and viewport
    • Hiding and showing
    • Integrating with React
    • Sample application
    • Examples
    • API Reference
  • Felt Style Language
    • Getting started
    • Style definition blocks
      • The config block
      • The paint block
      • The label block
      • The legend block
      • The popup block
      • The attributes block
      • The filters block
    • Types of visualizations
      • Simple visualizations
      • Categorical visualizations
      • Numeric visualizations (color & size)
      • Heatmaps
      • Hillshade
    • Zoom-based Styling
      • Interpolators
    • Legends
    • Errors
    • Examples
Powered by GitBook
On this page
  • Working with the viewport
  • Getting viewport state
  • Setting the viewport
  • Responding to viewport changes
  • Map interactions
  • Click events
  • Hover events
  • Best practices

Was this helpful?

Export as PDF
  1. JS SDK

Map interactions and viewport

The Felt SDK provides methods to control the map's viewport (the visible area of the map) and handle user interactions like clicking and hovering on the viewport.

Working with the viewport

Getting viewport state

You can get the current viewport state using getViewport():

const viewport = await felt.getViewport();
console.log(viewport.center); // { latitude: number, longitude: number }
console.log(viewport.zoom);   // number

Setting the viewport

There are two main ways to set the viewport: moving to a specific point, or fitting to bounds.

Moving to a point

Use setViewport() to move the map to a specific location:

felt.setViewport({
  center: {
    latitude: 37.7749,
    longitude: -122.4194
  },
  zoom: 12
});

Fitting to bounds

Use fitViewportToBounds() to adjust the viewport to show a specific rectangular area:

felt.fitViewportToBounds({
  bounds: [
    west,   // minimum longitude
    south,  // minimum latitude
    east,   // maximum longitude
    north   // maximum latitude
  ]
});

Responding to viewport changes

To stay in sync with viewport changes, use the onViewportMove method:

const unsubscribe = felt.onViewportMove({
  handler: (viewport) => {
    console.log("New center:", viewport.center);
    console.log("New zoom:", viewport.zoom);
  }
});

// Clean up when done
unsubscribe();

Map interactions

Click events

Listen for click events on the map using onPointerClick:

const unsubscribe = felt.onPointerClick({
  handler: (event) => {
    // Location of the click
    console.log("Click location:", event.center);
    
    // Features under the click
    console.log("Clicked features:", event.features);
  }
});

Hover events

Track mouse movement over the map using onPointerMove:

const unsubscribe = felt.onPointerMove({
  handler: (event) => {
    // Current mouse location
    console.log("Mouse location:", event.center);
    
    // Features under the cursor
    console.log("Hovered features:", event.features);
  }
});

Best practices

  1. Cleanup: Always store and call unsubscribe functions when you're done listening for events:

const unsubscribe = felt.onPointerMove({
  handler: (event) => {
    // Handle event...
  }
});

// Later, when you're done:
unsubscribe();
  1. Throttling: For pointer move events, consider throttling your handler if you're doing expensive operations:

import { throttle } from "lodash";

felt.onPointerMove({
  handler: throttle((event) => {
    // Handle frequent mouse moves...
  }, 100) // Limit to once every 100ms
});

By using these viewport controls and interaction handlers, you can create rich, interactive experiences with your Felt map.

PreviousBuilding custom chartsNextHiding and showing

Last updated 6 months ago

Was this helpful?