CODEWITHSUNDEEP
javascriptopenlayers
Simon Arnold
Simon Arnold

Reputation: 16177

Open a popup at the loading of the map

I created a map with OpenLayers. Everything work great!
But I need to open a popup by default on the map loading, but I can't figure how.

Since I create and destroy the popup on the fly, I tried to simulate the click on the pin, but it didn't worked.

Anyone have an idea?

Code

function createMap() {
  var options = { 
     theme: null 
  }; 
  map = new OpenLayers.Map('map', options); 
  map.addLayer(new OpenLayers.Layer.OSM()); 
  epsg4326 =  new OpenLayers.Projection('EPSG:4326'); 
  projectTo = map.getProjectionObject(); 
  var lonLat = new OpenLayers.LonLat(mark.longitude, mark.latitude).transform(epsg4326, projectTo); 
  var zoom = 15; 
  map.setCenter(lonLat, zoom); 
  var vectorLayer = new OpenLayers.Layer.Vector('Overlay'); 

  for(x=0; x<stores.length; x++) {
    var feature = new OpenLayers.Feature.Vector(
      new OpenLayers.Geometry.Point(stores[x].lon, stores[x].lat).transform(epsg4326, projectTo), 
      {description: stores[x].desc}, 
      {externalGraphic: 'marker.png', graphicHeight: 40, graphicWidth: 20, graphicXOffset: -10, graphicYOffset: -20}
    ); 
    vectorLayer.addFeatures(feature); 
    map.addLayer(vectorLayer); 
  };

  var controls = { 
    selector: new OpenLayers.Control.SelectFeature(vectorLayer, { 
      onSelect: createPopup, 
      onUnselect: destroyPopup 
    }) 
  };

  map.addControl(controls['selector']); 
  controls['selector'].activate();
};

function createPopup(feature) {
  feature.popup = new OpenLayers.Popup(
    'pop',
    feature.geometry.getBounds().getCenterLonLat(),
    null,
    '<div>' + feature.attributes.description + '</div>',
    null,
    false,
    function() {
      controls['selector'].unselectAll();
    }
  );
  map.addPopup(feature.popup);
}

function destroyPopup(feature) {
  feature.popup.destroy();
  feature.popup = null;
}

Stores is the value returned by an ajax call containing a list of stores with latitude, longitude, address, phone, etc.

Upvotes: 0

Views: 911

Answers (1)

John Powell
John Powell

Reputation: 12571

You you need to select from your OpenLayers.Layer.Vector (layerVector, in your case) the feature that is closest to the centre of the map and then create a popup and add the popup to that feature, eg, 

//select feature closest to center of map, ie, 
//find features[i] of Layer.Vector's features array.
var feature=layerVector.features[i];
addPopup(feature);

function addPopup(feature){

    var popup = new OpenLayers.Popup.FramedCloud(
       'pop',
        feature.geometry.getBounds().getCenterLonLat(),
        null,
        '<div>' + feature.attributes.description + '</div>',
        null,
        true, //add a close box
        null
    );

   feature.popup = popup;
   map.addPopup(popup);
}

This is one possibility anyway, if I have understood the question correctly. There is a good example http://openlayers.org/dev/examples/light-basic.html that shows how to add mouse over event listener popups, and this uses the same logic, but with a feature already selected to add the popup too.

Upvotes: 1

Related Questions