How to display markers (huge numbers) on a map whi

Question

What i have done so far: i'm developing an application where i have to display more than(50K) points/Markers on the Navteq map divided into different segments. for example: if i have 50K points i will divide all points into different segments.

if i divide 50K points into 50 segments each segment would have 1000 points (may not be 50 segments , it may depend). right now it is working but it takes long time and hangs to render all the points on the MAP.so that i would like to perform segmentation displaying to display only few points with clustering. so that i can get an idea of how the segment will look like.

but the problem here is i should only perform the clustering based on the segments.otherwise points from different segments willbe mixed together and displayed as single unit and that conveys the wrong information to the user.

so here my question is: is it possible to perform the clustering based on the segment. so that only points from same segment will be clustered.

Note: if this is not possible, i would like to use Latest version of here-maps 2.5.3 (Asynchronous) may reduce some time while loading, so that i would like to use indexing functionality also while rendering the points to improve the rendering time using nokia.maps.clustering.Index class.

i studied that indexing would reduce the time while rendering the points/markers on map. does it help in my case? could anybody please suggest how to perform indexing ?

This is the code with which i'm displaying points on map:

function displayAllLightPoints(arrLightPointCoordinats, totalLightPoints, 
                    selectedSegmentId, totalSegmentsCount,segmentColorcode) 
{
    var MyTheme1 = function () {   
    };
    segmentColorcode = segmentColorcode.substring(2,segmentColorcode.length-1);

    MyTheme1.prototype.getNoisePresentation = function (dataPoint) {
            var markerLightPoint = new nokia.maps.map.Marker(dataPoint, {
            icon: new nokia.maps.gfx.BitmapImage("..//Images//Lightpoint//" + 
                                                  segmentColorcode + ".png"),
            anchor: {
                x: 12,
                y: 12
            }
        });
        return markerLightPoint;     
    };

    MyTheme1.prototype.getClusterPresentation = function (data) {   
        var markerLightPoint = new 
            nokia.maps.map.StandardMarker(data.getBounds().getCenter(), {
            icon: new nokia.maps.gfx.BitmapImage("..//Images//
                Segment/" + segmentColorcode + ".png", null, 66, 65),
            text: data.getSize(),
            zIndex: 2,
            anchor: {
                x: 12,
                y: 12
            }
        });
        return markerLightPoint; 
    };

    var ClusterProvider = nokia.maps.clustering.ClusterProvider,
        theme = new MyTheme1(),
        clusterProvider = new ClusterProvider(map, {
            eps: 0.00000000001,
            minPts: 1000000,
            strategy: nokia.maps.clustering.ClusterProvider.
                                     STRATEGY_DENSITY_BASED,
            theme: theme,
            dataPoints: []
        });
    var lightpointsDataSet1 = new Array();
    for (var i = 0; i < totalLightPoints; i++) {     
        lightpointsDataSet1[i] = { latitude: arrLightPointCoordinats[i][0], 
             longitude: arrLightPointCoordinats[i][1], title:
            'LightPoint ' + (i + 1) };
    }

    clusterProvider.addAll(lightpointsDataSet1);
    clusterProvider.cluster();
}

Answer 1

To deal with a very large (50K+) data set , I would do all the heavy number crunching server side and send over a new JSON response whenever the map is updated. Something like the HTML page described here

The key section of the code is the ZoomObserver:

var zoomObserver = function (obj, key, newValue, oldValue) {
  zoom = newValue;
  if (zoom < 7)
    { zoom = 7;}
  if (zoom > 16)
    { zoom = 16;}
  // Define the XML filename to read that contains the marker data
  placeMarkersOnMaps('http://api.maps.nokia.com/downloads/java-me/cluster/'+ zoom + '.xml' 
    + '?lat1=' + map.getViewBounds().topLeft.latitude
    + '&lng1='+ map.getViewBounds().topLeft.longitude
    + '&lat2='+ map.getViewBounds().bottomRight.latitude
    + '&lng2='+ map.getViewBounds().bottomRight.longitude);
};

map.addObserver("zoomLevel", zoomObserver );

Where the REST service returns a "well-known" data format which can be used to add markers and clusters to the map.

Now assuming you have two massive data sets you could make two requests to different endpoints, or somehow distinguish which cluster of data belongs to which so that you would just be returning information of the form:

{latitude':51.761,'longitude':14.33128,'value':102091},

i.e. using the DataPoint standard (which means you could use a heat map as well.

Of course, what I'm not showing here is the back-end functionality to cluster in the first place - but this leaves the client (and the API) to do what it does best displaying data, not number crunching.