Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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');
map.addLayer(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])
            continue;

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

        // 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]) {
            markers.removeMarker(marker_items[i]);
            delete marker_items[i];
        }
    }
});

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

share|improve this question
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
add comment

1 Answer

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

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

than you can change it with this way:

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

i hope it helps you....

share|improve this answer
add comment

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.