I am modifying the codes from http://dev.openlayers.org/examples/getfeatureinfo-popup.html and https://www.e-education.psu.edu/geog585/node/783 integrating osm tiles as base map. The modified code works except for the section on map centering.

the code:

<!DOCTYPE html>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <title>Farmers markets in Philadelphia</title>
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/theme/default/style.css" type="text/css">
        <link rel="stylesheet" href="philly_style.css" type="text/css">
        <script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.js"></script>
        <script type="text/javascript">
          var fromProjection = new OpenLayers.Projection("EPSG:4326"); // WGS 1984
          var toProjection = new OpenLayers.Projection("EPSG:900913"); // Spherical Mercator Projection
          var map;
          function init() {
            map = new OpenLayers.Map("map", {projection:toProjection});

            // Add the tiled layer
        var tiles = new OpenLayers.Layer.OSM('MapQuest Open',                                                   
                attribution: "Data copyright OpenStreetMap contributors",
                sphericalMercator: true,
                wrapDateLine: true,
                numZoomLevels: 18


            // Add the WMS        

    var political = new OpenLayers.Layer.WMS("State Boundaries",
            {'layers': 'topp:tasmania_state_boundaries', transparent: true, format: 'image/gif'},
            {isBaseLayer: true}

        var roads = new OpenLayers.Layer.WMS("Roads",
            {'layers': 'topp:tasmania_roads', transparent: true, format: 'image/gif'},
            {isBaseLayer: false}

        var cities = new OpenLayers.Layer.WMS("Cities",
            {'layers': 'topp:tasmania_cities', transparent: true, format: 'image/gif'},
            {isBaseLayer: false}

        var water = new OpenLayers.Layer.WMS("Bodies of Water",
            {'layers': 'topp:tasmania_water_bodies', transparent: true, format: 'image/gif'},
            {isBaseLayer: false}

        var highlight = new OpenLayers.Layer.Vector("Highlighted Features", {
            displayInLayerSwitcher: false, 
            isBaseLayer: false 

        map.addLayers([political, roads, cities, water, highlight]); 

            // Center the map
            map.setCenter(new OpenLayers.LonLat(145.9707, -41.4545).transform(fromProjection,toProjection), 7);

        info = new OpenLayers.Control.WMSGetFeatureInfo({
            url: 'http://localhost:8080/wms', 
            title: 'Identify features by clicking',
            queryVisible: true,
            eventListeners: {
                getfeatureinfo: function(event) {
                    map.addPopup(new OpenLayers.Popup.FramedCloud(

        map.addControl(new OpenLayers.Control.LayerSwitcher());

      <body onload="init()">
        <h1 id="title">Farmers markets in Philadelphia</h1>

        <div id="map" class="smallmap"></div>

        <div id="docs">
            <p>This page shows farmers markets in Philadelphia, Pennsylvania. Click a market to get more information.</p>
  • centering the map is pointless if you zoomToMaxExtent() in the end... – ThingumaBob Jun 8 '18 at 15:29
  • Hi! Good point! However, I removing the max extent resulted in an empty map :) ... any other ideas. Thanks – rcac Jun 9 '18 at 0:35
  • Hi! tried again and it now works thanks for the help – rcac Jun 9 '18 at 2:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.