[GIS] Click a marker icon to open a pop-up, using OpenLayers

Question

Background

Looking to create a pop-up that performs an Ajax request when the user clicks a marker on an OpenLayers map. The markers, however, have different icons.

The following is working code that can be used to accomplish the desired task:

var sites new OpenLayers.Layer.Markers( 'Sites' );
map.addLayer( sites );
addSiteMarkers( sites );

function addMarker( layer, lat, lng, img ) {
  var size   = new OpenLayers.Size( 32, 37 );
  var offset = new OpenLayers.Pixel( -(size.w/2), -size.h );
  var icon   = new OpenLayers.Icon( 'img/marker/' + img, size, offset );
  var marker = new OpenLayers.Marker( getLocation( lat, lng ), icon );

  layer.addMarker( marker );

  marker.events.register( 'click', layer, clickMarker );
}

function clickMarker() {
  alert( 'click' );

  // Pop-up code will go here...
}

function addSiteMarkers( sites ) {
  addMarker( sites, -113.3017895, 49.1939798, 'store.png' );
  addMarker( sites, -113.3072538, 49.2013626, 'building.png' );
}

The above code adds two markers (of hundreds) each having a different icon (from a set of fifty different icons). Each click will display a pop-up and each pop-up will have information that is retrieved from a database (using a jQuery ajax call).

Problem

I suspect this is a terribly inefficient way to use OpenLayers and map markers for opening pop-ups when a user clicks an icon.

Question

How do you use OpenLayers to present a variety of different markers that when clicked display a pop-up (with content dependent on the actual marker that was clicked)?

Update #1

Most of the examples show how to use a Vector layer, rather than a Marker layer, to handle click events. Using a Vector layer makes making markers more mind-boggling.

Related

• http://dev.openlayers.org/examples/marker-shadow.html
• https://stackoverflow.com/questions/7702945/adding-popup-info-in-openlayers
• https://stackoverflow.com/questions/9895951/how-to-display-multiple-markers-with-individual-framecloud-popups-in-openlayers
• https://stackoverflow.com/questions/6026420/openlayers-vector-features-instead-of-markers
• http://dev.openlayers.org/docs/files/OpenLayers/Control/SelectFeature-js.html
• http://docs.openlayers.org/library/overlays.html
• http://dev.openlayers.org/docs/files/OpenLayers/Popup-js.html
• http://dev.openlayers.org/docs/files/OpenLayers/Marker-js.html

Thank you!

Answer 1

Few pointers to get you started. You've already done some research, so you know the right places to look for more info:

1. Don't use a Markers layer. Do use a Vector layer.

2. Vector layer can be styled. Each of your points can have attributes e.g. "color:blue" or "severity:moderate" and based on those attributes you can Style the points with different icons or shapes

3. Attach the on-click handler to the LAYER not individual points. The click handler will get a parameter that is the Feature being clicked on. From there you can retrieve attributes attached to the feature.

4. Inside click-handler show a Bubble and you control what goes in the bubble HTML -> could be point ID (rather pointless) or some other meta-data that you store in the point attribute e.g. "title: point1" "title: point2"

5. Alternatively you can also do all of the above by adding a KML layer that's properly styled, and the Placemarks have appropriate and tags.

Here are some samples:

1. http://dev.openlayers.org/examples/styles-unique.html
2. http://dev.openlayers.org/examples/styles-context.html
3. http://dev.openlayers.org/examples/style-rules.html