3

I am creating my first map using OpenLayers and I am having trouble. The map was created with QGIS Desktop 2.6, and I am using Ubuntu 12.04. The WMS service is QGIS Service. This is my first try doing anything with javascript, so there's a lot about the code that I don't fully understand.

I first got the map into QGIS Server, and both GetCapabilities and GetMap are working the way they are supposed to. I was able to create this sample map without problems. I have the openlayers map I want to create saved as /usr/lib/cgi-bin/Indiana2/Indiana2.qgs and the projection is 4326. I used the code from here, and just changed the specifics to match my map. Here is the code I am using.

<html>
<head>
  <title>Indiana Map</title>
    <script src="http://localhost/openlayers/OpenLayers.js"></script>
    </head>
    <body>
      <div style="width:100%; height:100%" id="map"></div>
      <script defer="defer" type="text/javascript">
        var map = new OpenLayers.Map('map');
        var wms = new OpenLayers.Layer.WMS(
          "WMS",
          "http://localhost/cgi-bin/qgis_mapserv.fcgi",
          {
          'map': '/usr/lib/cgi-bin/Indiana2/Indiana2.qgs',
          'layers':'tl_2013_18_tract'} );
        map.addLayer(wms);
        map.zoomToMaxExtent();
      </script>

</body>
</html>

QGIS server seems to working fine. I can pull the map using GetMap and all of the layers are visible. I can't think of what the problem is, but like I said, my javascript knowledge is neglible. Thanks a lot for any help!

EDIT: Forgot to mention that I am not getting any error message when I try to open Indiana2 in firefox. I just get a blank screen.

EDIT: Not sure if this is relevant, but I am able to connect to QGIS Server using QGIS Desktop.

2

You don't say how you are opening your JS script in FireFox. I believe this layer type is using Ajax calls. You cannot open the file with file://myfirstmap.html. You have to use a web server to view the map. The problem that you will face with OpenLayers is that some formats like the text/tab/csv format does not use Ajax calls. So you start with these simple examples that work with file://myfirstmap.html only to find that the vector based formats fail. If you can install the brackets.io editor on your computer then you can avoid most of these problems. The reason why an editor like brackets.io will solve your problem is that the editor includes a node.js web server. After editing the file you click on the lighting bolt to launch the html/js page in the web server. Another method is to put your html file in /var/www/html or the directory that your Linux distribution uses for Apache files. Then use Apache to serve the file to firefox via http://myserver/myfirstmap.html

I had to have all my hair replaced after not knowing this bit of JavaScript trivia. Months of head banging and hair pulling damaged the hairdo!

I adapted the OSM simple example code. The idea is to isolate each piece to make sure things are working. One issue that you can be facing is that Openlayers 3 is out. Many of the examples on the net are based on the 2.x series. The series 2.x sample code and the series 2.x js library are buried to make way for the 3.x series. The big complaint about OpenLayers 2.x was that it was fat and supported a bizillion formats. The developers planned to trim down 3.x so that you had to recompile OL in order to use only the support that you really needed for your project.

The idea is that we use a very minimal script just to make sure OL is working.

I used a different link to the OL library to make sure that we are using a 2.x version of the library. The idea behind this step is that you could be using OL 3.x. 3.x may not have the support compiled in as it did in 2.x.

Save the code below in the same location where you have your OL html file. Give the code a name like test2x.html and then try it in your web browser.

<!DOCTYPE HTML>
<head>
<title>OpenLayers Simplest Example</title>
 </head>
<body>
<div id="demoMap" style="height:250px"></div>
<!-- <script src="http://localhost/openlayers/OpenLayers.js"></script> -->
<script src="http://dev.openlayers.org/OpenLayers.js">
<script>
    var map = new OpenLayers.Map("demoMap");
    map.addLayer(new OpenLayers.Layer.OSM());
    map.zoomToMaxExtent();
</script>
</body>
</html>
  • Ugh. I was already running the file form var/www. I tried using brackets.io and it says "Error Saving File" Still pulling hair out. – Ravi Mehta Nov 8 '14 at 4:34
  • Thanks a lot! I decided in the end just to move on to Openlayers 3. I've found some good tutorials for it, so hopefully I can use that without too many problems. – Ravi Mehta Nov 10 '14 at 15:38

Your Answer

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

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