Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

We have a shape with the following WKT. The problem with google map we normally extract out each of the lat and long value and put into an array and finally will do something like this. It works fine but in this WKT there are few sections in it but with openlayer I just put the whole WKT into this function var feature1 = new OpenLayers.Feature.Vector(buffer.transform(P4326,P900913), null, styleObject); it works perfectly fine without any issue. How to resolve this for google map?

polygon1 = new google.maps.Polygon({
                                            paths: lineArray,
                                            strokeColor: '#1E90FF',
                                            strokeOpacity: 0.8,
                                            strokeWeight: 2,
                                            fillColor: '#1E90FF',
                                            fillOpacity: 0.35
                                      });


POLYGON((100.54157334877087 5.124795579269911,100.50169157216737 5.175633231048347,100.48893060559693 5.190782519229377,100.48883685890004 5.190920674118928,100.48041685890006 5.206620683576352,100.48035625412166 5.206766524898229,100.48032538396345 5.206921338503033,100.48032543474828 5.207079174986367,100.48035640452454 5.207233968780704,100.48041710314108 5.207379771251712,100.48050519798412 5.207510979300314,100.48061730361823 5.20762255068534,100.48074911188677 5.20771019779251,100.4808955574719 5.207770552403195,100.4810510125519 5.2078012951316595,100.48120950307525 5.2078012445564505,100.48136493833998 5.2077704026211435,100.48151134505608 5.207709954559655,100.48164309689552 5.207622223348936,100.48175513070903 5.207510580439686,100.48184314109994 5.207379316194805,100.49022348868367 5.191753262740997,100.50293939440304 5.17665749276832,100.50295708150922 5.1766357380872146,100.55158138575345 5.114653464985341,100.61784836581363 5.047494669000269,100.63328064200411 5.045760273775513,100.63344538038619 5.045724117696659,100.63359900089658 5.045654696108101,100.63373481573457 5.045555031237853,100.63384691226155 5.045429461939012,100.64478691226155 5.030239472910412,100.64485714103375 5.030122067725934,100.64490643054278 5.029994524131959,100.64493336141338 5.029860514958455,100.64619300597558 5.018766440281411,100.89601933027687 4.76550530772389,100.90397540484798 4.76251382120199,100.904125498221 4.7624388147297605,100.90425680769607 4.762334529640712,100.90436366963635 4.762205463944471,100.91498366963637 4.746255474257608,100.9150580432529 4.746115668549328,100.91510356406134 4.74596407285823,100.91511847627667 4.745806534382425,100.91510220471923 4.745649129543159,100.9150553769999 4.7454979296113295,100.91497979931266 4.745358766531834,100.9148783867677 4.745237007978542,100.91475505095255 4.745137350316068,100.91461454905823 4.745063637454637,100.91446230038925 4.7450187125847965,100.9143041773355 4.745004308511336,100.91414627886799 4.745020980816285,100.91399469529519 4.74506808642927,100.91385527335358 4.745143808431712,100.91373339069273 4.745245226138226,100.89511556261954 4.764122863341007,100.89441924808347 4.764384677730915,100.92861460308248 4.729467265814491,100.94306861105032 4.717019660578351,100.94308862499464 4.717001837872207,100.9600648087706 4.70137140183913,100.97805150444233 4.690005163726286,101.0032978733881 4.688855369346559,101.02139744198907 4.698874409253193,101.02153571050398 4.698934873115156,101.02168284847642 4.698968658695525,101.02183372382656 4.698974587578459,101.02198307411716 4.698952452968966,101.02212569010408 4.698903026905675,101.0222565974315 4.698828033332999,101.02237123013421 4.698730087971819,101.02246558989572 4.698612607085813,101.03186692696475 4.684358662732975,101.04641937919912 4.681631913397546,101.04654522151539 4.6815976608810255,101.0466638985581 4.681543682997702,101.0626338985581 4.672663691919618,101.06265873346082 4.672649300079806,101.07193873346081 4.667049305582631,101.07206478644287 4.666955391993337,101.07217019642661 4.666838917858445,101.07225096922653 4.666704296595284,101.07230404420704 4.6665566292515965,101.07232741025584 4.66640151121859,101.07232018198869 4.666244820211681,101.07080124929709 4.655762184380661,101.06942217992568 4.64481956709879,101.06939272311594 4.6446829890795245,101.0693400432311 4.64455353405661,101.06926572348885 4.644435092618359,101.06457125429455 4.638224697426946,101.06319926512629 4.632065339533069,101.0631864279256 4.632015335107842,101.05965809799591 4.619901065378956,101.05729160630031 4.611301837098225,101.05827771116607 4.608078035110399,101.05837451798986 4.608017540493808,101.058489797227 4.607909126498835,101.05858164229866 4.607780378456879,101.0586465236503 4.607636244073435,101.05868194792791 4.607482262344451,101.05868655379639 4.607324350696963,101.05863655379638 4.60660435064062,101.05861127892128 4.606452707295678,101.05855757613483 4.606308606552095,101.05847739948697 4.606177291720301,101.0583736663157 4.606063540879937,101.05825015109548 4.605971493021525,101.05811134809807 4.605904497442384,101.05796230786196 4.605864991876384,101.05780845342177 4.60585441379272,101.05765538298354 4.605873148090809,101.05750866622635 4.605920513095127,101.05737364164183 4.60599478535917,101.05725522228572 4.606093262376247,101.05715771700969 4.6062123609150225,101.05708467367768 4.6063477474016885,101.05703875007214 4.60649449560441,101.05696615166936 4.606839338106436,101.05567666227104 4.611054977816131,101.05564623136308 4.611203092992834,101.05564409128449 4.611354267067325,101.05567031736118 4.611503179055542,101.05810031736118 4.6203331764030775,101.05810357207437 4.620344668666436,101.06162634972249 4.632439867617015,101.06303073487372 4.638744658859191,101.06308581972252 4.638907454598495,101.06317427651116 4.639054911411789,101.0678446649334 4.64523344260049,101.06919782007431 4.655970431325576,101.0691998180113 4.65598518148874,101.07064329274297 4.665947058557962,101.06183355569814 4.671263283392991,101.04599114859657 4.680072345516371,101.03123062080087 4.6828380888643055,101.03107509912326 4.682883713338254,101.030931837252 4.682959345378033,101.0308065956257 4.683061943874136,101.03070441010425 4.683187383417033,101.02152658363796 4.697102476341069,101.00388255801093 4.687335579811719,101.00374644848105 4.687275831277903,101.00360166061274 4.68724194258745,101.00345309409626 4.687235060553534,100.97776309409626 4.688405061901499,100.97762450889043 4.688423433455393,100.97749117130599 4.688465325320313,100.97736706846887 4.6885294848210455,100.95913706846886 4.700049496057161,100.95902137500535 4.700138148283603,100.9420012335367 4.715809084690873,100.9275313889497 4.728270349847366,100.92748140376511 4.728317234131123,100.89084289136436 4.765729386924607,100.88857903739637 4.7665805940663155,100.86875468604576 4.764747755821863,100.86852748525929 4.7647587762658,100.8479974852593 4.768688780791709,100.84779668516134 4.768755321284555,100.83633102855727 4.774306706231912,100.82703778821273 4.77294291672017,100.82687125841765 4.772935785811107,100.7928690382914 4.774982310566,100.7619067259743 4.772427068381073,100.76173502182992 4.772431140443018,100.7615680553451 4.772471265016521,100.76141336170892 4.772545631275547,100.76127792223743 4.772650883064091,100.7611678493072 4.772782270361311,100.6687278493072 4.910582361568241,100.66865301195101 4.91072185418806,100.66860697601827 4.910873227876582,100.6685915165044 4.911030646151936,100.66864137306756 4.972952505860876,100.66009346236922 4.9913004519727435,100.64595576422197 5.007756306956835,100.64586418982786 5.007887198342606,100.64580031240318 5.008033503784978,100.64576663858664 5.0081894820473565,100.64477291047628 5.016941706842589,100.61625125341138 5.0460532463404055,100.6130793579959 5.046409728012444,100.61291638011534 5.0464453024506675,100.61276420329115 5.046513443519312,100.61262930836556 5.0466112492457205,100.59598930836556 5.0615212630263375,100.59591729333239 5.061594575864115,100.58139729333239 5.078394589533011,100.5813745376085 5.078422128797729,100.568241718084 5.095052757503959,100.5558565329245 5.107692725364091,100.55190792815084 5.111630975719314,100.55184291849078 5.11170421172008,100.55150998857583 5.1121286259010175,100.50958140376511 5.154917596322795,100.50948245300847 5.155040676578281,100.50940948200127 5.155180602156629,100.50936528873167 5.155332007765464,100.50935156773907 5.155489087927182,100.50936884513898 5.155645819584137,100.50941645844956 5.155796193046173,100.509492581994 5.155934442424661,100.50959429690371 5.156055266717915,100.5097177030391 5.1561540330704085,100.50985806853575 5.156226954412539,100.51001001124239 5.156271234669731,100.51016770509305 5.1562851759732355,100.51032510350089 5.156268243762022,100.51047617120751 5.1562210872795635,100.51061511569779 5.156145514679759,100.51073660930729 5.156044423696323,100.54157334877087 5.124795579269911),(100.89871905240886 4.762767948943637,100.90896767267513 4.752376354194918,100.90316054789211 4.76109794021234,100.89871905240886 4.762767948943637),(100.64661349655054 5.015063009244003,100.64734548944385 5.008616000844607,100.66139423577802 4.992263705850945,100.66151334893807 4.99207906958164,100.67018334893807 4.973469079183367,100.67023954646196 4.9733033059172405,100.6702584834956 4.973129353908616,100.67020868057224 4.911274134430876,100.76224763699163 4.774072078648479,100.7927932740257 4.776592927682631,100.79290874158235 4.776594210842545,100.82688510588919 4.774549247104856,100.83634221178725 4.775937080726917,100.83650305821145 4.775944533666873,100.83666219668962 4.77592007401154,100.83681331483866 4.77586467197369,100.8484073218576 4.770251155446057,100.86871970000875 4.766362818665806,100.88843722762824 4.768185776370008,100.64661349655054 5.015063009244003),(100.89174944562149 4.767110780318271,100.89241584048753 4.766860216725576,100.83228546584598 4.827825906907718,100.89174944562149 4.767110780318271),(100.61964713897322 5.045671590739228,100.64435410761305 5.020630262940911,100.64335031023455 5.029471003274368,100.6327424559458 5.044199836724733,100.61964713897322 5.045671590739228),(100.57884271020993 5.084233488822919,100.58263439073833 5.079431891466035,100.59710904740169 5.062684368787789,100.61351808034122 5.047981338205527,100.61446663282223 5.047874732959801,100.57884271020993 5.084233488822919))

