Map legend

[Roberto Maurizzi]

Hello,

I'm trying to add a map legend to a map that's generated from an ESRI server and local database data.

I tried to search for some docs or example about legend management with OpenLayers but I didn't find anything useful.

Given that all the data about the entities displayed on the map come from my database it's quite simple for me to create a HTML legend and display it on the page, but... I'd *really* like it to be at the bottom left or right corner of the map: ideally I'd use a div with a fixed position inside the map container but... I can't, since the map container is created on the fly when the {{map}} object is rendered.

What would you recommend to achieve this, short of using JS to create or move the legend inside the map div?

Additional questions:

- Is there any way to render the map inside an existing <div> without replacing its content?

- Is there any way to render the map into a named div? It looks like it's supported in Map.render, but then again no attrs are passed from the Map.__unicode__ call to the self.render. I changed the code that checks for the map id to check self.options for an 'id' key and it works.... but then I'd need to check for that id existence instead of creating it again :-)

- I could pass the map size to the template and create a containing div of the same size, but I find it quite ugly... ^__^;

Roberto

[cha...@gmail.com]

On 05/26/2013 08:20 AM, Roberto Maurizzi wrote:
> What would you recommend to achieve this, short of using JS to create
> or move the legend inside the map div?
>

This is what I would recommend. The map will be useless without
javascript anyway, so there's no reason not to have javascript as a
requriement. The map div will be rendered immediately on page load, so
your template could look something like this:

{{ map }}
<div id='my_legend'><!-- your legend code here --></div>
<script type='text/javascript'>
var mapDiv = document.getElementById('id_map'); // The ID will come
from your instantiation.
var legend = document.getElementById('my_legend');
mapDiv.appendChild(legend);
</script>

Then, your style would be something like:

<style type='text/css'>
#id_map { position: relative; }
#my_legend { position: absolute; left: 0; bottom: 0; width: 100px;
height: 100px; }
</style>

This is, I believe, the most succinct, clear, portable, and
un-spaghetti-code way to accomplish your goal given the current
limitations of olwidget.

best,
Charlie

[Roberto Maurizzi]

This is what I would recommend.  The map will be useless without
javascript anyway, so there's no reason not to have javascript as a
requriement.

You're obviously right :-)

However I'm stuck with something I don't completely understand: how do I get the "map_id"?

Maybe I missed something in the docs, but I didn't find a way to specify the "id" of the div to be used by the map.

I checked the code and in widget.py at line 76 you have:

    map_id = attrs.get('id', "id_%s" % id(self))

but from what I was able to understand, the map is emitted to the template when Django calls Map.__unicode__ that in turns returns the results of "self.render(None, None). So the attrs parameter passed to render(self, name, value, attrs=None) are always None...?

Just to test this, I replaced line 76 with a map_id = self.options.get('id', "id_%s" %id(self)) that reads an id class attribute if it has been created passing in an "id" option, and it works (I get the name I wanted as DOM id)

Thank you again,

Roberto