GeoJSON multipolygon on google maps

9,281 views
Skip to first unread message

SSA

unread,
Jan 6, 2011, 8:31:16 AM1/6/11
to Google Maps JavaScript API v3
Hi All,

I am struggeling with placing a multipolygon over google maps.

GeoJson is:


var GeoJSON = { "type": "MultiPolygon", "coordinates": [[[[255000,
591200], [254800, 591100], [254200, 590900], [254100, 591000],
[253200, 590800], [253200, 591000], [252600, 591000], [252300,
590300], [251716.41127540552, 590300], [251100, 590400], [250900,
591100], [250300, 590800], [250132.08422666547, 591051.8736600018],
[250100, 591100], [249700, 591900], [249900, 592000],
[249401.3619016671, 593097.0038163324], [249600, 593205.9016776244],
[249600, 593700], [249600, 594199.6611783154], [249800, 594300],
[249965.23947141026, 594300], [250100, 594300], [250700, 594400],
[251263.8577608574, 594400], [251300, 594400], [251390.99344587393,
594490.993445874], [251700, 594600], [251700, 594800], [251400,
595500], [251300, 596000], [251400, 596200], [251500, 596400],
[251900, 596400], [252400, 596400], [253500, 596100], [254000,
596200], [254100, 596500], [254000, 596500], [254100, 596700],
[254773.47066302033, 596411.3697158485], [254800, 596000], [254600,
595700], [254603.36775107612, 594579.7934935433], [254696.28726031014,
594022.276438139], [254700, 593200], [254800, 592700],
[254990.02682810242, 592509.9731718976], [255000, 591200]]]] }

and used this function to get polygon:

var coords = GeoJSON.coordinates;
var paths = [];

for (var i = 0; i < coords.length; i++) {
for (var j = 0; j < coords[i].length; j++) {
var path = [];
for (var k = 0; k < coords[i][j].length; k++) {


var ll = new google.maps.LatLng(coords[i][j][k][0],
coords[i][j][k][1]);
path.push(ll);

}
paths.push(path);
}
}
var polygon = new google.maps.Polygon({
paths: paths,
strokeColor: "#FF7800",
strokeOpacity: 1,
strokeWeight: 5,
fillColor: "#46461F",
fillOpacity: 0.25,
map:GoogleMap // also tried setMap on polygon
});

or
polygon.setMap(GoogleMap);


When I debug the code in firebug, I see lat/long conversion is going
alright but on the maps, there is nothing no errors.

Any help or clue highly is appreciated.

Thanks in advance for your time.

Regards,
SSA

Rossko

unread,
Jan 6, 2011, 8:46:25 AM1/6/11
to Google Maps JavaScript API v3

geoco...@gmail.com

unread,
Jan 6, 2011, 8:47:03 AM1/6/11
to Google Maps JavaScript API v3
A link to your map that exhibits the problem would be useful if you
want help.
http://groups.google.com/group/google-maps-js-api-v3/t/2b3f101fd509919e

-- Larry

SSA

unread,
Jan 6, 2011, 9:16:35 AM1/6/11
to Google Maps JavaScript API v3
thank you all. here is the complete page, I can not create a demo
page.

http://pastebin.com/NCzg1rW9

or here, (api key will be different):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body
{
margin: 0;
padding: 0;
text-align: left;
}
.map
{
width: 1213px;
height: 440px;
border: 1px solid gray;
float: right; /*width:70%;*/ /*height:100%;*/
margin-right: 20px;
z-index: 1;
left: 390px;
top: 0px;
position: absolute;
}
</style>

<script src="http://maps.google.com/maps?
file=api&amp;v=3&amp;sensor=false&amp;key=ABQIAAAAdzk0SYNr2fEpkOQ_Uo1l3RTsg_i-
WWKArV0AOE7LKAqqJk7bDhSVMCGE4QT4EhQVCvTcFGsEle4eeQ" type="text/
javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/
api/js?sensor=false"></script>
<script type="text/javascript">