Control for 2 different polygon.

                if(pl==0)
                {
                      var polygon1 = new google.maps.Polygon({
                                                    paths: cords,
                                                    strokeColor: '#1E90FF',
                                                    strokeOpacity: 0.8,
                                                    strokeWeight: 2,
                                                    fillColor: '#1E90FF',
                                                    fillOpacity: 0.35
                                                  });
                    polygon1.setMap(map);
                 }
                 else
                 {
                      var polygon1 = new google.maps.Polygon({
                                                    paths: cords,
                                                    strokeColor: '#FFFFFF',
                                                    strokeOpacity: 1,
                                                    strokeWeight: 2,
                                                    fillColor: '#FFFFFF',
                                                    fillOpacity: 0.25
                                                  });
                    polygon1.setMap(map);
                 }
share|improve this question
    
Do you want to do the same thing in Google Maps API? –  Devdatta Tengshe Apr 28 '13 at 5:20
    
Yes I want the same thing in google map api else it look very funny shape. Any idea please? –  biz14 Apr 28 '13 at 5:25
add comment

3 Answers

up vote 1 down vote accepted

Firstly you need to make sure that your WKT string is properly formatted.

After that you can use a custom function to parse the string, and draw a polygon. I could use the following code:

var wkt="POLYGON(...)"; //this is your WKT string

