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

      
  Raw
  

              muestra.geojson
            
          
  Loading
  

      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>