I am new to coding and a friend and I are making a website that has a map with markers. For some reason it's working when she pulls the master branch but when I pull origin master on GitHub I get errors and no markers. Does anyone know why it works on one devise but not on another? We have been constantly running into this issue.
product model
class Product < ApplicationRecord
belongs_to :user
has_many :bookings, dependent: :destroy
validates :name, presence: true
validates :category, presence: true
has_one_attached :photo
geocoded_by :address
after_validation :geocode, if: :will_save_change_to_address?
include PgSearch::Model
pg_search_scope :search_by_name_and_category,
against: [ :name, :category ],
using: {
tsearch: { prefix: true } # <-- now `superman batm` will return something!
}
end
product controller
def index
if params[:query].present?
@products = Product.search_by_name_and_category(params[:query])
else
@products = Product.all
@markers = @products.geocoded.map do |product|
{
lat: product.latitude,
lng: product.longitude
}
end
end
end
private
def product_params
params.require(:product).permit(:name, :category, :price, :description, :address)
end
view
<div class="card-product-container">
<div class="cards">
<% @products.each do |product| %>
<div class="card-product">
<%= link_to product_path(product.id) do %>
<img src="https://source.unsplash.com/random/?<%= product.name %>" />
<div class="card-product-footer">
<div style="text-decoration:none;">
<h2><%= product.name %></h2>
<p>Owner <%= product.user.first_name %></p>
</div>
<h2><%= product.price %></h2>
</div>
<% end %>
</div>
<% end %>
</div>
<div style="width: 100%; height: 600px;"
data-controller="map"
data-map-markers-value="<%= @markers.to_json %>"
data-map-api-key-value="<%= ENV['MAPBOX_API_KEY'] %>">
</div>
</div>
schema
create_table "products", force: :cascade do |t|
t.string "name"
t.string "category"
t.boolean "available"
t.string "image"
t.text "description"
t.integer "price"
t.bigint "user_id"
t.datetime "created_at", precision: 6, null: false
t.datetime "updated_at", precision: 6, null: false
t.float "latitude"
t.float "longitude"
t.index ["user_id"], name: "index_products_on_user_id"
end
map controller
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static values = {
apiKey: String,
markers: Array
}
connect() {
mapboxgl.accessToken = this.apiKeyValue
this.map = new mapboxgl.Map({
container: this.element,
style: "mapbox://styles/mapbox/streets-v10"
});
this.#addMarkersToMap()
this.#fitMapToMarkers()
}
#fitMapToMarkers() {
const bounds = new mapboxgl.LngLatBounds()
this.markersValue.forEach(marker => bounds.extend([ marker.lng, marker.lat ]))
this.map.fitBounds(bounds, { padding: 70, maxZoom: 15, duration: 0 })
}
#addMarkersToMap() {
this.markersValue.forEach((marker) => {
new mapboxgl.Marker()
.setLngLat([ marker.lng, marker.lat ])
.addTo(this.map)
})
}
}
Aucun commentaire:
Enregistrer un commentaire