//using regex, we will get the indivudal Rings
var regex = /\(([^()]+)\)/g;
var Rings = [];
var results;
while( results = regex.exec(wkt) ) {
    Rings.push( results[1] );
}

var ptsArray=[];

var polyLen=Rings.length;

//now we need to draw the polygon for each of inner rings, but reversed
for(var i=0;i<polyLen;i++){
    AddPoints(Rings[i]);
}

var poly = new google.maps.Polygon({
    paths: ptsArray,
    strokeColor: '#1E90FF',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#1E90FF',
    fillOpacity: 0.35
  });

  poly.setMap(map);


//function to add points from individual rings
function AddPoints(data){
    //first spilt the string into individual points
    var pointsData=data.split(",");


    //iterate over each points data and create a latlong
    //& add it to the cords array
    var len=pointsData.length;
    for (var i=0;i<len;i++)
    {
         var xy=pointsData[i].split(" ");

        var pt=new google.maps.LatLng(xy[1],xy[0]);
        ptsArray.push(pt);
    }


}

See a working example here: http://jsfiddle.net/devdatta/ajzX4/1/

share|improve this answer
    
Thank you codes works. I got one more thing to ask you here. I have updates and put this section of the codes. I what I want is that for the polygon with pl=0 to have the exact color and the rest I want to make it as transparent as possible what is best color combination to create it. –  biz14 Apr 28 '13 at 9:51
    
