Implement Markerclusterer in GWT Google Maps V3 ,through JSNI

MarioMartin commented 12 years ago

could help me please: I have a GWT project with GWT GoogleMapsAPI v3 and would like to implement Markerclusterer through a JSNI method.

My question is how to manipulate the MapWidget within JSNI method

this is my code but does not work.

package cl.prueba.JS.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Element;
import com.google.gwt.maps.client.MapOptions;
import com.google.gwt.maps.client.MapTypeId;
import com.google.gwt.maps.client.MapWidget;
import com.google.gwt.maps.client.base.LatLng;
import com.google.gwt.user.client.ui.RootPanel;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class PruebaJS implements EntryPoint {

final private static int    ZOOM     = 3;
final private static LatLng CENTER   = new LatLng(-33.437912, -70.650535);
final private static String MAP_TYPE = new MapTypeId().getRoadmap();
private MapWidget           mapa ;

private void inicializaMapa() {
    final MapOptions options = new MapOptions();
    options.setZoom(ZOOM);
    options.setCenter(CENTER);
    options.setMapTypeId(MAP_TYPE);
    options.setDraggable(true);
    options.setNavigationControl(true);
    options.setMapTypeControl(true);
    mapa = new MapWidget(options);
    mapa.setSize("300px","300px");

                    iniMarkerClusterer(mapa);

    }

public  native MapWidget  iniMarkerCluster(MapWidget map ) /*-{

    var markers = [];
    for ( var i = 0; i < 100; i++) {
    var dataPhoto = $wnd.data.photos[i];
    var latLng = new $wnd.google.maps.LatLng(dataPhoto .latitude,dataPhoto.longitude );      
    var marker = new $wnd.google.maps.Marker({position : latLng});
    markers.push(marker);
    }
    var markerCluster = new $wnd.MarkerClusterer(map , markers);

    }-*/;

    public void onModuleLoad() {

        RootPanel.get("mapa").add(mapa));

    }

}
/**********************************************************************************************************************///

my html is : HTML ....

<script type="text/javascript" src="pruebajs/pruebajs.nocache.js"></script>
<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="pruebajs/data.json"></script>
<script type="text/javascript" src="pruebajs/markerclusterer.js"></script>

<body>
    <div id="mapa"></div>
</body>

Thank you very much!! I hope they understand my problem, if they have questions, please let me know.

atte Mario

branflake2267 commented 11 years ago

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

branflake2267 commented 11 years ago

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

twistedpair commented 11 years ago

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.

branflake2267 commented 11 years ago

Sounds like a nifty api. :)

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

twistedpair commented 11 years ago

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.

branflake2267 commented 11 years ago

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

vhmeirelles commented 11 years ago

Hi,

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

branflake2267 commented 11 years ago

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

sherloclops commented 11 years ago

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.

sherloclops commented 11 years ago

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.

branflake2267 commented 11 years ago

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.

sherloclops commented 11 years ago

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 :)

sherloclops commented 11 years ago

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.

sherloclops commented 11 years ago

I got it to work!!!!

Here's the recipe:

3.10.0-alpha-6 is fine.

Now in gwt.xml:

Githubissues.

Githubissues is a development platform for aggregating issues.

branflake2267 / GWT-Maps-V3-Api

Implement Markerclusterer in GWT Google Maps V3 ,through JSNI #20