checking whether part of google map is land or water

Question

I am working on a project to get routes fro vessels.I am using google maps and i'm currently trying to know whether a point is water of land.

I used the following method:- First i created the map normally. Then i created a canvas containing the current map but this time its an static one.I made the water areas to white. I looped through the canvas image pixels and got the color of the each pixel. Then to map each pixel to a latlng I've used the first map with a function to get latlng from a point. However i'm getting everything as white when i run the code.Can you please suggest waht i'm doing wrong.

<!DOCTYPE html> <html>
 <head> 
 <title>Showing pixel and tile coordinates</title> 
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 <meta charset="utf-8">

 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
 <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
 <script>
 var map; 
 var TILE_SIZE = 256; 
 var chicago = new google.maps.LatLng(0,0); 
 var styles = [ { 
 "featureType": "administrative.country", "stylers": [ { "visibility": "off" } ] },{ "featureType": "administrative", "elementType": "geometry", "stylers": [ { "visibility": "off" } ] },{ "featureType": "landscape", "stylers": [ { "visibility": "on" }, { "color": "#C0C0C0" } ] },{ "featureType": "water", "stylers": [ { "visibility": "on" }, { "color": "#FFFFFF" } ] },{ "featureType": "landscape.man_made", "stylers": [ { "visibility": "off" }, { "color": "#efffff" } ] },{ "featureType": "poi", "elementType": "geometry", "stylers": [ { "visibility": "off" } ] },{ "featureType": "transit", "stylers": [ { "visibility": "off" } ] } ];


 function bound(value, opt_min, opt_max) { 
    if (opt_min != null) 
        value = Math.max(value, opt_min); 
    if (opt_max != null) 
        value = Math.min(value, opt_max); 
 return value; 
 }

function degreesToRadians(deg) { return deg * (Math.PI / 180); }

function radiansToDegrees(rad) { return rad / (Math.PI / 180); }

/** @constructor */ 
function MercatorProjection() { 
    this.pixelOrigin_ = new google.maps.Point(TILE_SIZE / 2, TILE_SIZE / 2); 
    this.pixelsPerLonDegree_ = TILE_SIZE / 360; 
    this.pixelsPerLonRadian_ = TILE_SIZE / (2 * Math.PI);
 }

MercatorProjection.prototype.fromLatLngToPoint = function(latLng, opt_point) { 
    var me = this; var point = opt_point || new google.maps.Point(0, 0); 
    var origin = me.pixelOrigin_;
    point.x = origin.x + latLng.lng() * me.pixelsPerLonDegree_;
    // Truncating to 0.9999 effectively limits latitude to 89.189. This is // about a third of a tile past the edge of the world tile. 
    var siny = bound(Math.sin(degreesToRadians(latLng.lat())), -0.9999, 0.9999);
     point.y = origin.y + 0.5 * Math.log((1 + siny) / (1 - siny)) * -me.pixelsPerLonRadian_; 
     return point; 
     };

MercatorProjection.prototype.fromPointToLatLng = function(point) { 
    var me = this; 
    var origin = me.pixelOrigin_; 
    var lng = (point.x - origin.x) / me.pixelsPerLonDegree_; 
    var latRadians = (point.y - origin.y) / -me.pixelsPerLonRadian_; 
    var lat = radiansToDegrees(2 * Math.atan(Math.exp(latRadians)) - Math.PI / 2); 
return new google.maps.LatLng(lat, lng); };



return [ 'LatLng: ' + chicago.lat() + ' , ' + chicago.lng(), 
'World Coordinate: ' + worldCoordinate.x + ' , ' + worldCoordinate.y, 
'Pixel Coordinate: ' + Math.floor(pixelCoordinate.x) + ' , ' + Math.floor(pixelCoordinate.y), 
'Tile Coordinate: ' + tileCoordinate.x + ' , ' + tileCoordinate.y +
 ' at Zoom Level: ' + map.getZoom() ].join('<br>'); }

function initialize() { 
    var mapOptions = { 
    center: chicago, 
    styles:styles,
    zoom:1,
    scrollwheel:false,
    disableDefaultUI: true, 
    draggable: false

    };

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



google.maps.event.addDomListener(window, 'load', initialize);


function getMap(){
        // Create an in-memory canvas and store its 2d context
    var water_context = document.createElement('canvas');
    water_context.setAttribute('width', 640);
    water_context.setAttribute('height', 400);
    water_context = water_context.getContext('2d');

    water = new Image();
    water.crossOrigin = 'http://maps.googleapis.com/crossdomain.xml';
    water.src = "http://maps.googleapis.com/maps/api/staticmap?scale=1&center=0,0&zoom=1&size=640x400&sensor=false&visual_refresh=true&style=element:labels|visibility:off&style=feature:water|color:0xFFFFFF&style=feature:transit|visibility:off&style=feature:poi|visibility:off&style=feature:road|visibility:off&style=feature:administrative|visibility:off";

    water.onload = function(){
        // Put the water image inside the water canvas
        water_context.drawImage(water, 0, 0, 640, 400);

    }

    var numTiles = 1 << map.getZoom(); 
    var projection = new MercatorProjection(); 
    var x="";
     for(var i=0;i<=640;i++){
          for(var y=0;y<=400;y++){
           var worldCoordinate = projection.fromPointToLatLng(new google.maps.Point(i,y)); 

               var pixelData = water_context.getImageData(i, y, 1, 1).data;
               var color=false;
                if(pixelData[0]==0 && pixelData[1]==0 && pixelData[2]==0)
                {
                    color=true;
                }

                x+=worldCoordinate+ " -- " +color+"--"+pixelData[0]+","+pixelData[1]+","+pixelData[2]+"</br>"
         }

        }

    }
    document.write(x);
} 



</script> 
</head> 
<body> 
<div id="map-canvas" style="width:640px;height:400px;" ></div> 
<button onclick="getMap()">Click</button> 
</body> 
</html>

You May have to look this : [Verify if a point is Land or Water in Google Maps][1] May this helps you.. [1]: http://stackoverflow.com/questions/9644452/verify-if-a-point-is-land-or-water-in-google-maps — ashbuilds, Mar 09 '14 at 12:31

checking whether part of google map is land or water

0 Answers0