- 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
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