none
Reading GeoJSON in Bing Maps RRS feed

  • Question

  • I am working with the Bing Maps v8 API, trying to load my own GeoJSON onto a Bing Maps as in the Bing Maps SDK Example for "Read GeoJSON Object"

    I am creating my JSON successfully (I have tested it using the Bing Maps Drag and Drop feature and all of my points show on the map.

    I am trying to get my GeoJSON to automatically load on a map, but my points are not loading, and I am not seeing an error.    

    JavaScript:

    function loadMapScenario() { var map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: 'KEY, center: new Microsoft.Maps.Location(32.560116, -117.057889), zoom: 7 }); Microsoft.Maps.loadModule('Microsoft.Maps.GeoJson', function () { var featureCollection = Microsoft.Maps.GeoJson.read(getGeoJson(), function (shapes) { map.entities.push(shapes); }, 'callback'); }); function getGeoJson() { $(function (callback) { var data; $.ajax({ type: "POST", url: "/TD/PatGeoJSON", contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) { data = response; callback(data) }, failure: function (response) { alert("Failure: " + response); }, error: function (response) { alert("Failure: " + response); } }); }); }

    }


    C#

    [HttpPost]
            public JsonResult PatGeoJSON(string parent)
            {
                JObject jsondata = JObject.FromObject(new
                {
                    type = "FeatureCollection",
                    features = from p in pList
                              select new
                              {
                                  type = "Feature",
                                  geometry = new Geometry
                                  {
                                      type = "Point",
                                      coordinates = new double?[] { p.GeoLocation.Longitude, p.GeoLocation.Latitude }
                                  },
                                  properties = new Properties
                                  {                                  
                                      MemberName = p.MemberName,
                                      /// etc...
                                  }
                              }
                });        
    
                return Json(jsondata, "application/json");
            }

    I am not receiving any errors, but the pin points are not showing on the map.

    If I return the GeoJSON string direct in the getGeoJson() function, the pin point show on the map. (as in example the example on the Bing Maps SDK "Read GeoJSON Object).

    I have been trying to troubleshoot this for hours.  I don't know what else to try...  TIA

    Monday, November 6, 2017 9:13 PM

Answers

  • Your getGeoJson function is asynchronous, so it doesn't return anything, this bing maps is receiving a null value to parse which it simply ignores and this no error. Specify a callback function when loading your geojson and when it responds, then read its value. Here is an updated version of your javascript:

    function loadMapScenario() {
    	var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
    		credentials: 'KEY',
    		center: new Microsoft.Maps.Location(32.560116, -117.057889),
    		zoom: 5
    	});
    	
    	Microsoft.Maps.loadModule('Microsoft.Maps.GeoJson', function () {
    		getGeoJson(function(data){
    			var featureCollection = Microsoft.Maps.GeoJson.read(data, { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
    			for (var i = 0; i < featureCollection.length; i++) {
    				map.entities.push(featureCollection[i]);
    			}
    		});
    	});
    
       function getGeoJson(callback) {
    		var data;
    		$.ajax({
    			type: "POST",
    			url: "/TD/PatGeoJSON",
    			contentType: "application/json; charset=utf-8",
    			dataType: "json",
    			success: function (response) {
    				alert("Hello: " + response.responseText.data)
    				data = response.RepsonseText;
    				callback(data)                                
    			},
    			failure: function (response) {
    				alert("Failure: " + response.responseText);
    			},
    			error: function (response) {
    				alert("Failure: " + response.responseText);
    			}                            
    		});
    	}
    }


    [Blog] [twitter] [LinkedIn]


    Tuesday, November 7, 2017 6:59 PM