Help with fitBounds

I’m new to TomTom from goog maps and having trouble understanding how to use fitBounds.

EDIT - OK I figured out how to do this. I went back and started from scratch. I think I had mixed up tutorials from different versions of the API hence my confusion. Here’s a working example just in case anyone else needs help with fitting markers to screen.

    	<link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.1.0/maps/maps.css'/>
     <script src='https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.1.0/maps/maps-web.min.js'> 
   </script>
    <div id='map' class='use-all-space' style="width:100%;height:500px;"></div>
    <script>
      var apiKey = 'xyz';
      var centerCoords = [4.89218, 52.37187];
      var artMap = tt.map({
          key: apiKey,
          container: 'map',
          center: centerCoords,
          style: '/wp-content/uploads/TomTomSDK/styles/custom.json', //'mono.json',
          zoom: 12
      });
      artMap.addControl(new tt.FullscreenControl({ container: document.querySelector('body') }));
      artMap.addControl(new tt.NavigationControl());

      var marker = new tt.Marker().setLngLat(centerCoords).addTo(artMap);
      var popupOffsets = {
        top: [0, 0],
        bottom: [0, -35],
        'bottom-right': [0, -35],
        'bottom-left': [0, -35],
        left: [25, -35],
        right: [-25, -35]
      }


      var popup = new tt.Popup({offset: popupOffsets}).setHTML("<b>Speedy's pizza</b><br/>100 Century Center Ct 210, San Jose, CA 95112, USA");
      marker.setPopup(popup).togglePopup();

      var markerA = new tt.Marker().setLngLat([-74.006985, 40.745866]).addTo(artMap);
      var markerB = new tt.Marker().setLngLat([-74.007247, 40.746704]).addTo(artMap);
      var markerC = new tt.Marker().setLngLat([-73.966502, 40.769442]).addTo(artMap);
      var markerD = new tt.Marker().setLngLat([-0.143032, 51.509395]).addTo(artMap);
      var markerE = new tt.Marker().setLngLat([114.1553411, 22.283054]).addTo(artMap);
      var markerF = new tt.Marker().setLngLat([2.3629189, 48.8609457]).addTo(artMap);
      var markerG = new tt.Marker().setLngLat([2.3629189, 48.8609457]).addTo(artMap);

    var bounds = [[-74.007247, 22.283054], [114.1553411, 51.509395]];

      artMap.fitBounds(bounds, {
        padding: { top: 5, bottom:5, left: 15, right: 5 },
        maxZoom: 12
      });
2 Likes

I am in the same situation as you are/were. It helped thanks.

1 Like