I am 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).

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


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)?

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.


1 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.