JSFiddle - React, Tailwind, and code Playground

by michelejs

HTML

<script src="http://openlayers.org/en/v3.1.1/build/ol.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3&amp;amp;sensor=false"></script>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
div class="container-fluid">
      <div class="row-fluid">
        <div class="span12">
          
          <div id="coords" style="border: 1px solid black">Get viewport coords</div>
          Top-right longitude: <span id="tr-lon"></span> <br>
          Top-right latitude:  <span id="tr-lat"></span> <br>
          
          Down-left longitude:<span id="dl-lon"></span> <br>
          Down-left latitude:<span id="dl-lat"></span> <br>          
        </div>
      </div>

      <div class="row-fluid">
        <div class="span12">
          <div id="map" class="map">            
          </div>        
        </div>
      </div>
    </div>
    

     
    </script>

CSS

body {
    width: 960px;
    height: 500px;
    position: relative;
  }
  #map {
    width: 100%;
    height: 100%;
  }
  div.fill {
    width: 100%;
    height: 100%;
  }

JavaScript

$(document).ready(function(){
    object = new QuestMapWrapper();    
    object.openMap();
    object.getViewportCords();      
});

function QuestMapWrapper()
{
  //private var
  var map;
  var view;
  
  //public var
  this.wrapperName="QuestMapWrapper";
   
  //methods
  this.openMap = function() {
    
    //$('#ol-viewport').show();
    //$('#gmap').hide();

    
    //set layers of one
    var layers = [
    new ol.layer.Tile({
      style: 'Road',
      source: new ol.source.MapQuest({layer: 'osm'})
    })]
    
    view = new ol.View({
    //center: ol.proj.transform([20, 52.702222], 'EPSG:4326', 'EPSG:3857'),
    center: ol.proj.transform([0., 0.0], 'EPSG:4326', 'EPSG:3857'),
    //center: [-73.979378, 40.702222],
    zoom: 1
    });
    
    map = new ol.Map({
      layers: layers,
      //renderer: exampleNS.getRendererFromQueryString(),
      target: 'map',
      view: view
    });
             
  }; 
  
  /** Set viewport details  */
  this.getViewportCords = function() {
    
    //var extent = view.calculateExtent( map.getSize() );   
    var extent = map.getView().calculateExtent(map.getSize());
    
    //var extent = map.getExtent().transform(map.projection, map.displayProjection)
    
    var factor = 1; // coordinates must be devided by 100000 to get real coord
    
    $('#tr-lon').text(extent[2] / factor);
    $('#tr-lat').text(extent[3] / factor);    
    $('#dl-lon').text(extent[0] / factor);
    $('#dl-lat').text(extent[1] / factor);    
  } 
}