Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

Thank you!

share|improve this question
up vote 7 down vote accepted

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
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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