En el último vídeo del cruso gratuito de Introducción a Javascript que hemos venido publicando, Víctor hace un ejemplo de cómo crear un sencillo visor de OpenLayers que muestre datos de una fuente externa como es un GeoJSON ubicado en un servidor Web.
En este post os vamos a describir los tres pasos fundamentales de este proceso y además os dejamos la parte del vídeo en la que Víctor lo detalla
Estás dos líneas son en las que se cargan las librerías de OpenLayers que permiten crear el mapa
|
1 2 |
<link rel="stylesheet" href="http://openlayers.org/en/v3.11.2/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/v3.11.2/build/ol-debug.js"></script> |
Carga del mapa con la base de OpenStreetMap
|
1 2 3 4 5 |
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}) }); |
Añade los controles del mapa
|
1 2 3 |
// controles mapa.addControl(new ol.control.FullScreen()); mapa.addControl(new ol.control.OverviewMap()); |
Busca el GeoJSON y lo añade al mapa
|
1 2 3 4 5 6 7 8 9 |
// 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); |
Incluye la activación de la interactividad y crea un pequeño popup en HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 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 += 'LUGAR: ' + t.get('place') + ' | MAGNITUD: <strong>' + t.get('mag') + '</strong>'; html += '<hr/>'; }); div.innerHTML = html; }); |
Aquí tenéis el vídeo completo y el enlace en el que Víctor ha colgado su código : https://gist.github.com/VictorVelarde/5021e3679dad1305d570
Leave A Comment