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. Eg:

// 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);" />