title: How to display data using openlayers with OpenStreetMap in geodjango?
body: <p>I've got geodjango running using <a href="http://openlayers.org/" rel="noreferrer">openlayers</a> and <a href="http://www.openstreetmap.org/" rel="noreferrer">OpenStreetMaps</a> with the admin app.</p>
  
  <p>Now I want to write some views to display the data. Basically, I just want to add a list of points (seen in the admin) to the map.</p>
  
  <p>Geodjango appears to use a <em>special</em> <a href="http://code.djangoproject.com/browser/django/tags/releases/1.0.2/django/contrib/gis/templates/gis/admin/openlayers.js" rel="noreferrer">openlayers.js</a> file to do it's magic in the admin.  Is there a good way to interface with this?</p>
  
  <p>How can I write a view/template to display the geodjango data on a open street map window, as is seen in the admin?</p>
  
  <p>At the moment, I'm digging into the <a href="http://openlayers.org/" rel="noreferrer">openlayers.js</a> file and api looking for an 'easy' solution.  (I don't have js experience so this is taking some time.)  </p>
  
  <p>The current way I can see to do this is add the following as a template, and use django to add the code needed to display the points.  (Based on the example <a href="http://openlayers.org/dev/examples/vector-features.html" rel="noreferrer">here</a>)</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;title&gt;Draw Feature Example&lt;/title&gt;
  
          &lt;script src="http://www.openlayers.org/api/OpenLayers.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript"&gt;
              var map;
  
              function init(){
                  map = new OpenLayers.Map('map');
                  var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                          "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
                  map.addLayer(layer);
  
                  /*
                   * Layer style
                   */
                  // we want opaque external graphics and non-opaque internal graphics
                  var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
                  layer_style.fillOpacity = 0.2;
                  layer_style.graphicOpacity = 1;
  
                  /*
                   * Blue style
                   */
                  var style_blue = OpenLayers.Util.extend({}, layer_style);
                  style_blue.strokeColor = "blue";
                  style_blue.fillColor = "blue";
                  style_blue.graphicName = "star";
                  style_blue.pointRadius = 10;
                  style_blue.strokeWidth = 3;
                  style_blue.rotation = 45;
                  style_blue.strokeLinecap = "butt";
  
                  var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {style: layer_style});
  
                  // create a point feature
                  var point = new OpenLayers.Geometry.Point(-111.04, 45.68);
                  var pointFeature = new OpenLayers.Feature.Vector(point,null,style_blue);
                  // Add additional points/features here via django
  
                  map.addLayer(vectorLayer);
                  map.setCenter(new OpenLayers.LonLat(point.x, point.y), 5);
                  vectorLayer.addFeatures([pointFeature]);
              }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload="init()"&gt;
          &lt;div id="map" class="smallmap"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Is this how it's done, or is there a better way?</p>