Anyone tried wind-js with Google Maps

[ilblog]

As far as I know Google Maps use Mercator Projection. So I suppose, that this library can work with Google Maps API also.

Anyone tried that?

[chelm]

Not that I know of, but its designed to simply render onto a canvas. http://freshymap.com is an example of this library on top of leaflet...

[chelm]

an example on top of this would be simple: https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/canvaslayer/examples/hello2d.html

[ilblog]

Thx

[ilblog]

Well your comment helped me a lot. I have discovered Leaflet, so now good bye Google Maps API. Thanks again.

[chelm]

Love this! Good luck, let me know what you build!

[ilblog]

Still have a problems with Canvas Layer lib on leaflet. I have checked your work on freshymap, and you have also did some magic to anchor canvas element to specific place in DOM tree.

[chelm]

Yeah there is some magic to re-order the panes so they dont render behind the map tiles. I need to look into that in the leaflet code and see if there's a fix that can be applied.

[ilblog]

The canvas lib here https://github.com/CartoDB/Leaflet.CanvasLayer have this issue (canvas is offset) already reported. Another leaflet canvas library is here http://bl.ocks.org/sumbera/11114288 . I am going to try this lib just now.

[ilblog]

Yep it works. I recommend http://bl.ocks.org/sumbera/11114288 lib for canvas layer. Works perfect on first try, and just few lines of code compared to first solution.

$http.get('gfs.json', { cache:true } ).success( function(result) {

    var timer = null;

    //Add CanvasLayer to the map
    canvasOverlay = L.canvasOverlay()
        .drawing(redraw)
        .addTo(map);

    //windy object  
    windy = new Windy({canvas: canvasOverlay.canvas(), data: result});

    //prepare context global var
    context = canvasOverlay.canvas().getContext('2d');

    //start drawing wind map
    function redraw(overlay, params) {

        if( timer ) 
            window.clearTimeout( timer ); 

        timer = setTimeout(function() { //showing wind is delayed
            var bounds = map.getBounds();
            var size = map.getSize();

            /*context.rect(0,0,3000,3000);
            context.fillStyle = "red";
            context.fill();*/

            windy.start( [[0,0],[size.x, size.y]], size.x, size.y, 
                [[bounds._southWest.lng, bounds._southWest.lat ],[bounds._northEast.lng, bounds._northEast.lat]] );
        },750)

    }

    //clear canvas and stop animation
    function clearWind() {
        windy.stop();
        context.clearRect(0,0,3000, 3000);
    }   

    map.on('dragstart', function() { clearWind() });
    map.on('zoomstart', function() { clearWind() });
    map.on('resize', function() { clearWind() });

})  

[pacioos]

I followed the suggestion of @chelm to try CanvasLayer.js for Google Maps: https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/canvaslayer/examples/hello2d.html. While this works, wind-js behaves strangely once the dateline (antimeridian) comes into view. At that point, it starts drawing vertical lines on the map until you get the dateline out of view again. Ideas why that might be?

To see my example, you can try: http://www2.hawaii.edu/~jmaurer/js/gmap.html. That test page won't be around long, though, so here's the equivalent snippet to @ilblog above but for Google Maps and CanvasLayer.js.

var mapOptions = { center: { lat: 40, lng: -90 }, zoom: 4, mapTypeId: google.maps.MapTypeId.HYBRID };

var map = new google.maps.Map( document.getElementById( 'map' ), mapOptions );

$.ajax({url: 'gfs.json'}).success( function(result) {

    var timer = null;

    //Add CanvasLayer to the map
    var canvasLayerOptions = {
      map: map,
      animate: false,
      updateHandler: redraw 
    };
    var canvasLayer = new CanvasLayer(canvasLayerOptions);

    //windy object  
    windy = new Windy({canvas: canvasLayer.canvas, data: result});

    //prepare context var
    var context = canvasLayer.canvas.getContext('2d');

    //start drawing wind map
    function redraw(overlay, params) {

        if( timer ) 
            window.clearTimeout( timer ); 

        timer = setTimeout(function() { //showing wind is delayed
            var bounds = map.getBounds();
            //var size = map.getSize();
            var map_size_x = $( '#map' ).width();
            var map_size_y = $( '#map' ).height();

            /*context.rect(0,0,3000,3000);
            context.fillStyle = "red";
            context.fill();*/

            windy.start( [[0,0],[map_size_x, map_size_y]], map_size_x, map_size_y, 
                [[bounds.getSouthWest().lng(), bounds.getSouthWest().lat() ],[bounds.getNorthEast().lng(), bounds.getNorthEast().lat()]] );
        },750)

    }

    //clear canvas and stop animation
    function clearWind() {
        windy.stop();
        context.clearRect(0,0,3000, 3000);
    }   

    google.maps.event.addListener(
      map,
      'bounds_changed',
      function() {
        clearWind();
      }
    );

});