Google Maps to Nokia Maps - Heat Map

Para listar um heatmap o Google Maps exige que os dados estejam em uma Google Fusion Table enquanto que o Nokia Maps permite outras formas de carregamento.

Por esse motivo, excepcionalmente, os dois mapas serão diferentes, pois possuem fontes de dados diferentes. Os dados do exemplo estão em um javascript de nome earthquakes.js, disponível em /samples/heatmap/earthquakes.js

Google Maps

var map;


function initialize() {

map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: new google.maps.LatLng(10, -100),
        zoom: 1,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

var layer = new google.maps.FusionTablesLayer({
        query: {
          select: 'location',
          from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
        },
        heatmap: {
          enabled: true
        }
      });

layer.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

Nokia Maps

function nokiaMaps()
{
    nokia.Settings.set( "appId", "_peU-uCkp-j8ovkzFGNU"); 
    nokia.Settings.set( "authenticationToken", "gBoUkAMoxoqIWfxWA5DuMQ");

    // Get the DOM node to which we will append the map
    var mapContainer = document.getElementById("mapContainer");

    // Create a map inside the map container DOM node
    var map = new nokia.maps.map.Display(mapContainer, {
      components: [
        // Add the behavior component to allow panning / zooming of the map
        new nokia.maps.map.component.Behavior()
      ],
      zoomLevel: 2
    });

    var heatmapProvider;
    try {
      // Creating Heatmap overlay
      heatmapProvider = new nokia.maps.heatmap.Overlay({
        // This is the greatest zoom level for which the overlay will provide tiles
        max: 20,
        // This is the overall opacity applied to this overlay
        opacity: 0.6,
        // Defines if our heatmap is value or density based
        type: "value",
        // Coarseness defines the resolution with which the heat map is created.
        coarseness: 2
      });
    } catch (e) {
      // The heat map overlay constructor throws an exception if there
      // is no canvas support in the browser
      alert(e);
    }
    // Only start loading data if the heat map overlay was successfully created
    if (heatmapProvider) {
      /* We load a data file containing data points for the heat map
       * LoadScript is an helper function and not part of the Nokia Maps API
       * See exampleHelpers.js for implementation details 
       */
      loadScript(
        "earthquakes.js", 
        function () {
          /**
           * Filtering data to show only eartquakes with magnitud above 1.5. Variable data comes from script inserted in head (heatmap.js)
           * This file is array of objects like:
           * data = [
           *    {latitude: 53, longitude: 13: value 5.3},
           *    ....
           * ];
           */
          for (var i = 0; i < data.length; i++) {
            if (data[i].value < 1.5) {
              data.splice(i, 1);
            }
          }
          
          // Rendering the heat map overlay onto the map
          heatmapProvider.addData(data);
          map.overlays.add(heatmapProvider);
        }
      );
    }
}

HTML

  
<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps JavaScript API v3 Example: Map Geolocation</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <style type="text/css">
      html, body {
       
        overflow:hidden;
      }

      
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        width: 100%;
        height: 100%;
        position: absolute;
      }

      #map_canvas {
        width: 400px;
        height: 400px;
        left: 0px;
        top: 0;
        position: absolute;
      }
      
      #mapContainer {
        width: 400px;
        height: 400px;
        left: 450px;
        top: 0;
        position: absolute;
      }
    </style>
    <!-- chamada à api do Google Maps e código que mostra o mapa do Google Maps. Coloquei em JS separados para não ficar muito confuso aqui -->
    <!--
    Include the maps javascript with sensor=true because this code is using a
    sensor (a GPS locator) to determine the user's location.
    See: https://developers.google.com/apis/maps/documentation/javascript/basics#SpecifyingSensor
    -->
    <script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?sensor=true">
    </script>
    
    <script type="text/javascript" src="google.js"></script>
     
    <!-- Clamada a API do Nokia Maps e código que mostra o mapa do Nokia Maps-->
    <script type="text/javascript" src="exampleHelper.js"></script>
    <script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.0//jsl.js?with=all"></script>
    <script type="text/javascript" src="nokia.js"></script>
 
  
  </head>  
  <body>
    <div id="map_canvas"></div>
    <div id='mapContainer'> </div>
       <script type="text/javascript"> 
         nokiaMaps(); 
       </script>
  </body>
</html>

Resultado

Página com exemplo completo