[OpenLayers-Users] Adding new Points of Interest before the map div

[Andreas Hocevar]

You can create the vector layer before the DOM is available. So I'd
recommend creating the vector layer in a separate script block, which
you can include in your html before the map div.

There you would do

    var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
    var feature = new OpenLayers.Feature.Vector();
    vectorLayer.addFeatures(feature);

And in your other script block below the map div, you would create the
map and add the vector layer:

    var map = new OpenLayers.Map(...);
    map.addLayers([new OpenLayers.Layer.OSM(), vectorLayer]);
    map.setCenter(...);

Andreas.

On Sat, Sep 8, 2012 at 3:00 PM, Marco Baumgärtner
<kalleernst at googlemail.com> wrote:
> Hello.
>
> I am using openlayers with osm.
>
> I want to add new POIs to my map by using.
>
>                   var feature = new OpenLayers.Feature.Vector(
>                   new
> OpenLayers.Geometry.Point(1.234,1.234).transform(epsg4326, projectTo),
>                   {description:'desc'} ,
>                   {externalGraphic: 'image.png', graphicHeight: 10,
> graphicWidth: 10, graphicXOffset:-5, graphicYOffset:-5 }
>                   );
>                   vectorLayer.addFeatures(feature);
>
>
> Problem is, I want to do this in code before the map is being initialized
> (in my code by)
>
> <div style="width:100%; height:100%;" id="mapdiv">
> </div>
> <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
> <script>
>   OpenLayers.Lang.setCode('de');
>   //map = new OpenLayers.Map("mapdiv", { controls: [] });
>   map = new OpenLayers.Map("mapdiv", {controls: [new
> OpenLayers.Control.Attribution()]});
>
>   map.addLayer(new OpenLayers.Layer.OSM());
>   projectTo = map.getProjectionObject();
>   epsg4326 = new OpenLayers.Projection("EPSG:4326")
>   var lonLat = new OpenLayers.LonLat( 6.959911 , 50.940664
> ).transform(epsg4326, projectTo);
>   var zoom = 14 ;
>   map.setCenter(lonLat, zoom);
>   var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
>   var feature = new OpenLayers.Feature.Vector(
>   new OpenLayers.Geometry.Point( 6.959911 , 50.940664 ).transform(epsg4326,
> projectTo),
>   {
>       description: 'Standort'
>   },
>   {
>       externalGraphic: 'schild.png',
>       graphicHeight: 74 , graphicWidth: 53 , graphicXOffset: -26.5 ,
> graphicYOffset: -74
>   });
>
>   vectorLayer.addFeatures(feature);
>   map.addLayer(vectorLayer);
>   //Add a selector control to the vectorLayer with popup functions
>
>   var controls = {
>       selector: new OpenLayers.Control.SelectFeature(vectorLayer,
>       {
>           onSelect: createPopup,
>           onUnselect: destroyPopup
>       })
>   };
>
>   function createPopup(feature)
>   {
>       feature.popup = new OpenLayers.Popup.FramedCloud("pop",
>       feature.geometry.getBounds().getCenterLonLat(),
>       null, '<div class="markerContent">' + feature.attributes.description +
> '</div>',
>       null,
>       true,
>
>       function ()
>       {
>           controls['selector'].unselectAll();
>       });
>       //feature.popup.closeOnMove = true;
>       map.addPopup(feature.popup);
>   }
>
>   function destroyPopup(feature)
>   {
>       feature.popup.destroy();
>       feature.popup = null;
>   }
>   map.addControl(controls['selector']);
>   controls['selector'].activate();
>      controls = map.getControlsByClass('OpenLayers.Control.Navigation');
>
>    for(var I = 0; i < controls.length; ++i)
>         controls.disableZoomWheel();
>   </script>
>
>
> If I put the javascript on top of the page and let the map div come after,
> it does not show.
>
> So basically I want to add new points somewhere in code before the map div.
> How do I need to structure the javascript-parts to do that?
>
> Best and thanks for your efforts.
>
> _______________________________________________
> Users mailing list
> Users at lists.osgeo.org
> http://lists.osgeo.org/mailman/listinfo/openlayers-users
>



-- 
Andreas Hocevar
OpenGeo - http://opengeo.org/
Expert service straight from the developers.