如何为局部零件创建地图图标？

Question

I have a list of records being displayed as partials down one side of the screen which can be filtered. And on the other side I have a hand drawn map which is a div with a background image. How can I have an icon for each record on the map which is only displayed when the records partial is shown?

Index page looks like this:

<div class="map_container">
</div>

<div class="filter_options_container">
  filter form stuff is here
</div>

<div class="venue_partials_container">
  <%= render :partial => 'venue', :collection => @venues %>
  <div class="clearall"></div>

  <%= will_paginate @venues %>

  <div class="venue_partial_button">
    <%= link_to 'add a new venue', new_venue_path %>
  </div>
</div>

<div class="clearall"></div>

Thanks for any help.

Answer 1

You need to add some method to venue object or change render method, in some way... well, just output some javascript data with each venue like next:

<script type="text/javascript"><!--
data.push({
  x: <%= this.x %>,
  y: <%= this.y %>,
  someOtherStuff: <%= this.stuff %>
});
--></script>

and after that add a function, which will iterate through that data array:

function insertIconOnMap(mapItem){
  var img = $("<img>", {
    'class': "mapIcon",
    'src': mapItem.someOtherStuff
  }).css({
    'left': mapItem.x,
    'top': mapItem.y
  });
  $("#map").append(img);
}
data.each(insertIconOnMap);

and some css like

#map { position: relative; }
#map .mapIcon { position: absolute; }

If you want it in more elegant way... I forget everything I knew about Ruby :-D And it was you, who put javascript tag for your question ;-)