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;

layer4.events.register('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?

  • 1
    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....

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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