Question

I’m super new to rails and javascript, I have a table of venues with each belonging to a type and an area. They are displayed as partials on the index page and also each has its own icon on a map to the left of the screen.

I have just added a new table of mapicons which just holds an image uploaded using paperclip to my app so each venuetype has a differant icon. This all works fine however the javascript I was using to place the icons on the map breaks when I include the new mapicon.

working mapicon placement (_venue.html.erb)

<%= link_to venue do %>
  <div class="venue_partial">    
    <span class="venue_partial_name"><%= venue.name %></span>    
    <div id="venue_map_icon_<%= venue.id %>" class="venue_map_icon" style="position:absolute;"></div>
  </div>
<% end %>

<script type="text/javascript">
  document.getElementById("venue_map_icon_<%= venue.id %>").style.left= "<%= venue.iconleftpx %>px";
  document.getElementById("venue_map_icon_<%= venue.id %>").style.top= "<%= venue.icontoppx %>px";
</script>

Displays the map icon correctly on the map but as black stars as I have set in the css.

broken mapicon placement (_venue.html.erb)

<%= link_to venue do %>
  <div class="venue_partial">    
    <span class="venue_partial_name"><%= venue.name %></span>    
    <div id="venue_map_icon_<%= venue.id %>" <%= image_tag venue.venuetype.mapicon.mapicon.url(:mapicon), :style => "position:absolute;", :class => "venue_map_icon" %></div>
  </div>
<% end %>

<script type="text/javascript">
  document.getElementById("venue_map_icon_<%= venue.id %>").style.left= "<%= venue.iconleftpx %>px";
  document.getElementById("venue_map_icon_<%= venue.id %>").style.top= "<%= venue.icontoppx %>px";
</script> 

Displays the correct mapicons that I uploaded and assigned to each venuetype but they are positioned at the top right corner of their venue partial and not on the map to the left of the screen.

Hope I’ve asked this well, any clarification needed please ask. Thanks for any help its much appreciated!

EDIT

Heres a couple of screenshots I hope will help, The first is how the mapicons are currently. The venue partials show as Tester1, Tester2 etc with a large coloured icon to the left of the name, the grayed lettering under the name is the type (Type 1, 2 or 3). And the map icons are the black stars to the left positioned absolutely with the top and left values taken from their respective venue records.

The second screenshot is when I change the code as shown above, the partials show the same but the mapicons instead of being black stars show correctly as smaller coloured squares but aren’t positioning correctly. They are sticking to the top right corner of their own venue partials.

This is what I want it to display as: (this is a mocked-up image)

The CSS for the mapicons is just:

.venue_map_icon {
width: 19px;
height: 18px;
padding: none;
margin: none;
background-image:url(/images/mapicon.png);
border: none;
}

  .venue_map_icon:hover {
  background-image:url(/images/mapicon_hover.png);
  }

Model relationships

Venues

class Venue < ActiveRecord::Base
  belongs_to :venuetype
end

Venuetypes

class Venuetype < ActiveRecord::Base
  has_many :venues
  belongs_to :mapicon
  has_attached_file :icon,
    :styles => {
      :thumb=> "100x100>",
      :small  => "150x150>",
      :medium => "300x300>",
      :large =>   "400x400>" },
      :default_url => '/images/noimage.png'
end

Mapicons

class Mapicon < ActiveRecord::Base
  has_many :venuetypes
  has_attached_file :mapicon,
    :styles => { 
      :large => "640x480", 
      :medium => "300x300", 
      :thumb => "100x100", 
      :mapicon => "20x20" }
end

Answer 1

I found my error!

What was:

<div id="venue_map_icon_<%= venue.id %>" <%= image_tag venue.venuetype.mapicon.mapicon.url(:mapicon), :style => "position:absolute;", :class => "venue_map_icon" %></div>

Should be:

<div id="venue_map_icon_<%= venue.id %>" style="position:absolute;" <%= image_tag (venue.venuetype.mapicon.mapicon.url(:mapicon)), :class => "venue_map_icon" %></div>