Precomopiling files doesnt work fine

Question

I'm developing project with leaflet.js thing. I have javascript file that has to update coordinates of the company. So while I'm in development ENV, and rails use map_update.coffee.erb, everything is working smoothly. As soon as I'm trying to make rake assets:precompile and to start my local server in production ENV, map becomes broken. It's working, but absolutely different from development ENV.

My js file is precompiled(I can see it in public/assets/map), because I explicitly precompile it in production.rb. But it doesn't work good.

Any ideas would be great! And if you need some of my files, just ask me, I'll provide needed code, that I've wrote. Thanks!

edit production.rb:

Application.configure do

  config.cache_classes = true
  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true
  config.serve_static_assets = false

  config.assets.compress = true
  config.assets.compile = false
  config.assets.digest = true

  require 'syslog/logger'
  config.logger = Syslog::Logger.new 'abw'
  config.logger.level = 2

  config.assets.precompile += %w( application-ie.css application-ie.js )
  config.assets.precompile += %w( abwp.css.scss abwp.css xgemius.js )
  config.assets.precompile += %w( map/map.js map/map_update.js )

  config.i18n.fallbacks = true

  config.active_support.deprecation = :notify
end

map_update.coffee.erb that is working in dev env and doesn't in production after precompilation:

#= require map/map.coffee.erb

jQuery $ ->
  coord = $('#coordinates-val').val().replace('[',"").replace(']',"").split(",").map(Number)
  loc = [coord[1], coord[0]]
  map.setCompanyLocation loc
  map.layers.companyLocationMarker.on 'dragend', (e) ->
    $('#coordinates-val').val(e.target._latlng.lng + ", " + e.target._latlng.lat)

  $("#location-detector-update").on 'click', (e) ->
    e.preventDefault()
    address = $("#location-address").val()
    errorElement = $("#location-error")
    if address.length > 0
      $.ajax
        url: 'http://geocode-maps.yandex.ru/1.x/'
        type: 'get'
        data:
          geocode: address
          format: 'json'
          results: 1
         ,success: (data) =>
          if typeof(data) == 'string'
            data = JSON.parse(data)
          if data.response.GeoObjectCollection.featureMember.length > 0
            _location =   data.response.GeoObjectCollection.featureMember[0].GeoObject.Point.pos.split(" ")
            _location[0] = 0 if _location[0] == null
            _location[1] = 0 if _location[1] == null
            location = new L.LatLng(_location[1], _location[0])
            map.setCompanyLocation location
            $('#coordinates-val').val(_location[0] + ", " + _location[1])
            map.layers.companyLocationMarker.on 'dragend', (e) ->
              $('#coordinates-val').val(e.target._latlng.lng + ", " + e.target._latlng.lat)
            errorElement.html ""
          else
            errorElement.html "Не найдено"

"Doesn't work" means, when I'm on the page of updating coordinates while running dev env, everything is work as I expect: if company has coordinates, it show them and give the apportunity to enter adress and posts another coorinates to the db. If company doesn't have coordinates, map is initializing in customized default place. In production env I see only marker and no map picture. Still can enter the adress find coordinates and post it to db, but I don't see the map itself and because of that can't move the marker to the right place. Ah, forgot. Cath the view:

#map
.map-filter
  #location-error
  .input-append.adress-input
    = text_field_tag 'location-address', nil, class: 'input', placeholder: 'Enter your adress'
    = link_to nil, class: 'btn', id: 'location-detector-update' do
      i.icon-search

= javascript_include_tag 'map/map_update'

= render 'form_coordinates' 

Hope that's enough for start.

And one more thing. I have another view just to see the map of the company and I can do that. So the map is initializing properly. As I sad, problems in precompilation of my map_update.coffee.erb

Answer 1

So, finally, I found the problem.

I was requiring in my update_map.js map.js, wich has it's own instantiating of window.map. It was not suitable for this case of changing the marker. I rewrote my update_map.js and now it's using its' own instance of window.map. This is my update_map.js:

ACTIVEOBJECTICON = L.icon
  iconUrl: '<%= image_path("green-marker.png") %>',
  iconSize: [25, 41],
  iconAnchor: [13, 41]
  draggable: true

class EditMap extends L.Map
  constructor: (id, params) ->
    super id, params
    @layers =
      companyLocationMarker: new L.LayerGroup()
      activeObjectMarker: new L.LayerGroup()
    @activeObjectIcon = ACTIVEOBJECTICON
    @putInit()

  putInit: =>
    if coord == "[0]" || coord == ""
      alert("You didn't setup adress.")
    else
      latLng = coord.replace('[',"").replace(']',"").split(",").map(Number)
      val1 = latLng[1]
      val0 = latLng[0]
      location = new L.LatLng(val1, val0)
      @layers.activeObjectMarker = new L.Marker(location, { icon: @activeObjectIcon} )
      @addLayer(@layers.activeObjectMarker)
      @layers.activeObjectMarker.dragging.enable()
      @setView(location, 15)
    @panTo location

  setCompanyLocation: (location) =>
    @currentLocation = location
    map.renderCompanyLocation()

  renderCompanyLocation: =>
    locationIcon = ACTIVEOBJECTICON
    @removeLayer(@layers.activeObjectMarker)
    @removeLayer(@layers.companyLocationMarker)
    @layers.companyLocationMarker = new L.Marker(@currentLocation, { icon: locationIcon })
    @addLayer(@layers.companyLocationMarker)
    @layers.companyLocationMarker.dragging.enable()
    @setView(@currentLocation, 15)


jQuery $ ->
  osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
  osmTiles = new L.TileLayer osmUrl,
    maxZoom: 18
  window.map = new EditMap 'map',
    attributionControl: false,
    zoom: 12,
    doubleClickZoom: false
    center: new L.LatLng(53.9060, 27.5549)
  map.addLayer osmTiles

  $("#location-detector-update").on 'click', (e) ->
    e.preventDefault()
    address = $("#location-address").val()
    errorElement = $("#location-error")
    if address.length > 0
      $.ajax
        url: 'http://geocode-maps.yandex.ru/1.x/'
        type: 'get'
        data:
          geocode: address
          format: 'json'
          results: 1
        ,success: (data) =>
          if typeof(data) == 'string'
            data = JSON.parse(data)
          if data.response.GeoObjectCollection.featureMember.length > 0
            _location = data.response.GeoObjectCollection.featureMember[0].GeoObject.Point.pos.split(" ")
            _location[0] = 0 if _location[0] == null
            _location[1] = 0 if _location[1] == null
            location = new L.LatLng(_location[1], _location[0])
            map.setCompanyLocation location
            $('#coordinates-val').val(_location[0] + ", " + _location[1])
            map.layers.companyLocationMarker.on 'dragend', (e) ->
              $('#coordinates-val').val(e.target._latlng.lng + ", " + e.target._latlng.lat)
            errorElement.html ""
          else
            errorElement.html "Unable to find"

production.rb is the same.