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
});