CODEWITHSUNDEEP
javascriptload-testinggoogle-earth-plugin
Or Betzalel
Or Betzalel

Reputation: 2597

Google Earth API Draw many placemarks without crashing the browser

I am using google earth api and I want to draw multiple placemark (points and polygons) on the map at once. The actual scenario is that the user have a list of its and he can click them to draw them 1 by 1 or click the draw all button which will then start drawing about 3000 placemarks. The problem is after a few second the browser/plugin crashes or prompts the user to stop the plugin from executing.

This is an example code I made : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<head>
<title>Many Points Test!</title>
<script src="http://www.google.com/jsapi?key=ABQIAAAAwbkbZLyhsmTCWXbTcjbgbRSzHs7K5SvaUdm8ua-Xxy_-2dYwMxQMhnagaawTo7L1FE1-amhuQxIlXw"></script>
<script>
google.load("earth", "1");

var ge = null;

function init() {
  google.earth.createInstance("map3d", initCallback, failureCallback);
}

function initCallback(object) {
  ge = object;
  ge.getWindow().setVisibility(true);

  // Get the current view.
    var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);

    // Set new latitude and longitude values.
    lookAt.setLatitude(37.802);
    lookAt.setLongitude(-122.448425);
    lookAt.setRange(1000);

    // Update the view in Google Earth.
    ge.getView().setAbstractView(lookAt);

  addPoints(1);
}

function failureCallback(object) {
}

function addPoints(num) {
    for(var i = 0; i < num; i++)
     {
        var x = "37.802" + i.toString();
         var kmlString = ''
                         + '<?xml version="1.0" encoding="UTF-8"?>'
                         + '<kml xmlns="http://www.opengis.net/kml/2.2">'

                         + '<Document>'

                         + '  <Placemark>'
                         + '    <name>Placemark from KML string</name>'
                         + '    <Point>'
                         + '      <coordinates>-122.448425,'+x+',0</coordinates>'
                         + '    </Point>'
                         + '  </Placemark>'

                         + '</Document>'
                         + '</kml>';

         var kmlObject = ge.parseKml(kmlString);
         ge.getFeatures().appendChild(kmlObject);
    }
}
</script>
</head>
<body onload='init()' id='body'>
<center>
  <div id='map3d' style='border: 1px solid silver; height: 600px; width: 800px;'></div>
  <input onclick="addPoints(10000)" value="Add Many Points" type="button" />
</center>
</body>
</html>

Anyone know How I can keep the browser responsive or even load the placemarks in an asynchronous way?

Upvotes: 1

Views: 139

Answers (1)

Or Betzalel
Or Betzalel

Reputation: 2597

What seemed to solve it was pausing between every placemark I drew using setTimeout : 

    function addPoints(arr, index) {
        var end = Math.min(arr.length, index + 1);

        for (var i = index; i < end; i++) {
            var kmlObject = ge.parseKml(arr[i]);
            ge.getFeatures().appendChild(kmlObject);
            document.getElementById('done').innerHTML = i;
        }

        if (end != arr.length) {
            setTimeout(function () {
                addPoints(arr, end);
            }, 1);
        } else {
            alert('done');
        }
    }

    addPoints(arr, 0); /* Function Call */

Upvotes: 1

Related Questions