var Holland = new google.maps.LatLng(52.156, 5.387);
var GeoJSON = { "type": "MultiPolygon", "coordinates":
[[[[255000, 591200], [254800, 591100], [254200, 590900], [254100,
591000], [253200, 590800], [253200, 591000], [252600, 591000],
[252300, 590300], [251716.41127540552, 590300], [251100, 590400],
[250900, 591100], [250300, 590800], [250132.08422666547,
591051.8736600018], [250100, 591100], [249700, 591900], [249900,
592000], [249401.3619016671, 593097.0038163324], [249600,
593205.9016776244], [249600, 593700], [249600, 594199.6611783154],
[249800, 594300], [249965.23947141026, 594300], [250100, 594300],
[250700, 594400], [251263.8577608574, 594400], [251300, 594400],
[251390.99344587393, 594490.993445874], [251700, 594600], [251700,
594800], [251400, 595500], [251300, 596000], [251400, 596200],
[251500, 596400], [251900, 596400], [252400, 596400], [253500,
596100], [254000, 596200], [254100, 596500], [254000, 596500],
[254100, 596700], [254773.47066302033, 596411.3697158485], [254800,
596000], [254600, 595700], [254603.36775107612, 594579.7934935433],
[254696.28726031014, 594022.276438139], [254700, 593200], [254800,
592700], [254990.02682810242, 592509.9731718976], [255000,
591200]]]] }

var Options = {
zoom: 8,
center: Holland,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true,
scaleControl: true,
navigationControl: true
};

function Init() {
if (!GBrowserIsCompatible()) return;


/*Get the google map object, based on options*/

GoogleMap = new
google.maps.Map(document.getElementById("map"), Options);

var coords = GeoJSON.coordinates;
var paths = [];
for (var i = 0; i < coords.length; i++) {
for (var j = 0; j < coords[i].length; j++) {
var path = [];
for (var k = 0; k < coords[i][j].length; k++) {
var ll = new google.maps.LatLng(coords[i][j][k]
[0],coords[i][j][k][1]);
path.push(ll);
}
paths.push(path);
}
}
var polygon = new google.maps.Polygon({
paths: paths,
strokeColor: "#FF7800",
strokeOpacity: 1,
strokeWeight: 5,
fillColor: "#46461F",
fillOpacity: 0.25
//,map: GoogleMap // also tried setMap on polygon
});


polygon.setMap(GoogleMap);
}
</script>

<title></title>
</head>
<body onload="Init()">
<div id="map" class="map">
</div>
</body>
</html>



On Jan 6, 2:47 pm, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:
> want help.http://groups.google.com/group/google-maps-js-api-v3/t/2b3f101fd509919e

geoco...@gmail.com

unread,
Jan 6, 2011, 10:17:07 AM1/6/11
to Google Maps JavaScript API v3
On Jan 6, 6:16 am, SSA <deepbhard...@gmail.com> wrote:
> thank you all. here is the complete page, I can not create a demo
> page.
>
> http://pastebin.com/NCzg1rW9

That is probably just code. I'm not going to even bother to look, did
you read the posting guidelines?

>
> or here, (api key will be different):

There are no keys for API v3.

If you are interested in help, post a link, _not_ code.

-- Larry

Rossko

unread,
Jan 6, 2011, 12:06:56 PM1/6/11
to Google Maps JavaScript API v3
> http://pastebin.com/NCzg1rW9

