GeoJSON is a common file format used for storing spatial data as a JSON object and is easy to import and export in Bing Maps V8 using the GeoJSON module. This file format tends to be more compact then its XML equivalents. This results in a much smaller file size, making it ideal for transferring spatial data to web and mobile applications. These files typically use a .js or .json file extensions, however occasionally you may come across some files that use .geojson. The following is an example of a GeoJSON file containing the location of New York.

{
    "type": "FeatureCollection",
    "features": [
      {
          "type": "Feature",
          "geometry": {
              "type": "Point",
              "coordinates": [-74.006393, 40.714172]
          },
          "properties": {
              "name": "New York",
              "description": "New York"
          }
      }
    ]
}

Additional information on this file format specification can be found here.

Drag and Drop a GeoJSON file

From time to time I come across an interesting data set in GeoJSON format that I want to quickly view in Bing Maps. The Bing Maps API’s make it easily read these files, but if I just want to quickly view the data I don’t really want to write an app each time I want to view a GeoJSON file. With this in mind we will take a look at how to create a reusable app where we can simply drag and Drop Geojson Files onto the map and have them load.

To accomplish this, the HTML5 FileReader and Drag & Drop API’s will be used. Good documentation on how to use these API’s together can be found here. Our application will first need to load the map then the GeoJSON module. From there we will attach drag and drop events to the maps main DOM element. When one or more files are dropped onto the map we will loop through each of them, attempt to read them as a GeoJSON file and then add the data to the map.

The following image shows the neighborhood boundaries of Los Angeles that came from a GeoJSON file that was downloaded from the Los Angeles Times Boundary API.

Try it now

Additional Resources

• Bing Maps V8 Code Samples
• Bing Maps V8 Interactive SDK
• Bing Maps V8 Documentation