Using set of Lat Long Create TURF on Bing Map

Question

I have area wise set of Latitude and Longitude and want to create TURF territory on Bing Map like showing on below image. I don't know what are ways to create/draw TURF on map. I am not sure about any feature or function which is available in Bing MAP SDK to create TURF with event and cetroid pushpin.

I tried polygon function but didn't help to create TURF.

https://www.bing.com/api/maps/sdk/mapcontrol/isdk/wktwritetowkt#TS

    var myGeoJson = {
        "type": "Polygon",
        "coordinates": [[
                [-122.12901, 47.64178],
                [-122.12901, 47.64226],
                [-122.12771, 47.64226],
                [-122.12771, 47.64178],
                [-122.12901, 47.64178]
        ]]
    };
    //Load the GeoJson Module.
    Microsoft.Maps.loadModule('Microsoft.Maps.GeoJson', function () {
        //Parse the GeoJson object into a Bing Maps shape.
        var shape = Microsoft.Maps.GeoJson.read(myGeoJson, {
            polygonOptions: {
                fillColor: 'rgba(255,0,0,0.5)',
                strokeColor: 'white',
                strokeThickness: 5
            }
        });
        //Add the shape to the map.
        map.entities.push(shape);
    });

I want to achieve something like shown in attached image.

UPDATE : SDK code added.