You are loading both v2 and v3 Maps APIs (which won't work) and have
both v2 and v3 syantax in your own code (which won't work).
You need to take care to stick to just one when when copy/paste
examples

geoco...@gmail.com

unread,
Jan 6, 2011, 12:21:41 PM1/6/11
to Google Maps JavaScript API v3
On Jan 6, 9:06 am, Rossko <ros...@culzean.clara.co.uk> wrote:
> >http://pastebin.com/NCzg1rW9
>
> You are loading both v2 and v3 Maps APIs (which won't work)

I thought I remembered seeing posts that included both on the same
page. Doing that certainly would be a difficult task and require
extensive knowledge of both APIs, and I doubt it would be good for the
long term.

You certainly can't mix the two. I don't read posted code as my
browser finds syntax errors much better than I do, so it is mostly a
waste of my time.

-- Larry

geoco...@gmail.com

unread,
Jan 6, 2011, 12:25:05 PM1/6/11
to Google Maps JavaScript API v3
On Jan 6, 5:47 am, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:
Did you try searching the group?
http://groups.google.com/group/google-maps-js-api-v3/search?group=google-maps-js-api-v3&q=GeoJSON&qt_g=Search+this+group

>
>   -- Larry
>
>
>
>
>
> > Thanks in advance for your time.
>
> > Regards,
> > SSA- Hide quoted text -
>
> - Show quoted text -- Hide quoted text -
>
> - Show quoted text -

geoco...@gmail.com

unread,
Jan 6, 2011, 12:28:16 PM1/6/11
to Google Maps JavaScript API v3
On Jan 6, 6:16 am, SSA <deepbhard...@gmail.com> wrote:
> thank you all. here is the complete page, I can not create a demo
> page.
>
> http://pastebin.com/NCzg1rW9
>
> or here, (api key will be different):
>
>         var Holland = new google.maps.LatLng(52.156, 5.387);


[255000, 591200], [254800, 591100],
What coordinate system are these points in? They don't look like
WGS84 to me.

SSA

unread,
Jan 6, 2011, 4:47:08 PM1/6/11
to Google Maps JavaScript API v3
Thanks again for your inputs. I'll check for V2 and V3 syntaxand will
try create a demo page somewhere but after lots of hit and trial, I
was on the assumption as you pointed Larry, that its could be a data
problem or say coordinates problem.

For more info, I used shape file and imported them to Postgres and
SqlServer database then i use GeoServer to fetch GeoRSS, KML and place
them on map, thats done, working fine, got SLD to present them nicely
but GeoRSS does not give styling (and as per the google maps API, I
don't get individual feature and all the events over them) and KML
lacks in performance so tried using GeoJSON as it would also comply
with some sort of heatmaps implementation for the functionality I want
to achive and can give me more control over it. Of-course I am new in
this things so most of the things I read and try, Please correct me,
if I am getting it wrong somewhere.

TheSRS I used for import EPSG:28992 or same for working directly over
shape files, I think I have to force WGS84 on geoserver as per your
guidance, don't know, whether it will work or not but I'll check for
it. Please let me know if I am going in right direction and thanks
again.


On Jan 6, 6:28 pm, "geocode...@gmail.com" <geocode...@gmail.com>

SSA

unread,
Jan 7, 2011, 6:07:00 AM1/7/11
to Google Maps JavaScript API v3
Guys, using EPSG:4289 (its also ) did the job. I got different
coordinates and got the polygon with formatting, thanks for looking
into the post.

EPSG:28992 is also for Holland but I don't get why it didn't work.
Need to get for insight on this SRS thing.

geoco...@gmail.com

unread,
Jan 7, 2011, 7:06:05 AM1/7/11
to Google Maps JavaScript API v3
On Jan 7, 3:07 am, SSA <deepbhard...@gmail.com> wrote:
> Guys, using EPSG:4289 (its also ) did the job. I got different
> coordinates and got the polygon with formatting, thanks for looking
> into the post.
>
> EPSG:28992 is also for Holland but I don't get why it didn't
> work. Need to get for insight on this SRS thing.

The Google Maps API requires latitude and longitude coordinates in the
WGS84 coordinate system by default.
http://code.google.com/apis/maps/documentation/javascript/maptypes.html#MapCoordinates

-- Larry

SSA

unread,
Jan 8, 2011, 1:40:37 PM1/8/11
to Google Maps JavaScript API v3
Now, its damn slow, I have approx, 440 complex polygon to draw but
this GeoJSON method is too slow, I think I'll go back with GeoRSS and
KML options. Just to make sure, what is appropriate way? considering I
need polygon styling based on data from database. Please guide. thanks

On Jan 7, 1:06 pm, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:
> On Jan 7, 3:07 am, SSA <deepbhard...@gmail.com> wrote:
>
> > Guys, using EPSG:4289 (its also ) did the job. I got different
> > coordinates and got the polygon with formatting, thanks for looking
> > into the post
>
> > EPSG:28992 is also for Holland but I don't get why it didn't
> > work. Need to get for insight on this SRS thing.
>
> The Google Maps API requires latitude and longitude coordinates in the
> WGS84 coordinate system by default.http://code.google.com/apis/maps/documentation/javascript/maptypes.ht...

Rossko

unread,
Jan 8, 2011, 4:03:02 PM1/8/11
to Google Maps JavaScript API v3
> Now, its damn slow, I have approx, 440 complex polygon to draw

Yep, if you'd said to begin with we could have told you that.

> this GeoJSON method is too slow, I think I'll go back with GeoRSS and
> KML options. Just to make sure, what is appropriate way? considering I
> need polygon styling based on data from database.

GeoRSS contains no styling information. KML can.

SSA

unread,
Jan 8, 2011, 5:32:18 PM1/8/11
to Google Maps JavaScript API v3
Yes I know GeoRSS has this limitation thats why I was looking into
GeoJSON. I am yet in learning phase but How can I achieve dynamic data
based heatmaps without any third party libs, don;t mind open source
one and fusion table but using Google Maps?

Rossko

unread,
Jan 9, 2011, 8:55:12 AM1/9/11
to Google Maps JavaScript API v3
KML can contain styling information.
KML can be dynamic through the use of NetworkLink and Refresh.
You seem to have rejected KML because "it lacks performance"? I
can't see why that should be the case but in the absence of any demo
or detail of how you are using KML (KmlLayer? GeoXml3?) can't comment
much further.

Jason Sanford

unread,
Jan 10, 2011, 10:52:23 AM1/10/11
to google-map...@googlegroups.com
I usually opt for drawing my map vectors via GeoJSON/google.maps.Polygon. For me it offers more flexibility than KML or GeoRSS but it does slow things down a lot when drawing hundreds of vectors.

Have you considered simplifying your geometry? I'm not sure what you're using to push your GeoJSON but if you're using something like PostGIS you could try:

st_asgeojson(transform(simplify(the_geom,1),4326))

In the case above the I'm simplifying with a tolerance of 1 (feet in my case), You'd have to adjust this for your coordinate system's units.

If it's possible that not all of your polygons are within the current extent you could always hide the ones that aren't visible with some sort of filter. I'm not sure this extra overhead wouldn't slow down things even more though, but probably worth a try.

Good luck.

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.


SSA

unread,
Jan 10, 2011, 11:41:33 AM1/10/11
to Google Maps JavaScript API v3
Thanks Jason, we are not willing to use, PostGis but SqlServer but
I'll try this method, at present polygons are too complex so I opted
for pre-generated KML file (works great) and GeoRSS for highligting
selected one. for dynamic polygon I just experimented with GeoJSON but
generation of JSON/KML even for a single polygon is slow from
GeoServer, not getting right direction yet but 3 levels are set,
fourth should be dynamic.

4 Levels of layers I want to use are:

1. Get all the districts for a country, pre-generated KML with
attribute based formatting, works ok
2. Highlighting and zooming on clicked district, GeoRSS works ok
3. Getting neighborhoods of selected district using pre-generated KML
with attribute based formatting works ok

4. Now the last thing is, among those neighbourhouds, one column is
editable by user, so those ones having column set to false, I need
special formatting so it should be dynamic, here it lack in
performance with GeoJSON or on the fly KML file generation. Although
it would be not too big KML file but still 10 seconds is minimum time
its taking and same time for GeoJSON polyong.


One more question: Is using PostGis or SqlServer database instead of
shape file faster? I didn't notice such a major improvement even I
think shapefiles are faster in my case. any idea whats wrong?

Thansk for all your inputs, it's helpful.
> > google-maps-js-a...@googlegroups.com<google-maps-js-api-v3%2B unsub...@googlegroups.com>
> > .
Reply all
Reply to author
Forward
0 new messages