Ammap.js 4 - set map to be half static view globe + set mapObject to be center

Question

I'm using Ammap js version 4 to bulid static website.

1. I want to make the map to be half globe like:

2. When user click on specific div I want to center the globe accoring to specific lat/long coors with rotate animation, any ideas? I've tried the function zoomToMapObject, but it doesn't work corrent and I don't need the zoom feature.

my code:

      am4core.useTheme(am4themes_animated);
      var chart = am4core.create("chartdiv", am4maps.MapChart);
      var interfaceColors = new am4core.InterfaceColorSet();
      chart.seriesContainer.draggable = false;
      chart.seriesContainer.resizable = false;

      chart.homeGeoPoint = {
        latitude: 0,
        longitude: 0
      };
      chart.deltaLongitude = 100;

      var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
      polygonSeries.useGeodata = true;

      polygonSeries.calculateVisualCenter = true;
      polygonSeries.tooltip.background.fillOpacity = 0.2;
      polygonSeries.tooltip.background.cornerRadius = 20;

      var template = polygonSeries.mapPolygons.template;
      template.nonScalingStroke = true;
      template.fill = am4core.color("#D3DDE7");
      template.stroke = am4core.color("#c5cfd8");

      polygonSeries.calculateVisualCenter = true;
      template.propertyFields.id = "id";
      template.tooltipPosition = "fixed";
      template.fillOpacity = 1;
      try {
        chart.geodata = am4geodata_worldLow;
      } catch (e) {
        chart.raiseCriticalError(
          new Error(
            'Map geodata could not be loaded. Please download the latest <a href="https://www.amcharts.com/download/download-v4/">amcharts geodata</a> and extract its contents into the same directory as your amCharts files.'
          )
        );
      }

      let cities = chart.series.push(new am4maps.MapImageSeries());
      cities.mapImages.template.nonScaling = true;

      let city = cities.mapImages.template.createChild(am4core.Circle);
      city.radius = 10;
      // city.fill = am4core.color("#666EE8");

      function addCity(coords, title, color) {
        let city = cities.mapImages.create();
        city.fill = am4core.color(color);
        city.latitude = coords.latitude;
        city.longitude = coords.longitude;
        city.tooltipText = title;
        return city;
      }

      // Set projection
      chart.projection = new am4maps.projections.Orthographic();
      chart.panBehavior = "rotateLong";

      let paris = addCity(
        { latitude: 48.8567, longitude: 2.351 },
        "Paris",
        "#ff0000"
      );
      let toronto = addCity(
        { latitude: 43.8163, longitude: -79.4287 },
        "Toronto",
        "#ff9d00"
      );
      let la = addCity(
        { latitude: 34.3, longitude: -118.15 },
        "Los Angeles",
        "#b600ff"
      );
      //let havana = addCity({ latitude: 23, longitude: -82 }, "Havana");
      let polygonTemplate = polygonSeries.mapPolygons.template;
      var lineSeries = chart.series.push(new am4maps.MapLineSeries());
      lineSeries.mapLines.template.stroke = am4core.color("#666EE8");
      lineSeries.mapLines.template.strokeWidth = 2;
      lineSeries.data = [
        {
          multiGeoLine: [
            [
              { latitude: paris.latitude, longitude: paris.longitude },
              { latitude: toronto.latitude, longitude: toronto.longitude },
              { latitude: la.latitude, longitude: la.longitude }
            ]
          ]
        }
      ];
      document.getElementsByClassName("option-1")[0].onmouseover = function() {
        chart.zoomLongitude = paris.longitude;
        chart.zoomLatitude = paris.latitude;
      };
      document.getElementsByClassName("option-2")[0].onmouseover = function() {
        chart.zoomLongitude = toronto.longitude;
        chart.zoomLatitude = toronto.latitude;
      };
      document.getElementsByClassName("option-3")[0].onmouseover = function() {
        chart.zoomLongitude = la.longitude;
        chart.zoomLatitude = la.latitude;
      };

Answer 1

The map/globe position is controlled by deltaLongitude. You even have that in your code. (related docs about map rotation)

So, if you need to rotate the globe to specific position, you can set deltaLongitude or even animate it. E.g.:

// rotate to Asia instantly
chart.deltaLongitude = -90;

// or animate rotation
animation = chart.animate({
  property: "deltaLongitude",
  to: -90
}, 2000);

Here's a working example:

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4maps.MapChart);

// Set map definition
chart.geodata = am4geodata_worldLow;


// Set projection
chart.projection = new am4maps.projections.Orthographic();
chart.panBehavior = "rotateLongLat";
chart.deltaLatitude = -20;
chart.padding(20,20,20,20);


// Create map polygon series
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

// Make map load polygon (like country names) data from GeoJSON
polygonSeries.useGeodata = true;

// Configure series
var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}";
polygonTemplate.fill = am4core.color("#47c78a");
polygonTemplate.stroke = am4core.color("#454a58");
polygonTemplate.strokeWidth = 0.5;

var graticuleSeries = chart.series.push(new am4maps.GraticuleSeries());
graticuleSeries.mapLines.template.line.stroke = am4core.color("#ffffff");
graticuleSeries.mapLines.template.line.strokeOpacity = 0.08;
graticuleSeries.fitExtent = false;

// Water
chart.backgroundSeries.mapPolygons.template.polygon.fill = am4core.color("#454a58");
chart.backgroundSeries.mapPolygons.template.polygon.fillOpacity = 1;

// Create hover state and set alternative fill color
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = chart.colors.getIndex(0).brighten(-0.5);

// Rotation function
var animation;
function rotateTo(delta) {
  if(animation){
    animation.stop();
  }
  animation = chart.animate({
    property: "deltaLongitude",
    to: delta
  }, 2000);
}

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/geodata/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
<input type="button" value="Europe" onclick="rotateTo(0);" />
<input type="button" value="Americas" onclick="rotateTo(90);" />
<input type="button" value="Asia" onclick="rotateTo(-90);" />
<input type="button" value="Australia" onclick="rotateTo(-130);" />