Search code examples
javascriptgeojsonbabylonjs

How to create polygon shape from coordinates returned by GeoJSON

I have GeoJSON, with stored building data as coordinates.

If I drag and drop it on google maps, shape will be rendered. I want to learn how to create polygonal shape in babylon.js from data coded in GeoJSON. JSON I'm talking about: 

{
   "type":"FeatureCollection",
   "features":[
      {
         "id":"w26358613",
         "properties":{
            "levels":8
         },
         "geometry":{
            "type":"Polygon",
            "coordinates":[
               [
                  [ 13.426791, 52.518344 ],
                  [ 13.426866, 52.518303 ],
                  [ 13.426951, 52.51826  ],
                  [ 13.427045, 52.518216 ],
                  [ 13.427139, 52.518175 ],
                  [ 13.427233, 52.518136 ],
                  [ 13.427341, 52.518095 ],
                  [ 13.427484, 52.518046 ],
                  [ 13.427489, 52.51805  ],
                  [ 13.42749,  52.51805  ],
                  [ 13.427493, 52.518052 ],
                  [ 13.427677, 52.518013 ],
                  [ 13.427653, 52.517971 ],
                  [ 13.427668, 52.517968 ],
                  [ 13.42762,  52.517885 ],
                  [ 13.427605, 52.517887 ],
                  [ 13.42758,  52.517846 ],
                  [ 13.427396, 52.517885 ],
                  [ 13.427435, 52.517952 ],
                  [ 13.427253, 52.518014 ],
                  [ 13.427237, 52.517997 ],
                  [ 13.427073, 52.51806  ],
                  [ 13.427092, 52.518077 ],
                  [ 13.426946, 52.51814  ],
                  [ 13.426927, 52.518124 ],
                  [ 13.426775, 52.518198 ],
                  [ 13.426796, 52.518213 ],
                  [ 13.426662, 52.518285 ],
                  [ 13.426639, 52.518271 ],
                  [ 13.426558, 52.518318 ],
                  [ 13.426502, 52.518353 ],
                  [ 13.426503, 52.518354 ],
                  [ 13.426483, 52.518366 ],
                  [ 13.426559, 52.518474 ],
                  [ 13.426651, 52.51845  ],
                  [ 13.426643, 52.518438 ],
                  [ 13.426647, 52.518436 ],
                  [ 13.426641, 52.518433 ],
                  [ 13.426727, 52.51838  ],
                  [ 13.426791, 52.518344 ]
               ]
            ]
         },
         "type":"Feature"
      }
   ]
}

Google maps rendered this form this JSON: 1

Thanks.

Solution

  • What you've got in GeoJSON are geographic coordinates of your polygon's points. What Google Maps API do is choosing a projection from those coordinates to a 2D coordinate system, which can be drawn on a map. IIRC, Google Maps API uses spherical Mercator projection. So, if you use formulas from the projection you choose (strongly suggest Mercator for that) you'll get set of 2D coordinated you could use to create polygon in Babylon.js use, e.g. PolygonMeshBuilder.