En esta entrada vamos a ver un ejemplo de cómo cargar las capas bases de Stamen en un visor web que hemos creado utilizando los recursos que nos ofrece OpenLayers.
Stamen es una comunidad para la visualización de datos cartográficos. Disponen de tres capas bases mundiales para representar con OpenStreetMap: Toner (mapa en blanco y negro de alto contraste), Terrain (mapa del terreno) y Watercolor (aplica un efecto de diseño cartográfico manual). Para más información sobre Stamen visitar su web.
Lo primero de todo es crear un documento HTML con nuestro visor y el diseño de la página. Este es un ejemplo de un documento con un visor sencillo en blanco, centrado en la Península Ibérica.
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" tipe="text/css">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fopenlayers.org%2Fen%2Fv4.6.5%2Fbuild%2Fol.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%20%0A%20%20%20%20%20%20%20%20%23mapa%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%7D%20%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
<title>Mapa base Stamen</title>
</head>
<body>
<div id="mapa"></div>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20%20%20%20%20var%20vista%20%3D%20new%20ol.View(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20center%3A%20%5B-400000%2C%204700000%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20zoom%3A%206%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20var%20mapa%20%3D%20new%20ol.Map(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20target%3A%20%22mapa%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20layers%3A%20%5B%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20view%3A%20vista%0A%20%20%20%20%20%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>
Lo siguiente es crear las variables de las fuentes y de las capas que posteriormente vamos a introducir en el mapa. Las clases a utilizar son ol.source.Stamen para las fuentes y ol.layer.Tile para representar las capa en “tiles”. Dentro del parámetro “layer” especificamos la capa base que queremos utilizar. En este ejemplo vamos a crear tres variables, una para la capa base ‘terrain’, otra para la capa ‘watercolor’ y otra para la capa ‘toner’.
var fuenteStamenTerr = new ol.source.Stamen({
layer: 'terrain'
})
var fuenteStamenToner = new ol.source.Stamen({
layer: 'toner'
})
var fuenteStamenWater = new ol.source.Stamen({
layer: 'watercolor'
})
var Terrain = new ol.layer.Tile({
source: fuenteStamenTerr
});
var Toner = new ol.layer.Tile({
source: fuenteStamenToner
});
var Watercolor = new ol.layer.Tile({
source: fuenteStamenWater
});
Para facilitar el cambio de visualización entre estas tres capas vamos a crear un recuadro dentro de nuestro visor para elegir la capa que se quiere visualizar. Para ello, vamos a introducir en nuestro diseño la clase ‘control-capas’.
#control-capas {
position: absolute;
bottom: 50px;
left: 30px;
background-color: rgba(255, 255, 255, 0.699);
border: 1px solid;
padding: 10px
}
Añadimos un nuevo contenedor <div>, debajo del <div> del mapa, en el que introduciremos los elementos que nos permitirán cambiar de capa. Añadimos el atributo checked para definir cuál se va a visualizar de manera predeterminada.
<div id="control-capas">
<input type="radio" id="capa-Terrain" name="input-capas" checked>
<span>Terrain</span>
<br>
<input type="radio" id="capa-Toner" name="input-capas" >
<span>Toner</span>
<br>
<input type="radio" id="capa-Watercolor" name="input-capas">
<span>Watercolor</span>
</div>
En nuestro script, debajo de nuestra variable del mapa creamos tres variables nuevas a las que les añadiremos un “listener” para darle funcionalidad al recuadro de opciones que hemos creado. Cada variable es simplemente para definir que cuando se haga click sobre su opción, esta se visualiza y las demás no. Esto se puede definir fácilmente con la función setVisible().
var inputTerrain = document.getElementById("capa-Terrain");
inputTerrain.addEventListener("click", function () {
Terrain.setVisible(true)
Toner.setVisible(false)
Watercolor.setVisible(false)
});
var inputToner = document.getElementById("capa-Toner");
inputToner.addEventListener("click", function () {
Terrain.setVisible(false)
Toner.setVisible(true)
Watercolor.setVisible(false)
});
var inputWatercolor = document.getElementById("capa-Watercolor");
inputWatercolor.addEventListener("click", function () {
Terrain.setVisible(false)
Toner.setVisible(false)
Watercolor.setVisible(true)
});
El último paso es añadir al array layers de nuestra variable mapa las tres capas para visualizarlas.
var mapa = new ol.Map({
target: "mapa",
layers: [Toner, Watercolor, Terrain],
view: vista
});
El resultado es nuestro visor plenamente funcional que nos permite visualizar la capa base de Stamen seleccionada.
El código completo es el siguiente.
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fopenlayers.org%2Fen%2Fv4.6.5%2Fbuild%2Fol.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%23mapa%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%7D%0A%20%20%20%20%23control-capas%20%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20bottom%3A%2050px%3B%0A%20%20%20%20left%3A%2030px%3B%0A%20%20%20%20background-color%3A%20rgba(255%2C%20255%2C%20255%2C%200.699)%3B%0A%20%20%20%20border%3A%201px%20solid%3B%0A%20%20%20%20padding%3A%2010px%0A%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
<title>Mapa base Stamen</title>
</head>
<body>
<div id="mapa"></div>
<div id="control-capas">
<input type="radio" id="capa-Terrain" name="input-capas" checked>
<span>Terrain</span>
<br>
<input type="radio" id="capa-Toner" name="input-capas" >
<span>Toner</span>
<br>
<input type="radio" id="capa-Watercolor" name="input-capas">
<span>Watercolor</span>
</div>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20%20%20%20%20var%20vista%20%3D%20new%20ol.View(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20center%3A%20%5B-400000%2C%204700000%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20zoom%3A%206%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%0A%20%20%20%20%20%20%20%20var%20fuenteStamenTerr%20%3D%20new%20ol.source.Stamen(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20layer%3A%20'terrain'%0A%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%20%20%20%20var%20fuenteStamenToner%20%3D%20new%20ol.source.Stamen(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20layer%3A%20'toner'%0A%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%20%20%20%20var%20fuenteStamenWater%20%3D%20new%20ol.source.Stamen(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20layer%3A%20'watercolor'%0A%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%20%20%20%20var%20Terrain%20%3D%20new%20ol.layer.Tile(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20source%3A%20fuenteStamenTerr%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20var%20Toner%20%3D%20new%20ol.layer.Tile(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20source%3A%20fuenteStamenToner%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20var%20Watercolor%20%3D%20new%20ol.layer.Tile(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20source%3A%20fuenteStamenWater%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%0A%20%20%20%20%20%20%20%20var%20mapa%20%3D%20new%20ol.Map(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20target%3A%20%22mapa%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20layers%3A%20%5BToner%2C%20Watercolor%2C%20Terrain%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20view%3A%20vista%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%0A%20%20%20%20%20%20%20%20var%20inputTerrain%20%3D%20document.getElementById(%22capa-Terrain%22)%3B%0A%20%20%20%20%20%20%20%20inputTerrain.addEventListener(%22click%22%2C%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20Terrain.setVisible(true)%0A%20%20%20%20%20%20%20%20%20%20%20%20Toner.setVisible(false)%0A%20%20%20%20%20%20%20%20%20%20%20%20Watercolor.setVisible(false)%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20var%20inputToner%20%3D%20document.getElementById(%22capa-Toner%22)%3B%0A%20%20%20%20%20%20%20%20inputToner.addEventListener(%22click%22%2C%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20Terrain.setVisible(false)%0A%20%20%20%20%20%20%20%20%20%20%20%20Toner.setVisible(true)%0A%20%20%20%20%20%20%20%20%20%20%20%20Watercolor.setVisible(false)%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20var%20inputWatercolor%20%3D%20document.getElementById(%22capa-Watercolor%22)%3B%0A%20%20%20%20%20%20%20%20inputWatercolor.addEventListener(%22click%22%2C%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20Terrain.setVisible(false)%0A%20%20%20%20%20%20%20%20%20%20%20%20Toner.setVisible(false)%0A%20%20%20%20%20%20%20%20%20%20%20%20Watercolor.setVisible(true)%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>
(4 votos, promedio: 5,00 de 5)
Cargando...
Formación de calidad impartida por profesionales
Deja tu comentario