1

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) {
    }
});

}

  • At the moment you have an esri tag but this question does not seem to be about that company? – PolyGeo Jul 4 '14 at 2:10
  • I am setting my basemap using esri oneMap – 20 Cents Jul 4 '14 at 2:13
  • 1
    1) What is oneMap? It doesn't seem relevant to this problem? 2) Can you post the JSON for the first returned data object in the success function? 3) Can you include the code block where you initialise map? – Stephen Lead Jul 4 '14 at 2:31
  • @StephenLead Hello, can you please check my edited portion? Basically oneMap is an API which I used to set it as my base map as from the edited portion. – 20 Cents Jul 4 '14 at 3:12
  • There is no error message also. It just that the heatmap is not showing up. I did checked with the JSON objects returned but nothing went wrong with that as they are not null. That's why I wonder whether is it because of the map spatial reference problem? – 20 Cents Jul 4 '14 at 3:23
2

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/

  • So basically do I still need the getFeatures functions as I already retrieving the data stored in JSON format. But my lat long is stored in this format: 28520.7547,29340.37274; 28600.63151,29341.78677. Does that still able to apply to use the heatmap provided by esri? – 20 Cents Jul 4 '14 at 5:20
  • Hello, can you please check my edited portion? I did plot out the heatmap but it only loop to the end of my last set of results and plot out the last one instead of all. Do you have any ideas? – 20 Cents Jul 4 '14 at 5:42
  • I would abandon the Google Maps part of your code - that's never going to work. Instead I would try to plot the results of the query as points (forget about the heatmap for the moment). So in the Success part of your callback you have access to the Data - add those points to the map as points. This will sort out any projection issues (by the way your data is projected and not lat/long). Once that is resolved, you can move on to creating a heatmap from the points – Stephen Lead Jul 4 '14 at 5:50
  • Sorry to trouble you again but I wonder is it possible to set the weight of heatmap based on the amcommuterAmt I get? Because currently it just showing the same heatmap at different point – 20 Cents Jul 4 '14 at 6:08
  • 1
    Glad you got it working - can you ask the second part (how to apply weights to a heatmap) as a new question? See gis.stackexchange.com/tour - each post on Stack Exchange should be about a single question – Stephen Lead Jul 4 '14 at 12:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.