I could not understand what you want to do. Can you explain more? –  Devdatta Tengshe Apr 28 '13 at 11:49
    
sorry for my explanation. What I need is that for the first polygon I want the color to be #1E90FF but for the second and thereafter polygon the color to be transparent. The problem is that if I put the second polygon as white and lower the opacity value the first color #1E90FF resurface. –  biz14 Apr 28 '13 at 14:08
    
@DevdattaTengshe almost gave up on this using my own WKT until I realized the regex doesn't account for spaces after the commas or after the initial shape name text. –  johntrepreneur Jun 18 '13 at 19:21
    
@DevdattaTengshe - is this supposed to work for MULTIPOLYGON as well? Based on the altered fiddle I just tried, the google maps shapes that are rendered appear to drawn incorrectly. –  johntrepreneur Jun 18 '13 at 19:24
show 3 more comments

I don't remember where I have found it first, when I needed it but this library is working perfect a fits all my needs when displaying WKTs on a google map:

var GeoJSON = function( geojson, options ){


var _geometryToGoogleMaps = function( geojsonGeometry, opts, geojsonProperties ){

    var googleObj;

    switch ( geojsonGeometry.type ){
        case "Point":
            opts.position = new google.maps.LatLng(geojsonGeometry.coordinates[1], geojsonGeometry.coordinates[0]);
            googleObj = new google.maps.Marker(opts);
            if (geojsonProperties) {
                googleObj.set("geojsonProperties", geojsonProperties);
            }
            break;

        case "MultiPoint":
            googleObj = [];
            for (var i = 0; i < geojsonGeometry.coordinates.length; i++){
                opts.position = new google.maps.LatLng(geojsonGeometry.coordinates[i][1], geojsonGeometry.coordinates[i][0]);
                googleObj.push(new google.maps.Marker(opts));
            }
            if (geojsonProperties) {
                for (var k = 0; k < googleObj.length; k++){
                    googleObj[k].set("geojsonProperties", geojsonProperties);
                }
            }
            break;

        case "LineString":
            var path = [];
            for (var i = 0; i < geojsonGeometry.coordinates.length; i++){
                var coord = geojsonGeometry.coordinates[i];
                var ll = new google.maps.LatLng(coord[1], coord[0]);
                path.push(ll);
            }
            opts.path = path;
            googleObj = new google.maps.Polyline(opts);
            if (geojsonProperties) {
                googleObj.set("geojsonProperties", geojsonProperties);
            }
            break;

        case "MultiLineString":
            googleObj = [];
            for (var i = 0; i < geojsonGeometry.coordinates.length; i++){
                var path = [];
                for (var j = 0; j < geojsonGeometry.coordinates[i].length; j++){
                    var coord = geojsonGeometry.coordinates[i][j];
                    var ll = new google.maps.LatLng(coord[1], coord[0]);
                    path.push(ll);
                }
                opts.path = path;
                googleObj.push(new google.maps.Polyline(opts));
            }
            if (geojsonProperties) {
                for (var k = 0; k < googleObj.length; k++){
                    googleObj[k].set("geojsonProperties", geojsonProperties);
                }
            }
            break;

        case "Polygon":
            var paths = [];
            var exteriorDirection;
            var interiorDirection;
            for (var i = 0; i < geojsonGeometry.coordinates.length; i++){
                var path = [];
                for (var j = 0; j < geojsonGeometry.coordinates[i].length; j++){
                    var ll = new google.maps.LatLng(geojsonGeometry.coordinates[i][j][1], geojsonGeometry.coordinates[i][j][0]);
                    path.push(ll);
                }
                if(!i){
                    exteriorDirection = _ccw(path);
                    paths.push(path);
                }else if(i == 1){
                    interiorDirection = _ccw(path);
                    if(exteriorDirection == interiorDirection){
                        paths.push(path.reverse());
                    }else{
                        paths.push(path);
                    }
                }else{
                    if(exteriorDirection == interiorDirection){
                        paths.push(path.reverse());
                    }else{
                        paths.push(path);
                    }
                }
            }
            opts.paths = paths;
            googleObj = new google.maps.Polygon(opts);
            if (geojsonProperties) {
                googleObj.set("geojsonProperties", geojsonProperties);
            }
            break;

        case "MultiPolygon":
            googleObj = [];
            for (var i = 0; i < geojsonGeometry.coordinates.length; i++){
                var paths = [];
                var exteriorDirection;
                var interiorDirection;
                for (var j = 0; j < geojsonGeometry.coordinates[i].length; j++){
                    var path = [];
                    for (var k = 0; k < geojsonGeometry.coordinates[i][j].length; k++){
                        var ll = new google.maps.LatLng(geojsonGeometry.coordinates[i][j][k][1], geojsonGeometry.coordinates[i][j][k][0]);
                        path.push(ll);
                    }
                    if(!j){
                        exteriorDirection = _ccw(path);
                        paths.push(path);
                    }else if(j == 1){
                        interiorDirection = _ccw(path);
                        if(exteriorDirection == interiorDirection){
                            paths.push(path.reverse());
                        }else{
                            paths.push(path);
                        }
                    }else{
                        if(exteriorDirection == interiorDirection){
                            paths.push(path.reverse());
                        }else{
                            paths.push(path);
                        }
                    }
                }
                opts.paths = paths;
                googleObj.push(new google.maps.Polygon(opts));
            }
            if (geojsonProperties) {
                for (var k = 0; k < googleObj.length; k++){
                    googleObj[k].set("geojsonProperties", geojsonProperties);
                }
            }
            break;

        case "GeometryCollection":
            googleObj = [];
            if (!geojsonGeometry.geometries){
                googleObj = _error("Invalid GeoJSON object: GeometryCollection object missing \"geometries\" member.");
            }else{
                for (var i = 0; i < geojsonGeometry.geometries.length; i++){
                    googleObj.push(_geometryToGoogleMaps(geojsonGeometry.geometries[i], opts, geojsonProperties || null));
                }
            }
            break;

        default:
            googleObj = _error("Invalid GeoJSON object: Geometry object must be one of \"Point\", \"LineString\", \"Polygon\" or \"MultiPolygon\".");
    }

    return googleObj;

};

var _error = function( message ){

    return {
        type: "Error",
        message: message
    };

};

var _ccw = function( path ){
    var isCCW;
    var a = 0;
    for (var i = 0; i < path.length-2; i++){
        a += ((path[i+1].lat() - path[i].lat()) * (path[i+2].lng() - path[i].lng()) - (path[i+2].lat() - path[i].lat()) * (path[i+1].lng() - path[i].lng()));
    }
    if(a > 0){
        isCCW = true;
    }
    else{
        isCCW = false;
    }
    return isCCW;
};

var obj;

var opts = options || {};

switch ( geojson.type ){

    case "FeatureCollection":
        if (!geojson.features){
            obj = _error("Invalid GeoJSON object: FeatureCollection object missing \"features\" member.");
        }else{
            obj = [];
            for (var i = 0; i < geojson.features.length; i++){
                obj.push(_geometryToGoogleMaps(geojson.features[i].geometry, opts, geojson.features[i].properties));
            }
        }
        break;

    case "GeometryCollection":
        if (!geojson.geometries){
            obj = _error("Invalid GeoJSON object: GeometryCollection object missing \"geometries\" member.");
        }else{
            obj = [];
            for (var i = 0; i < geojson.geometries.length; i++){
                obj.push(_geometryToGoogleMaps(geojson.geometries[i], opts));
            }
        }
        break;

    case "Feature":
        if (!( geojson.properties && geojson.geometry )){
            obj = _error("Invalid GeoJSON object: Feature object missing \"properties\" or \"geometry\" member.");
        }else{
            obj = _geometryToGoogleMaps(geojson.geometry, opts, geojson.properties);
        }
        break;

    case "Point": case "MultiPoint": case "LineString": case "MultiLineString": case "Polygon": case "MultiPolygon":
        obj = geojson.coordinates
            ? obj = _geometryToGoogleMaps(geojson, opts)
            : _error("Invalid GeoJSON object: Geometry object missing \"coordinates\" member.");
        break;

    default:
        obj = _error("Invalid GeoJSON object: GeoJSON object must be one of \"Point\", \"LineString\", \"Polygon\", \"MultiPolygon\", \"Feature\", \"FeatureCollection\" or \"GeometryCollection\".");

}

return obj;

};

