Earthquakes in KML

This example uses OpenLayers v4.0.1. The latest is v.

#### Earthquakes in KML

Demonstrates the use of a Shape symbolizer to render earthquake locations.

This example parses a KML file and renders the features as a vector layer. The layer is given a `style` that renders earthquake locations with a size relative to their magnitude.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.format.KML
,
- ol.layer.Tile
,
- ol.layer.Vector
,
- ol.source.Stamen
,
- ol.source.Vector
,
- ol.style.Circle
,
- ol.style.Fill
,
- ol.style.Stroke
,
- ol.style.Style

Copy Edit
Earthquakes in KML Demonstrates the use of a Shape symbolizer to render earthquake locations. var styleCache = {}; var styleFunction = function(feature) { // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a // standards-violating <magnitude> tag in each Placemark. We extract it from // the Placemark's name instead. var name = feature.get('name'); var magnitude = parseFloat(name.substr(2)); var radius = 5 + 20 * (magnitude - 5); var style = styleCache[radius]; if (!style) { style = new ol.style.Style({ image: new ol.style.Circle({ radius: radius, fill: new ol.style.Fill({ color: 'rgba(255, 153, 0, 0.4)' }), stroke: new ol.style.Stroke({ color: 'rgba(255, 204, 0, 0.2)', width: 1 }) }) }); styleCache[radius] = style; } return style; }; var vector = new ol.layer.Vector({ source: new ol.source.Vector({ url: 'https://openlayers.org/en/v4.0.1/examples/data/kml/2012_Earthquakes_Mag5.kml', format: new ol.format.KML({ extractStyles: false }) }), style: styleFunction }); var raster = new ol.layer.Tile({ source: new ol.source.Stamen({ layer: 'toner' }) }); var map = new ol.Map({ layers: [raster, vector], target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); var info = $('#info'); info.tooltip({ animation: false, trigger: 'manual' }); var displayFeatureInfo = function(pixel) { info.css({ left: pixel[0] + 'px', top: (pixel[1] - 15) + 'px' }); var feature = map.forEachFeatureAtPixel(pixel, function(feature) { return feature; }); if (feature) { info.tooltip('hide') .attr('data-original-title', feature.get('name')) .tooltip('fixTitle') .tooltip('show'); } else { info.tooltip('hide'); } }; map.on('pointermove', function(evt) { if (evt.dragging) { info.tooltip('hide'); return; } displayFeatureInfo(map.getEventPixel(evt.originalEvent)); }); map.on('click', function(evt) { displayFeatureInfo(evt.pixel); }); #map { position: relative; } #info { position: absolute; height: 1px; width: 1px; z-index: 100; } .tooltip.in { opacity: 1; } .tooltip.top .tooltip-arrow { border-top-color: white; } .tooltip-inner { border: 2px solid white; } <div id="map" class="map"><div id="info"></div></div>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Earthquakes in KML</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
        <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <style>
          #map {
            position: relative;
          }
          #info {
            position: absolute;
            height: 1px;
            width: 1px;
            z-index: 100;
          }
          .tooltip.in {
            opacity: 1;
          }
          .tooltip.top .tooltip-arrow {
            border-top-color: white;
          }
          .tooltip-inner {
            border: 2px solid white;
          }
        </style>
      </head>
      <body>
        <div id="map" class="map"><div id="info"></div></div>
        <script>
          var styleCache = {};
          var styleFunction = function(feature) {
            // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
            // standards-violating <magnitude> tag in each Placemark.  We extract it from
            // the Placemark's name instead.
            var name = feature.get('name');
            var magnitude = parseFloat(name.substr(2));
            var radius = 5 + 20 * (magnitude - 5);
            var style = styleCache[radius];
            if (!style) {
              style = new ol.style.Style({
                image: new ol.style.Circle({
                  radius: radius,
                  fill: new ol.style.Fill({
                    color: 'rgba(255, 153, 0, 0.4)'
                  }),
                  stroke: new ol.style.Stroke({
                    color: 'rgba(255, 204, 0, 0.2)',
                    width: 1
                  })
                })
              });
              styleCache[radius] = style;
            }
            return style;
          };

          var vector = new ol.layer.Vector({
            source: new ol.source.Vector({
              url: 'https://openlayers.org/en/v4.0.1/examples/data/kml/2012_Earthquakes_Mag5.kml',
              format: new ol.format.KML({
                extractStyles: false
              })
            }),
            style: styleFunction
          });

          var raster = new ol.layer.Tile({
            source: new ol.source.Stamen({
              layer: 'toner'
            })
          });

          var map = new ol.Map({
            layers: [raster, vector],
            target: 'map',
            view: new ol.View({
              center: [0, 0],
              zoom: 2
            })
          });

          var info = $('#info');
          info.tooltip({
            animation: false,
            trigger: 'manual'
          });

          var displayFeatureInfo = function(pixel) {
            info.css({
              left: pixel[0] + 'px',
              top: (pixel[1] - 15) + 'px'
            });
            var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
              return feature;
            });
            if (feature) {
              info.tooltip('hide')
                  .attr('data-original-title', feature.get('name'))
                  .tooltip('fixTitle')
                  .tooltip('show');
            } else {
              info.tooltip('hide');
            }
          };

          map.on('pointermove', function(evt) {
            if (evt.dragging) {
              info.tooltip('hide');
              return;
            }
            displayFeatureInfo(map.getEventPixel(evt.originalEvent));
          });

          map.on('click', function(evt) {
            displayFeatureInfo(evt.pixel);
          });
        </script>
      </body>
    </html>