1

I am doing a walkthrough using OpenLayers through a UPENN course where the students are instructed to point to a school sponsored url that hosts a repository for their work. Their respective repositories have tiled images for them to use as a basemap. Since I'm not a UPENN student I'm trying to get the service to point to localhost through a GeoServer portal:

http://localhost:8080/geoserver/gwc/demo/geog585:geotools_coverage?gridSet=EPSG:900913&format=image/png enter image description here

However, when I open the html page in my browser I get a a pinkish background with broken image icons:enter image description here

Here is the complete code for the html page:

<!DOCTYPE html>
<html>
  <head>
    <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="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.XYZ(
           "PhillyBasemap",
           [
            "http://localhost:8080/geoserver/gwc/demo/geog585:geotools_coverage?gridSet=EPSG:900913&format=image/png"
           ],
           {
            attribution: "Data copyright OpenStreetMap contributors",
            sphericalMercator: true,
            wrapDateLine: true,
            numZoomLevels: 18
           }
         );
        map.addLayer(tiles);
        // Add the WMS      
        var layer = new OpenLayers.Layer.WMS(
          "WMS", "http://localhost:8080/geoserver/geog585/wms",
          {
            LAYERS: 'geog585:FarmersMarkets',transparent: true
          },
          {
            singleTile:true,
            isBaseLayer: false
          }
        );
        map.addLayer(layer);
        // Center the map
        map.setCenter(new OpenLayers.LonLat(-75.145, 40).transform(fromProjection,toProjection), 11);
        // Configure the query on click
            var info = new OpenLayers.Control.WMSGetFeatureInfo({
              url: 'http://localhost:8080/geoserver/geog585/wms',
              title: 'Identify features by clicking',
              queryVisible: true,
              infoFormat: "application/json",  
              eventListeners: {
                getfeatureinfo: function(event) {
                  // Read and parse the query response, if there is one
                  var response = JSON.parse(event.text);
                  if(response.features.length !== 0){
                    var returnedFeature = response.features[0];
                    // Configure the popup
                    map.addPopup(new OpenLayers.Popup.FramedCloud(
                      "marketInfo",
                      map.getLonLatFromPixel(event.xy),
                      null,
                      "<b>" + returnedFeature.properties.NAME + "</b><br />" + returnedFeature.properties.ADDRESS,
                      null,
                      true
                    ));
                  }
                }
              }
            });

            map.addControl(info);
            info.activate();
        }
    </script>
</head>
<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>
     </div>
   </body>
</html>

Can someone tell me what I'm missing in the tiles variable?

Improve this question
1
  • 1
    the trick is to open one of the "pink" tiles and read the error message inside it.
    – Ian Turton
    Commented Jun 22, 2017 at 7:53

1 Answer 1

Reset to default
1

Not sure if this is the best solution but I redirected the path to the output location of the tiles generated by Tile Mill in which the tiles are ordered in the z/x/y hierarchy:

var tiles = new OpenLayers.Layer.XYZ(
       "PhillyBasemap",
       [
        "C:/Data/Philadelphia/PhillyBasemap/${z}/${x}/${y}.png"
       ],

The base map shows up now.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.