Create a story map, fly to a location based on the scroll position

Create a story map. As you scroll down the page, the map will automatically move to the specific location of each chapter in the story.




Related examples




  
  
  
    

      
        
          
          Creates an animated map to fly between different locations
        
        
Creates an animated map to fly between different locations

        Example
        
This example uses SDK JS to fly between different locations and visualize the frequency of US schools by location using a heatmap layer with low zoom levels and a styled circles layer with a data-driven property for zoom levels in more detail.

      
    

    

      
        
          
          Fit a map to a bounding box
        
        
Fit a map to a bounding box

        Example
        
Fit the map to a specific area, regardless of the pixel size of the map.

      
    

    

      
        
          
          Fit to the bounds of a lineString
        
        
Fit to the bounds of a lineString

        Example
        
Get the bounds of a lineString.

      
    

    

      
        
          
          Fly to a location
        
        
Fly to a location

        Example
        
Use flyTo to smoothly interpolate between locations.

      
    




      
      

      
        An extension of MapLibre GL JS