MAP

No Thumbnail Available
Date
2020-10-12
Authors
SR
Journal Title
Journal ISSN
Volume Title
Publisher
Ase
Abstract
Map
Description
<html> <head> <title>test2</title> <meta charset="utf-8"/> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.16.0/ol.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.16.0/ol.css" type="text/css"> <style> html, body, #map {width:100%; height:100%; margin:0; padding:0;} #slider{ position: absolute; top: 10px; right: 10px; } </style> </head> <body> <div id="map" class="map"></div> <input id="slider" type="range" min="0" max="1" step="0.1" value="1" oninput="overlay.setOpacity(this.value)"> <script> var extent = ol.proj.transformExtent([21.98992009,49.44986248,22.38926147,49.71846553], 'EPSG:4326', 'EPSG:3857'); var center = ol.proj.transform([22.18959078, 49.58416401], 'EPSG:4326', 'EPSG:3857'); var view = new ol.View({ projection: 'EPSG:3857', center: center, zoom: 9 }); var overlay = new ol.layer.Tile({ source: new ol.source.XYZ({ urls:[ '{z}/{x}/{y}.png' ], extent: extent, minZoom: 9, maxZoom: 11, tilePixelRatio: 1.000000 }) }); var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), overlay ], renderer: 'canvas', target: 'map', view: view }); view.fit(extent, map.getSize()); </script> </body> </html>
Keywords
Citation
ASD
Collections