https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/geojsonreadobject#TS

    import { ViewContainerRef, Component, ElementRef, OnInit, ViewChild, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { MapService } from '../../services/map.service';
import { CookieService } from 'ngx-cookie';
import { Config } from '../../config/config';
import { NguiAutoCompleteModule } from '@ngui/auto-complete/dist';
import * as io from 'socket.io-client';
import { CommonUtils } from './../../shared/CommonUtils';
import { fail, throws } from 'assert';
import { Toast, ToastsManager } from 'ng2-toastr/ng2-toastr';
import { OnDestroy } from '@angular/core/src/metadata/lifecycle_hooks';
import { DeviceDetectorService } from 'ngx-device-detector';

declare const Microsoft: any;
declare const Bing;
declare const GeoJson: any;
declare var jQuery: any;
declare var $: any;

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit, OnDestroy {
  connection;
  map: any;
  infobox: any;
  dataLayer: any;
  heatGradientData: any;

  @ViewChild('mapElement') someInput: ElementRef;
  myMap = document.querySelector('#myMap');
  socket: any = null;
  socketURL: string;

  constructor(private mapService: MapService,
    private router: Router, private config: Config,
    private utils: CommonUtils,
    private cookieService: CookieService,
    public toastr: ToastsManager, vRef: ViewContainerRef,
    private deviceService: DeviceDetectorService,
    private zone: NgZone) {
    this.toastr.setRootViewContainerRef(vRef);
  }

  ngOnInit() {

    if (document.readyState != 'complete') {
      document.onreadystatechange = () => {
        if (document.readyState === 'complete') {
          this.loadMapView(this.config.getConstants('mapTypeRoad'));
          this.ReadGeoJson();
        } else {
          this.ngOnInit();
        }
      }
    } else {
      if (document.readyState === 'complete') {
        this.loadMapView(this.config.getConstants('mapTypeRoad'));
        this.ReadGeoJson();
      }
    }

  }

  loadMapView(type: String) {

    var location = new Microsoft.Maps.Location(53.32, -110.29);

    this.map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
      credentials: this.config.get('BingMapKey'),
      center: location,
      mapTypeId: type == this.config.getConstants('mapTypeSatellite') ? Microsoft.Maps.MapTypeId.aerial : Microsoft.Maps.MapTypeId.road,
      zoom: 5,
      liteMode: true,
      enableClickableLogo: false,
      showLogo: false,
      showTermsLink: false,
      showMapTypeSelector: false,
      showTrafficButton: true,
      enableSearchLogo: false,
      showCopyright: false
    });

    //Load the Animation Module
    Microsoft.Maps.loadModule('AnimationModule', function () {
    });

    //Store some metadata with the pushpin
    this.infobox = new Microsoft.Maps.Infobox(this.map.getCenter(), {
      visible: false
    });

    this.infobox.setMap(this.map);

    // Load the Spatial Math module.
    Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', function () { });

    //Create a layer to add the GeoJSON data to.
    this.dataLayer = new Microsoft.Maps.Layer();
    this.map.layers.insert(this.dataLayer);

  }

  ReadGeoJson() {
    Microsoft.Maps.loadModule('Microsoft.Maps.GeoJson', function () {
      var featureCollection = Microsoft.Maps.GeoJson.read(this.getSouthAfricaGeoJson(), { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
      for (var i = 0; i < featureCollection.length; i++) {
        this.map.entities.push(featureCollection[i]);
      }
    });
  }

  getSouthAfricaGeoJson() {
    return { 'type': 'FeatureCollection', 'features': [{ 'type': 'Feature', 'id': 'ZAF', 'properties': { 'name': 'South Africa' }, 'geometry': { 'type': 'Polygon', 'coordinates': [[[31.521001, -29.257387], [31.325561, -29.401978], [30.901763, -29.909957], [30.622813, -30.423776], [30.055716, -31.140269], [28.925553, -32.172041], [28.219756, -32.771953], [27.464608, -33.226964], [26.419452, -33.61495], [25.909664, -33.66704], [25.780628, -33.944646], [25.172862, -33.796851], [24.677853, -33.987176], [23.594043, -33.794474], [22.988189, -33.916431], [22.574157, -33.864083], [21.542799, -34.258839], [20.689053, -34.417175], [20.071261, -34.795137], [19.616405, -34.819166], [19.193278, -34.462599], [18.855315, -34.444306], [18.424643, -33.997873], [18.377411, -34.136521], [18.244499, -33.867752], [18.25008, -33.281431], [17.92519, -32.611291], [18.24791, -32.429131], [18.221762, -31.661633], [17.566918, -30.725721], [17.064416, -29.878641], [17.062918, -29.875954], [16.344977, -28.576705], [16.824017, -28.082162], [17.218929, -28.355943], [17.387497, -28.783514], [17.836152, -28.856378], [18.464899, -29.045462], [19.002127, -28.972443], [19.894734, -28.461105], [19.895768, -24.76779], [20.165726, -24.917962], [20.758609, -25.868136], [20.66647, -26.477453], [20.889609, -26.828543], [21.605896, -26.726534], [22.105969, -26.280256], [22.579532, -25.979448], [22.824271, -25.500459], [23.312097, -25.26869], [23.73357, -25.390129], [24.211267, -25.670216], [25.025171, -25.71967], [25.664666, -25.486816], [25.765849, -25.174845], [25.941652, -24.696373], [26.485753, -24.616327], [26.786407, -24.240691], [27.11941, -23.574323], [28.017236, -22.827754], [29.432188, -22.091313], [29.839037, -22.102216], [30.322883, -22.271612], [30.659865, -22.151567], [31.191409, -22.25151], [31.670398, -23.658969], [31.930589, -24.369417], [31.752408, -25.484284], [31.837778, -25.843332], [31.333158, -25.660191], [31.04408, -25.731452], [30.949667, -26.022649], [30.676609, -26.398078], [30.685962, -26.743845], [31.282773, -27.285879], [31.86806, -27.177927], [32.071665, -26.73382], [32.83012, -26.742192], [32.580265, -27.470158], [32.462133, -28.301011], [32.203389, -28.752405], [31.521001, -29.257387]], [[28.978263, -28.955597], [28.5417, -28.647502], [28.074338, -28.851469], [27.532511, -29.242711], [26.999262, -29.875954], [27.749397, -30.645106], [28.107205, -30.545732], [28.291069, -30.226217], [28.8484, -30.070051], [29.018415, -29.743766], [29.325166, -29.257387], [28.978263, -28.955597]]] } }] };
  }


  stringifyJson(data) {
    return JSON.stringify(data);
  }

  parseToJson(data) {
    return JSON.parse(data);
  }

  stringifyBodyJson(data) {
    return JSON.parse(data['_body']);
  }

  ngOnDestroy() {
    if (this.connection !== undefined) {
      this.connection.unsubscribe();
    }
  }

}

When you say TURF, are you referring to turf.js? http://turfjs.org/ — rbrundritt, Jan 03 '19 at 18:05
No. I heard first time about turfjs.org. I am talking about surface layer of earth. From back end I'm getting set of latitude and longitude and using these information I want to draw shape/multipolygon with centroid pushpin on the map. I think this can be done using GeoJSON fine. Like shown here. https://github.com/PublicaMundi/MappingAPI/blob/master/data/geojson/countries.geojson. — Pushkar Rathod, Jan 03 '19 at 21:46
@rbrundritt Please let me know your thought on geojson approach. — Pushkar Rathod, Jan 03 '19 at 21:47

score 0 · Accepted Answer · answered Jan 04 '19 at 02:02

0

There is a lot of different ways in which you can render data on top of the map. GeoJSON is the primary data format used, but it doesn't have to be a file, it can be a locally create GeoJSON object as well. Here are a bunch of examples of rendering data in Azure Maps: https://azuremapscodesamples.azurewebsites.net/

Update: Sorry for the confusion. I'm on the Azure Maps team at Microsoft and forgot you were asking about Bing Maps. For Bing Maps, you can use GeoJSON, or KML/GeoRSS/GPX, or create shapes locally using JavaScript. You can find some code samples on Bing Maps here: https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk

All that said, I highly recommend you take a look at Azure Maps as it is Microsoft's latest enterprise mapping platform.

answered Jan 04 '19 at 02:02

rbrundritt

16,570
2
21
46

Thanks Ricky. Azure maps looks great in front of bing map. Thanks for the sdk link. I follow the same link. I have added code to read GeoJson in above question but due to some reason it's not working in Angular. I'm not able to see that layer over the map. Even no error. Can't find what is wrong. – Pushkar Rathod Jan 04 '19 at 02:30
If you can, add some breakpoints to the code inside the ReadGeoJson function. I suspect that `this` may have a different meaning in the callback and thus you are not able to access the map and the getSouthAfricaGeoJson function. Try adding `var self = this;` before the loadModule call and then replace `this` in the rest of the code in the ReadGeoJson function with `self`. – rbrundritt Jan 04 '19 at 16:50

Using set of Lat Long Create TURF on Bing Map

1 Answers1