Read Local GeoJSON Object Example

The following code example takes a locally defined GeoJSON object and parses it into a Bing Maps shape using the GeoJSON module, then adds it to the map. When parsing the GeoJSON object, the options for polygons is set such that they will have a semi-transparent red fill color, a stroke thickness of 5 pixels, and a stroke color of white.

<!DOCTYPE html>
    <meta charset="utf-8" />
	<script type='text/javascript'>
    function GetMap() {
        var map = new Microsoft.Maps.Map('#myMap', {
            credentials: ‘Your Bing Maps Key’,
            mapTypeId: Microsoft.Maps.MapTypeId.aerial,
            center: new Microsoft.Maps.Location(47.642, -122.128),
            zoom: 18

        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 =, {
                polygonOptions: {
                    fillColor: 'rgba(255,0,0,0.5)',
                    strokeColor: 'white',
                    strokeThickness: 5

            //Add the shape to the map.
    <script type='text/javascript' src='' async defer></script>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>

Here is what this GeoJSON object looks like on the map. It is a polygon that outlines a soccer field on the Microsoft campus.

GeoJSON Shape on a Map