VictorVelarde/ OpenLayers 3 - Terremotos recientes USGS

## OpenLayers 3 - Terremotos recientes USGS


## README.md

      
    Raw
  

              README.md
            
          
Ejemplo de uso sencillo con OpenLayers 3 y una capa remota de GeoJSON del USGS.
Ver http://earthquake.usgs.gov/earthquakes/feed/v1.0/ para más referencias


## index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Ejemplo sencillo con OL3</title>
    <link href="http://fonts.googleapis.com/css?family=Open+Sans|Dosis:400,800" rel="stylesheet" type="text/css" />

    <!-- Versión específica vs. master | min vs. debug -->
    <link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.12.1/build/ol-debug.js"></script>

    <style>
        /* General */

        h1 {
            font-family: 'Dosis', sans-serif;
            font-weight: 400;
            font-size: 40px;
            line-height: 46px;
            margin-bottom: 10px;
            color: #E50275;
        }

        body {
            font-family: 'Open Sans', sans-serif;
            background-color: #F7FBFF;
        }

        .ficha {
            color: #03A1C4;
        }
    </style>
</head>

<body>
    <h1>Mapa de terremotos significativos el último mes (USGS)</h1>

    <div id="mapa" style="height: 400px; border: 2px gray solid;"></div>
    <div id="seleccion" style="margin-top:10px"></div>

    <!-- JavaScript -->
    <script>
        var mapa = new ol.Map({
            layers: [new ol.layer.Tile({
                source: new ol.source.OSM()
            })],
            target: 'mapa',
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            })
        });

        mapa.addControl(new ol.control.OverviewMap());

        // carga de datos
        var urlTerremotos = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_month.geojson';
        var capaTerremotos = new ol.layer.Vector({
            source: new ol.source.Vector({
                url: urlTerremotos,
                format: new ol.format.GeoJSON()
            })
        });
        mapa.addLayer(capaTerremotos);

        // interacción capa vectorial
        var seleccion = new ol.interaction.Select();
        mapa.addInteraction(seleccion);
        seleccion.on('select', function (e) {
            // ol.interaction.SelectEvent
            var div = document.getElementById('seleccion');
            var seleccionados = e.target.getFeatures();
            var html = '';
            seleccionados.forEach(function (t) {
                html += '<div class="ficha"><ul>';
                html += '<li><strong>Lugar</strong>: ' + t.get('place') + '</li>';
                html += '<li><strong>Magnitud</strong>: ' + t.get('mag') + '</li>';
                html += '<li><strong>Fecha</strong>: ' + new Date(t.get('time')).toLocaleDateString() + '</li>';
                html += '</ul></div>';
            });
            div.innerHTML = html;
        });
    </script>

</body>

</html>

## muestra.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              muestra.geojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title>Ejemplo sencillo con OL3</title>
	<link href="http://fonts.googleapis.com/css?family=Open+Sans\|Dosis:400,800" rel="stylesheet" type="text/css" />

	<!-- Versión específica vs. master \| min vs. debug -->
	<link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css">
	<script src="http://openlayers.org/en/v3.12.1/build/ol-debug.js"></script>

	<style>
	/* General */

	h1 {
	font-family: 'Dosis', sans-serif;
	font-weight: 400;
	font-size: 40px;
	line-height: 46px;
	margin-bottom: 10px;
	color: #E50275;
	}

	body {
	font-family: 'Open Sans', sans-serif;
	background-color: #F7FBFF;
	}

	.ficha {
	color: #03A1C4;
	}
	</style>
	</head>

	<body>
	<h1>Mapa de terremotos significativos el último mes (USGS)</h1>

	<div id="mapa" style="height: 400px; border: 2px gray solid;"></div>
	<div id="seleccion" style="margin-top:10px"></div>

	<!-- JavaScript -->
	<script>
	var mapa = new ol.Map({
	layers: [new ol.layer.Tile({
	source: new ol.source.OSM()
	})],
	target: 'mapa',
	view: new ol.View({
	center: [0, 0],
	zoom: 2
	})
	});

	mapa.addControl(new ol.control.OverviewMap());

	// carga de datos
	var urlTerremotos = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_month.geojson';
	var capaTerremotos = new ol.layer.Vector({
	source: new ol.source.Vector({
	url: urlTerremotos,
	format: new ol.format.GeoJSON()
	})
	});
	mapa.addLayer(capaTerremotos);

	// interacción capa vectorial
	var seleccion = new ol.interaction.Select();
	mapa.addInteraction(seleccion);
	seleccion.on('select', function (e) {
	// ol.interaction.SelectEvent
	var div = document.getElementById('seleccion');
	var seleccionados = e.target.getFeatures();
	var html = '';
	seleccionados.forEach(function (t) {
	html += '<div class="ficha"><ul>';
	html += '<li><strong>Lugar</strong>: ' + t.get('place') + '</li>';
	html += '<li><strong>Magnitud</strong>: ' + t.get('mag') + '</li>';
	html += '<li><strong>Fecha</strong>: ' + new Date(t.get('time')).toLocaleDateString() + '</li>';
	html += '</ul></div>';
	});
	div.innerHTML = html;
	});
	</script>

	</body>

	</html>