Skip to main content

Load fire effect

Dynamic flame effects can be generated based on pictures.

show
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Fire effect</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
  <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.16.0/mapmost-webgl-min.js"></script>
</head>
<body>
  <div id="map"></div>
  <script>
    let map = new mapmost.Map({
      container: "map",
      style: "<your style url>",
      center: [120.74325652916878, 31.309846027685396, 0],
      zoom: 16.810035105070947,
      pitch: 59.48725112156901,
      bearing: -54.10626584095007,
      userId: "***", // Authorization code
    });

    map.on("load", function () {
      let options = {
        id: "model_id",
        type: "model",
        callback: function (group, layer) {
          // add flame
          layer.addFlame(
            {
              coordinate: [120.74325652916878, 31.309846027685396, 0], // The position of the center of the bottom of the flame
              size: [100, 100, 100], // flame size
              imgUrl: "./Fire.png" // Flame texture path
            }
          );
        },
      };
      map.addLayer(options);
    });
  </script>
</body>
</html>