Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
OpenLayers 3 - Terremotos recientes USGS
<!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>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.