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

I need to place html elements for drawing in it some text and graphic by Raphaeljs.

Is it possible?

I'am trying to create an empty marker for each visible feature and then erase icon container and place into it raphael canvas:

var markers = new OpenLayers.Layer.Markers('Markers');

var size = new OpenLayers.Size(1, 1);
var offset = new OpenLayers.Pixel(0, 0);
var icon = new OpenLayers.Icon('/i/b.gif', size, offset);

var marker_items = {}, current_items = {}, centroid, x, y, key, marker, $marker;'moveend', layer4, function(e){
    current_items = {};
    for (var i=0, n=layer4.features.length; i<n; i++) {
        centroid = layer4.features[i].geometry.getCentroid(); 
        x = centroid.x, y = centroid.y;
        key = 'll-'+x+'-'+y;
        current_items[key] = true;
        if (marker_items[key])

        // create new marker and store it in hash by key
        marker_items[key] = new OpenLayers.Marker(new OpenLayers.LonLat(x, y), icon.clone());

        // erase icon container, add canvas, and draw raphael graphics
        $marker = $(marker_items[key].icon.imageDiv).empty();
        $canvas = $('<div class="chart-canvas"></div>').appendTo($marker);
        Raphael($canvas.get(0), 70, 70).piechart(35, 35, 35, [55, 20, 13, 32, 5, 1, 2, 10]);

    // remove markers that not visible
    for (i in marker_items) {
        if (!current_items[i]) {
            delete marker_items[i];

I have successfully draw graphics, but maybe there is more simple way?

share|improve this question
Can you provide more context on what you're trying to achieve and what have you done so far to get to that goal? – dassouki Dec 19 '11 at 18:54

you can achieve this with adding a div in your body tags.

    <div id="graphic"></div>

than you can change it with this way:

OpenLayers.Util.getElement("graphic").innerHTML = yourGraphicElement

i hope it helps you....

share|improve this answer

Your Answer


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.