Implement Markerclusterer in GWT Google Maps V3 ,through JSNI about gwt-maps-v3-api HOT 29 OPEN

http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries - Someone asked if we could implement the cluster

http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/markerclusterer/docs/reference.html

from gwt-maps-v3-api.

This library is huge, but does have some inviting utility classes. Maybe after 3.10 I might endeavor on.

from gwt-maps-v3-api.

Good point. From a low ever GWT perspective, I'm sometimes weary of large bolt on libraries. For example the Garmin Communicator API downloads nearly 2 dozen js libs and jquery to do even the simplest task. Hence I did gwt-garmin-api as a native implementation in just 8k.

Hence, to include something like that, we'd need to be sure to make it optional in the loader.

from gwt-maps-v3-api.

Sounds like a nifty api. :)

I agree. I was thinking separate module, and maybe child modules with in that.

from gwt-maps-v3-api.

Correct. What I really love about GWT is the minimalism of the final compiled product while many a framework these days bolts dependencies on top of dependencies. I recall a major retailer's landing page that required 276 downloads to load.

from gwt-maps-v3-api.

Great point! ... Holy moly 276...

from gwt-maps-v3-api.

Hi,

Does anyone have an example of using the MarkerClusterer in GWT Maps API V3?
Thanks a lot.

from gwt-maps-v3-api.

I need to investigate to see if this fits this issue:
https://github.com/branflake2267/GWT-Maps-V3-Api/tree/master/gwt-maps-utility/markerclustererplus

from gwt-maps-v3-api.

Did you ever do this? I tried your MarkerClusterer and I get a "operation not supported error" by javascript... this after custom loading the compiled js implementing the object and trying to customize your code.

from gwt-maps-v3-api.

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html

Seems to work fine especially with the custom js... not sure where I see that js library in your utilities modules either since MarkerClusterer isn't part of the v3 library.

Maps become useless once you have a few hundreds markers so this is a critical class... in spite of it being on the fringe of maps v3.

from gwt-maps-v3-api.

Hm, I don't see a javascript loader. Looks like some work still needs to be done yet. Sorry I haven't had time to investigate further since this is a volunteer project I've had some time conflicts. Patches are welcome.

from gwt-maps-v3-api.

I added:

    <inherits name='com.google.gwt.maps.Maps' />
    <inherits name='com.google.gwt.maps.utility.markerclustererplus.MarkerClustererPlus' />
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>

to my gwt.xml

also also

        <dependency>
            <groupId>com.github.branflake2267</groupId>
            <artifactId>gwt-maps-api</artifactId>
            <version>3.10.0-alpha-6</version>
        </dependency>
        <dependency>
            <groupId>com.github.branflake2267</groupId>
            <artifactId>gwt-maps-utility-markerclustererplus</artifactId>
            <version>3.10.0-alpha-6</version>
        </dependency>

In my POM.

So far so good.

But when I try:

        final MapWidget map = new MapWidget(mapOptions);

        final MarkerClustererOptions clusterOptions = MarkerClustererOptions.newInstance(); 
        clusterOptions.setAverageCenter( true );

        manager = MarkerClusterer.newInstance( map, clusterOptions );

It blow up here with:

18:51:22.469 [ERROR] [gwt] Uncaught exception escaped
com.google.gwt.core.client.JavaScriptException: (TypeError) @com.google.gwt.maps.utility.markerclustererplus.client.MarkerClusterer::createJso(Lcom/google/gwt/core/client/JavaScriptObject;Lcom/google/gwt/core/client/JavaScriptObject;Lcom/google/gwt/core/client/JavaScriptObject;)([JavaScript object(1517), JavaScript object(1519), JavaScript object(1518)]): $wnd.MarkerClusterer is not a constructor

Now I took the

    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>

from the html examples I saw successfully using the api.

But obviously something is amiss here. Hope your insight can resolve this in a few minutes :)

from gwt-maps-v3-api.

I see

  private static native MarkerClusterer createJso(JavaScriptObject map, JavaScriptObject markers, JavaScriptObject options) /*-{
      return new $wnd.MarkerClusterer(map, markers, options);
  }-*/;

which should work given the javascript example does pretty much the same thing.

from gwt-maps-v3-api.

I got it to work!!!!

Here's the recipe:

3.10.0-alpha-6 is fine.

Now in gwt.xml:

from gwt-maps-v3-api.

also in gwt.xml add:

from gwt-maps-v3-api.

Good job.

from gwt-maps-v3-api.

Hello sherloclops, I'm facing a similar issue: I added the markercluster.js in the same directory as my custom .gwt.xml
and in my gwt.xml, I added: [script src="markerclusterer.js" /]
But I'm still getting the same error. In which directory did you the JS file and how are you referencing it? Thanks

from gwt-maps-v3-api.

Try adding a timer and see if its loaded after a second.

from gwt-maps-v3-api.

I use a callback method for the maps api, and I don't see one here. If it has a the ajax loader strategy could be used so that a runnable could be used to programmatically load after the js has been injected.

from gwt-maps-v3-api.

