Embedding an OpenLayers slippy map into Sphinx reStructuredText page

Question

I want to embed a slippy map into my sphinx page.

I'm trying this simple example: https://wiki.openstreetmap.org/wiki/OpenLayers_Marker_Example

So my rst document is:

.. raw:: html

   <body>
      <div id="mapdiv"></div>
      <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
      <script>
         map = new OpenLayers.Map("mapdiv");
         map.addLayer(new OpenLayers.Layer.OSM());

         var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 )
               .transform(
                  new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                  map.getProjectionObject() // to Spherical Mercator Projection
               );
               
         var zoom=16;

         var markers = new OpenLayers.Layer.Markers( "Markers" );
         map.addLayer(markers);
         
         markers.addMarker(new OpenLayers.Marker(lonLat));
         
         map.setCenter (lonLat, zoom);
      </script>
   </body>

But nothing appears on the page.

I have tried and failed trying to use other javascript mapping api's such as leaflet but with no luck. I'm new to using sphinx/reStructuredText so maybe there's something obivous I am missing?

"But nothing appears on the page" Can you show how the generated html looks? — vyi, Dec 07 '20 at 13:26
Developer tools on browser often helps (e.g. wrong javascript code (usually because wrong address), or where the problem is (often wrong base URL) -- we need more information to help — Giacomo Catenazzi, Dec 07 '20 at 13:28

score 0 · Accepted Answer · answered Dec 07 '20 at 13:36

<body> already exists on your page, so you need to remove it from your rst.

You also need to specify height and width for the mapdiv element, for instance, something like this:

.. raw:: html

     <div id="mapdiv" style="height: 200px; width: 100%"></div>
     <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
     <script>
     map = new OpenLayers.Map("mapdiv");
     map.addLayer(new OpenLayers.Layer.OSM());

     var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 )
       .transform(
         new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
         map.getProjectionObject() // to Spherical Mercator Projection
       );

     var zoom=16;

     var markers = new OpenLayers.Layer.Markers( "Markers" );
     map.addLayer(markers);

     markers.addMarker(new OpenLayers.Marker(lonLat));

     map.setCenter (lonLat, zoom);
     </script>

score 0 · Answer 2 · answered Dec 07 '20 at 15:01

@anatoly answer is correct but there was also another step.

I also had a Blocked loading mixed active content error found when checking the developer tools (thanks @giacomo for pointing me towards this), leading to this answer thread: Why am I suddenly getting a "Blocked loading mixed active content" issue in Firefox? which tells me that the cause is http protocol not being secure. The protocol can be removed altogether.

So the final code is:

.. raw:: html

     <div id="mapdiv" style="height: 200px; width: 100%"></div>
     <script src="//openlayers.org/api/OpenLayers.js"></script>
     <script>
     map = new OpenLayers.Map("mapdiv");
     map.addLayer(new OpenLayers.Layer.OSM());

     var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 )
       .transform(
         new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
         map.getProjectionObject() // to Spherical Mercator Projection
       );

     var zoom=16;

     var markers = new OpenLayers.Layer.Markers( "Markers" );
     map.addLayer(markers);

     markers.addMarker(new OpenLayers.Marker(lonLat));

     map.setCenter (lonLat, zoom);
     </script>

Embedding an OpenLayers slippy map into Sphinx reStructuredText page

2 Answers2