Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html><head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol3-layerswitcher@1.1.2/src/ol3-layerswitcher.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ol3-layerswitcher@1.1.2/src/ol3-layerswitcher.js"></script>
<style>
#map {position:absolute; top:20px; left:20px; width:95%; height:95%}
</style></head>
<body><div id="map"></div>
​
<script type="text/javascript">
(function () {
    var projExtent = ol.proj.get('EPSG:3857').getExtent();
    var startResolution = ol.extent.getWidth(projExtent) / 256;
    var resolutions = new Array(21);
    for (var i = 0, ii = resolutions.length; i < ii; ++i) {
       resolutions[i] = startResolution / Math.pow(2, i);
    }
    var tileGrid = new ol.tilegrid.TileGrid({extent: projExtent, resolutions: resolutions});
    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                title: 'Argenmap Topográfico',
                source:  new ol.source.TileImage({
                    crossOrigin: null, extent: projExtent,
                    tileGrid: tileGrid,
                    url: 'https://wms.ign.gob.ar/geoserver/gwc/service/tms/1.0.0/mapabase_topo@EPSG%3A3857@png/{z}/{x}/{-y}.png'
                })
            })
    ],
    view: new ol.View({
        center: [-5914936.00, -7877394.49],
        zoom: 3 })
    });
    map.addControl(new ol.control.LayerSwitcher({}));
})();
</script></body></html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Zalitoarpro
0viewers