Google Map in Web Framework adding Markerclusterer

[efullman]

I'm trying to move some applications to the Web Framework from Advanced XML including a Twitter Listening app that would use the GoogleMapView instead of the Google Map App with Advanced XML.

The new GoogleMapView doesn't seem to have implemented MarkerClusterer as in the Google API Splunk App, and isn't well documented enough to understand how the "map" field can be used to implement layers and functions like MarkerCusterer.

I have too many points to plot to not have clustering. Without this functionality the new GoogleMapView seems partially implemented, only a relatively small number of points can be plotted. The Maps aren't very reusable.

The challenge is how to implement the hook to the map field. I've got the GoogleMapView plotting the map, but it ignores the MarkerClusterer command. I'm using the MarkerClustererPlus code found here: (website: google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/docs/reference.html )

I'm not seeing any errors in the console. I've tried multiple combinations with .render(); on the MarkerClusterer, putting outside the require (deps, etc. The challenge is that all the code examples that are provided are really simple.

Has anyone tried to repurpose the Google Map App for the web framework? Or does anyone have some code examples I can use?

Ultimately I would love to implement Heatmap.js (website: patrick-wied.at/static/heatmapjs/example-heatmap-googlemaps.html) as a layer, as an alternative to the MarkerClusterer.

I have this app already running under Advanced XML with the Google Map App. It's frustrating that we can't use the GoogleMapView as easily.

Your help is really appreciated.

---

{% block js %}

<script src="{{STATIC_URL}}{{app_name}}/markerclustererpl.js" type="text/javascript">
</script>
<script>
    var deps = [
        "splunkjs/ready!",
        "splunkjs/mvc/googlemapview"  
    ];
    require(deps, function(mvc) {
        var GoogleMapView = require("splunkjs/mvc/googlemapview");

        // Create Googlemap
           tweetmap = new GoogleMapView({
            id: "Tweetgooglemap",
            managerid: "Tweet-search",
            scrollwheel: false,
            center: ({lat:39.10190, lng:-84.50970}),
            mapTypeId: "roadmap",
            zoom: 4,
            mapTypeControl: false,
            el: $("#tweetview")
        }).render();
      var mc = new MarkerClusterer(tweetmap);       
      });


</script>
{% endblock js %}

[igorlazarev]

if you are find a solution please post

[efullman]

Spending more time with this problem, I was able to partially solve my need for MarkerClusterer by using the SplunkMapView versus the GoogleMapView. SplunkMapView implements OpenStreetMap. The functionality of the Leaflet MarketClusterer is partially deployed. A lot of the animation available in Leaflet isn't deployed in the Splunk-Mapping.js file.

[efullman]

I was looking through the Splunk mapping code at splunk_mapping.js, and I noticed that Leaflet makerclusterer has been implemented. Can someone from Splunk provide any code examples of invoking this information, or the code on implementing layers like heatmap.js.