CODEWITHSUNDEEP
angulartypescriptgoogle-maps
Philippe Corrèges
Philippe Corrèges

Reputation: 699

How to load GeoJSON on a google map?

I have the following json file that has been parsed successfully on GEO Lint

{"type":"FeatureCollection",
"features":[
{"type":"Feature",
    "properties":{},
    "geometry":
        {"type":"Polygon",
        "coordinates":[
        [[43.252967,5.379856],
        [43.249466,5.422988],
        [43.245153,5.425048],
        [43.239838,5.383804],
        [43.252967,5.379856],
        [43.252967,5.379856]
        ]]}}]}

My map is created in the ngOnInit{} part of the component:

    ngOnInit() {
    this.map = new 
    google.maps.Map(document.getElementById('mapContainer'), {
          center: {lat: 43.252967, lng: 5.379856},
              zoom: 14,
              disableDefaultUI: true,
              zoomControl: true,
              minZoom: 3,
              maxZoom: 20,
              draggable: true,
              mapTypeId: 'terrain'
        });
        var customLayer = new google.maps.Data();
        this.getSitesandPoints();
      }

The last call to getSiteandPoints function retrieve the data in geoJson format and displays it :

  getSitesandPoints() {
    this.pointsArray = [];
    this.customerApi.getLocations(this.currentUser.id)
    .subscribe((response) => {
      this.locations = response;
      console.log(JSON.stringify(this.locations[0].geoDefinition));
      this.map.data.addGeoJson(this.locations[0].geoDefinition);

    });

The GEO data is not displayed on the map. Could someone help me to find out why ? I tried layers, loadGeoJson method ... in vain.

I thank you in advance for your help.

  [1]: http://geojsonlint.com/

Upvotes: 1

Views: 490

Answers (1)

Philippe Corrèges
Philippe Corrèges

Reputation: 699

Finally, the problem was fixed. GeoJSON uses Lat, Lng in this order instead of Lng, Lat order. My file was displayed in Ethiopia...

Upvotes: 2

Related Questions