[GIS] Using Google Map Spatial Reference to plot HeatMap

coordinate systemgoogle mapsheat mapjavascript

Basically I am trying to plot a Google heatmap based on the JSON objects returned. Here is my JavaScript:

function getHeatMap() {
var gradient = [
                        'rgba(185, 185, 203, 0)',
                        'rgba(145, 145, 192, 0)',
                        'rgba(65, 65, 207, 0)',
                        'rgba(30, 30, 229, 1)',
                        'rgba(0, 185, 255, 1)',
                        'rgba(0, 255, 215, 1)',
                        'rgba(0, 255, 15, 1)',
                        'rgba(0, 255, 0, 1)',
                        'rgba(255, 255, 0, 1)',
                        'rgba(255, 235, 0, 1)',
                        'rgba(255, 0, 0, 1)'
]
$.ajax({
    url: "index.aspx/getBusCommuter",
    type: "POST",
    data: "",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        var parsed = JSON.parse(data.d);
        var data = [];
        var max = 0;
        $.each(parsed, function (i, jsondata) {
            var coordXicon = jsondata.BusStopX;
            var coordYicon = jsondata.BusStopY;
            var commuterAmt = jsondata.CommuterAmt;
            var point = new esri.geometry.Point({ "x": coordXicon, "y": coordYicon, "spatialReference": { "wkid": 3414 } });

            var count = commuterAmt;
            data.push({
                location: point,
                weight: count
            });             

            if (count > max) {
                max = count;
            }

            var heatmap = new google.maps.visualization.HeatmapLayer({
                data: data,
                radius: 30,
                opacity: 0.8,
                maxIntensity: max,
                setMap: map
            });

            heatmap.set('gradient', gradient);
        });
    },
    error: function (request, state, errors) {
    }
});
}

Here is the part where I initialise the baseMap:

function setMap() {
function init() {
    require(
        [
            "esri/map",
            "dojo/dom-construct",
            "dojo/domReady!"
        ],
        function 
        (
            Map,
            domConstruct
        ) {
            map = Map("map-canvas",
            {
                //infoWindow: popup
            });
            map.setZoom(1);
            coreFunctions();
        });

}
dojo.ready(init);
}

function coreFunctions() {
try {
    addLayersToMap();
}
catch (err) {
    console.log(err);
}
}
function addLayersToData() {
    var layer = new esri.layers.ArcGISTiledMapServiceLayer("https://www.onemap.sg/ArcGIS/rest/services/BASEMAP/MapServer");
    mapLayers.push(layer);
    var layer2 = new esri.layers.ArcGISTiledMapServiceLayer("http://www.onemap.sg/ArcGIS/rest/services/LOT_VIEW/MapServer");
    mapLayers.push(layer2);
    layer2.hide();
}

function addLayersToMap() {
    addLayersToData();
    for (var a = 0; a < mapLayers.length; a++) {
        map.addLayer(mapLayers[a]);
    }
    map.setZoom(1);
}

The JSON objects did returned some data. But when I try to plot it as a heatmap overlayer, the heatmap does not show. I am using spatial reference 3414 for the data to plot on OneMap. I wonder is it because of the difference of spatial reference that caused my heatmap does not show.

EDIT 

function getHeatMap() {
heatLayer = new HeatmapLayer({
    config: {
        "useLocalMaximum": true,
        "radius": 40,
        "gradient": {
            0.45: "rgb(000,000,255)",
            0.55: "rgb(000,255,255)",
            0.65: "rgb(000,255,000)",
            0.95: "rgb(255,255,000)",
            1.00: "rgb(255,000,000)"
        }
    },
    "map": map,
    "domNodeId": "heatLayer",
    "opacity": 0.85
});

$.ajax({
    url: "index.aspx/getBusCommuter",
    type: "POST",
    data: "",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        var parsed = JSON.parse(data.d);
        $.each(parsed, function (i, jsondata) {
            var coordXicon = jsondata.BusStopX;
            var coordYicon = jsondata.BusStopY;
            var data = [
       {
           attributes: {},
           geometry: {
               spatialReference: { wkid: 102100 },
               type: "point",
               x: coordXicon,
               y: coordYicon
           }
       }
            ];

            heatLayer.setData(data);

        });
        map.addLayer(heatLayer);
    },
    error: function (request, state, errors) {
    }
});

}

Best Answer

Thanks for the clarification.

It appears that you are mixing the ArcGIS JS API's map object with the Google Maps API's heatmap functionality. This is highly unlikely to work.

Instead you could look at the ArcGIS Server JS API's heatmap functionality. This isn't officially supported but stands a better chance of working - see https://github.com/Esri/heatmap-layer-js

There is a working example at http://tmappsevents.esri.com/stage/heatmap/

Related Question