share|improve this answer
    
I will explore it but the Dev's script also is working but it just that I want to make all the polygon transparent except for the first one. –  biz14 Apr 29 '13 at 10:17
    
Convert all your WKTs using this tool, and collect all the polygons you get into an array. Then if you only want the first polygon to be transparent (to some extent), then use the setOptions command. For example: wktpolygons[0].setOptions({fillOpacity: 0.35}); –  Tamas Apr 29 '13 at 18:13
    
no I want only the first polygon to be visible with the opacity of say 0.35 but the rest if possible not to have any color but just the shape is that possible? –  biz14 Apr 30 '13 at 0:56
    
Yes. Its possible. When you iterate through the polygons, for the first one use the fillColor: "#your_color_code", fillOpacity: 0.35 and for the rest don't use fillColor and fillOpacity but strokeColor: "#your_color_code" and maybe strokeOpacity –  Tamas May 1 '13 at 8:21
    
I tried your method with these settings var polygon1 = new google.maps.Polygon({paths: cords,strokeColor: '#1E90FF',strokeOpacity: 1,strokeWeight: 2}); the color now it appear to have a blend of black n this #1E90FF. The reason being the first polygon is already set with this color and these other polygon are are within the bigger polygon. –  biz14 May 1 '13 at 13:07
show 3 more comments

Just a quick guess but should that be multipolygon rather than polygon in your wkt?

How are you producing your wkt and what does google maps show at the minute?

share|improve this answer
    
I draw using the the google drawing tool first just a linestring then after I use jsts to draw a buffer size of certain size which generate this polygon. So what should I do next ? –  biz14 Apr 28 '13 at 7:05
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.