I created com.google.gwt.maps.utility.markerclustererplus package , copied the MarkerClusterPlus.gwt.xml into it, modified it to include [script src="markerclusterer.js" /]. I then created the "public" directory, added the markermanager.js inside it.. It doesn't work in Development mode. But it does when I deploy it to the server. "production".

from gwt-maps-v3-api.

"I use a callback method for the maps api" Are you referring to LoadApi.go(onLoad, loadLibraries, sensor);

from gwt-maps-v3-api.

The question is does the markermanager.js call a method once its loaded? If it does that can be used as a callback in a GWT runner, like the ajax loader method, which is similiar to the LoadApi.go... Some js has a call back feature, or feature that can be used for onsuccess or onfailure. Working with js has to be done asyncly, that is there is a timing issue between the time it gets loaded, parsed and injected into the dom. Once its in the dom, then its available to call using jsni methods. If calling a method to it is undefined, I suspect that it hasn't loaded by the time the js or jsni calls the method.

from gwt-maps-v3-api.

Thanks for the explanation. The markermanager does trigger a loaded event once it's loaded. However, I don't see anywhere where such event is triggered in the markercluster.js.

from gwt-maps-v3-api.

Cool, I've been meaning to look deeper at it but haven't had time.

from gwt-maps-v3-api.

Brandon, I got it to work in dev mode by delaying the instantiation until MarkerCluster is actually needed. However, the events that I had registered to the markers themselves no longer work. Any trick that I can use to register mouseover and mouse events using this MarkerClusterer JSNI as shown here http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/examples/events_example.html ? Thanks

from gwt-maps-v3-api.

I suspect the handlers have some sort of handling for events, and if so I would check out the event system. Its not pretty b/c there is some generic challenges in it and I used inheritance a bunch. Another thing that I do for widgets is use > https://github.com/branflake2267/GWT-Maps-V3-Api/blob/master/gwt-maps-api/src/main/java/com/google/gwt/maps/client/events/MapPanel.java to wire up the events but have to be careful b/c it can leak if not managed properly.

from gwt-maps-v3-api.

https://github.com/branflake2267/GWT-Maps-V3-Api/blob/master/gwt-maps-api/src/main/java/com/google/gwt/maps/client/events/MapHandlerRegistration.java contains the main part of the map event logic, which uses handlers to pass back objects

from gwt-maps-v3-api.

I will give it a try. Thanks

from gwt-maps-v3-api.

Hello & good day! Thanks for such awesome gwt lib for map.

1. Do I still have to do workaround as done by nasamad? Or markercluster has been fixed in 3.10.0-alpha-7?

I created com.google.gwt.maps.utility.markerclustererplus package , copied the MarkerClusterPlus.gwt.xml into it, modified it to include [script src="markerclusterer.js" /]. I then created the "public" directory, added the markermanager.js inside it.. It doesn't work in Development mode. But it does when I deploy it to the server. "production".

2. I did not do workaround done by nasamad and get this error "09:23:35 SEVERE [LogConfiguration] (TypeError) : $wnd.MarkerClusterer is not a constructor"

My code is a mess :D but I expect it to work. Above error is at the MarkerClusterer.newInstance line.

    private void loadMapApi() {
	boolean sensor = false;

	// load all the libs for use in the maps
	ArrayList<LoadLibrary> loadLibraries = new ArrayList<LoadApi.LoadLibrary>();
	loadLibraries.add(LoadLibrary.DRAWING);
	loadLibraries.add(LoadLibrary.GEOMETRY);
	loadLibraries.add(LoadLibrary.VISUALIZATION);

	infoWindowOptions = InfoWindowOptions.newInstance();

	Runnable onLoad = new Runnable() {
		@Override
		public void run() {
			drawMap();
		}
	};

	LoadApi.go(onLoad, loadLibraries, sensor, "key=keysabcdtoottoot");
    }

    private void drawMap() {

	if (this.iterator().hasNext()) {
		logger.debug("Not calling drawmap since Panel already contain a child!");
		return;
	} else {
		logger.debug("Calling drawmap since Panel does not contain a child!");
	}

	LatLng centerCoords = LatLng.newInstance(3.1389391564497657d, 101.6839599609375d);
	MapOptions opts = MapOptions.newInstance();
	opts.setZoom(14);
	opts.setCenter(centerCoords);
	opts.setMapTypeId(MapTypeId.ROADMAP);

	mapWidget = new MapWidget(opts);
	infoWindow = InfoWindow.newInstance(infoWindowOptions);

	final MarkerClustererOptions clusterOptions = MarkerClustererOptions.newInstance();
	clusterOptions.setAverageCenter(true);
	markerCluster = MarkerClusterer.newInstance(mapWidget, clusterOptions);

	if (mapWidget != null) {
		ov = OverlayView.newInstance(mapWidget, new ovOnDrawHandler(), new ovOnAddHandler(),
				new ovViewOnRemoveHandler());

		logger.debug("Adding click handler for map!");
		mapWidget.addClickHandler(new MapClickHandler());
		mapWidget.addRightClickHandler(new MapRightClickHandler());
	}

	logger.debug("Adding map widget to MapDashWidget");
	// this.clear();
	this.add(mapWidget);

	resize();
    }

from gwt-maps-v3-api.