Как я могу компенсировать отметку центра справа?

Question

Я хочу достичь как это http://techblog.mappy.com/Leaflet-active-area/examples/index.html

Я добавил плавающий контент в левой части раздела. Поэтому маркер должен оставаться в правой части.

Вот demo.

JS:

// *********************************************** 
mapboxgl.accessToken = 'pk.eyJ1IjoiZmFseiIsImEiOiJjaXdmczJha28wMG9sMnVsZnlxZWt1bmxhIn0.v8SlQ70Ay1MzNoPXhlXWVg'; 
// *********************************************** 
// DID YOU FORK THIS EXAMPLE? 
// Enter your access token below 
// and uncomment the line to keep your 
// project online! 
// Need a token? Create free account 
// mapbox.com/signup 
// *********************************************** 
// mapboxgl.accessToken = 'YOUR-ACCESS-TOKEN-HERE'; 
// *********************************************** 
var map = new mapboxgl.Map({ 
    container: 'map', 
    style: 'mapbox://styles/mapbox/light-v9', 
    center: [144.985258,-37.807426], 
    zoom: 14 
}); 

var framesPerSecond = 15; 
var initialOpacity = 1 
var opacity = initialOpacity; 
var initialRadius = 6; 
var radius = initialRadius; 
var maxRadius = 18; 

map.on('load', function() { 

    // Add a source and layer displaying a point which will be animated in a circle. 
    map.addSource('point', { 
     "type": "geojson", 
     "data": { 
      "type": "Point", 
      "coordinates": [ 
       144.985258, -37.807426 
      ] 
     } 
    }); 

    map.addLayer({ 
     "id": "point", 
     "source": "point", 
     "type": "circle", 
     "paint": { 
      "circle-radius": initialRadius, 
      "circle-radius-transition": {duration: 0}, 
      "circle-opacity-transition": {duration: 0}, 
      "circle-color": "#007cbf" 
     } 
    }); 

    map.addLayer({ 
     "id": "point1", 
     "source": "point", 
     "type": "circle", 
     "paint": { 
      "circle-radius": initialRadius, 
      "circle-color": "#007cbf" 
     } 
    }); 


    function animateMarker(timestamp) { 
     setTimeout(function(){ 
      requestAnimationFrame(animateMarker); 

      radius += (maxRadius - radius)/framesPerSecond; 
      opacity -= (.9/framesPerSecond); 

      map.setPaintProperty('point', 'circle-radius', radius); 
      map.setPaintProperty('point', 'circle-opacity', opacity); 

      if (opacity <= 0) { 
       radius = initialRadius; 
       opacity = initialOpacity; 
      } 

     }, 1000/framesPerSecond); 

    } 

    // Start the animation. 
    animateMarker(0); 
}); 

Answer 1

К сожалению, пока не поддерживает что-то вроде fitBounds с прокладкой. https://github.com/mapbox/mapbox-gl-js/issues/1740

Возможный обходной способ может летать на маркер со смещением.

map.flyTo({ 
    center: [144.985258, -37.807426], 
    offset: [300, 0], 
    speed: 0.8, 
    curve: .6 
    });