Add PolygonOptions to GeoJSON from URL in Bing Maps API

Question

I'm trying to get styles working on a Bing map that loads polygons from an external file. The documentation has two examples, firstly for including the data directly in the javascript:

    //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);
    });

(where 'myGeoJson' is a previously defined variable)

and the second loads it from a file:

    //Load GeoJSON module.
    Microsoft.Maps.loadModule('Microsoft.Maps.GeoJson', function () {

        //Read the GeoJSON file that is hosted on the same domain.
        Microsoft.Maps.GeoJson.readFromUrl('data/Countries.js',
            function (shapes) {
                //Add the shape(s) to the map.
                map.entities.push(shapes);
            });
    });

I want to be able to load from file, as in the second example, but style it as in the first.

I'm having trouble working out how to do that. I've tried simply replacing the call to GeoJson.read() in the first example with a call to GeoJson.readFromUrl(), but this fails. The documentation doesn't give any clues about how to style geojson loaded from file.

Can anyone give me any hints or tips?

Answer 1

Try the following:

//Load GeoJSON module.
    Microsoft.Maps.loadModule('Microsoft.Maps.GeoJson', function () {

        //Read the GeoJSON file that is hosted on the same domain.
        Microsoft.Maps.GeoJson.readFromUrl('data/Countries.js',
            function (shapes) {
                //Add the shape(s) to the map.
                map.entities.push(shapes);
            }, null, {
            polygonOptions: {
                fillColor: 'rgba(255,0,0,0.5)',
                strokeColor: 'white',
                strokeThickness: 5
            }
        });

Note the "null" between the callback function and the styles. If your file needed to be requested using JSONP, you can specify the JSONP URL parameter in that field.