Harry Wood

home > maps > examples > openlayers > OpenLayers Jump Location

OpenLayers Jump Location

javascript onClick events tell OpenLayers to setCenter at a new location
​x
 
<html>
<head>
  <title>OpenLayers Jump Location Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/lib/OpenLayers.js"></script>           
  <style type="text/css">
    #mapdiv {
        float:left;
        width:300px;
        height:200px;
        margin:5px;
    }
    #linksdiv {
        float:left;
        width:300px;
    }
    div.olControlAttribution { bottom:2px; }
  </style>
</head>
  
<body>
  <div id="linksdiv">
     Click to jump to a new location:
        <li><a href="#" onClick="javascript:jump(39.756042, -104.994013); return false;">Coors field, Denver</a></li>
        <li><a href="#" onClick="javascript:jump(39.05144, -94.48014); return false;">Kaufmann Stadium, Missouri</a></li>
        <li><a href="#" onClick="javascript:jump(34.073611, -118.24); return false;">Dodger Stadium, LA</a></li>
     
  </div>
  <div id="mapdiv"></div>
  
  <script>
    function jump(lat,lon) {
       var zoom=16;
       var lonLat = new OpenLayers.LonLat( lon, lat )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
       map.setCenter (lonLat, zoom);
    }
    
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
​
    jump( 39.756042 ,-104.994013 );
​
  </script>
</body></html>

view directly