Render GeoJSON as Heat Map

This code sample loads in earthquake data for the last 30 days from the United States Geological Survey (USGS) and displays them as a heatmap layer. The USGS data makes a number of earthquake data feeds available in GeoJSON format on their website here.

<!DOCTYPE html>
    <meta charset="utf-8" />
	<script type='text/javascript'>
    var usgsEarthquakeUrl = '';

    function GetMap() {
        var map = new Microsoft.Maps.Map('#myMap', {
            credentials: ‘Your Bing Maps Key’,
            center: new Microsoft.Maps.Location(40, -120),
            zoom: 2

        //Load the GeoJSON and HeatMap modules.
        Microsoft.Maps.loadModule(['Microsoft.Maps.GeoJson', 'Microsoft.Maps.HeatMap'], function () {
            Microsoft.Maps.GeoJson.readFromUrl(usgsEarthquakeUrl, function (shapes) {
                var heatmap = new Microsoft.Maps.HeatMapLayer(shapes, { radius: 5 });
    <script type='text/javascript' src='' async defer></script>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>

Here is what this heat map looks like over the Pacific Ocean which is surrounded by the Ring of Fire, an area where a large number of earthquakes and volcanic eruptions occur.

Screenshot of a Bing Map showing the Pacific Ocean with the earthquake data loaded as a heat map over it.

Try it now