Fritkots.json(StackOverFlow)

Error_messages.md

Error: Unable to upload map 14/10: FIXED

map.self-9bdba3cb475f02d6f8f5758062991fd11b74cc98f433f22aee3dac332a22ac72.js:19 Uncaught SyntaxError: Unexpected token )

Error: Unable to see data/markers on map 18/10:

1. Error on opening page

• Just get the error message 'Oops something went wrong'

2. Error on opening the console "Inspect element"

jquery.self-a714331225dda820228db323939889f149aec0127aeb06255646b616ba1ca419.js?body=1:9665 XHR finished loading: GET "http://localhost:3000/fritkots.json?success=undefined&error=undefined".

Error: Unable to upload map 19/10: CURRENT

1. Error on opening page

• Nothing comes ups

2. Error on opening the console "Inspect element"

Uncaught ReferenceError: fritkots is not defined: map.self-274295e507a1b3b755a21370cbd50928cff58792175dd07e8e25695b873f38aa.js?body=1:29

fritkot.1.json

{"id":2,"address":"Fontanasstraat 3","title":"Frit Fontanas","user_id":1,"created_at":"2015-10-21T14:58:44.506Z","updated_at":"2015-10-21T14:58:44.531Z","place":"Saint-Gilles","postcode":"1060","country":"Belgium","latitude":4.342426,"longitude":50.8331051,"public":true}

fritkots.json

[{"type":"Feature","geometry":{"type":"Point","coordinates":[50.8331051,4.342426]},"properties":{"title":"Frit Fontanas","address":"Fontanasstraat 3","url":"/fritkots/2","marker-color":"#FFFFFF","marker-size":"medium","marker-symbol":"circle"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[50.8500539,4.3748202]},"properties":{"title":"Friterie Saint Josse","address":"Rue Saint Josse 132","url":"/fritkots/3","marker-color":"#FFFFFF","marker-size":"medium","marker-symbol":"circle"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[50.8564279,4.3531414]},"properties":{"title":"La Frillete","address":"Rue de Laeken 185","url":"/fritkots/4","marker-color":"#FFFFFF","marker-size":"medium","marker-symbol":"circle"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[null,null]},"properties":{"title":"dummy Fritkot","address":"Rue Bailli 3","url":"/fritkots/5","marker-color":"#FFFFFF","marker-size":"medium","marker-symbol":"circle"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[null,null]},"properties":{"title":"dummy Fritkot","address":"Rue Bailli 3","url":"/fritkots/6","marker-color":"#FFFFFF","marker-size":"medium","marker-symbol":"circle"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[null,null]},"properties":{"title":"dummy Fritkot","address":"dummy","url":"/fritkots/7","marker-color":"#FFFFFF","marker-size":"medium","marker-symbol":"circle"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[null,null]},"properties":{"title":"dummy2","address":"dummy address2","url":"/fritkots/8","marker-color":"#FFFFFF","marker-size":"medium","marker-symbol":"circle"}}]

fritkots_controller.rb

...

  class FritkotsController < ApplicationController
  before_action :set_fritkot, only:  [:show, :edit, :update, :destroy]
  before_action :authenticate_user!, except: [:index, :show]

  # GET /fritkots
  # GET /fritkots.json
  def index
    @fritkots = Fritkot.all
    authorize @fritkots
    # @geojson = Array.new
    # build_geojson(fritkot, @geojson)

    @geojson = @fritkots.map do |fritkot|
      GeojsonBuilder.build_fritkot(fritkot)
    end

    respond_to do |format|
      format.html
      format.json { render json: @geojson }
    end
  end

  # FIX: To be extracted into a .self_geojson?
  def build_geojson(fritkots, geojson)
    fritkots.each do |fritkot|
      geojson = GeojsonBuilder.build_fritkot(fritkot)
    end
  end

  # GET /fritkots/1
  # GET /fritkots/1.json
  def show
    @fritkot = Fritkot.find(params[:id])
  end
  
...

geojson_builder.rb

class GeojsonBuilder

  def self.build_fritkot(fritkot)
    geojson = {
        type: "Feature",
        geometry: {
          type: "Point",
          coordinates: [fritkot.longitude, fritkot.latitude]
        },
        properties: {
          title: fritkot.title,
          address: fritkot.address,
          url: "/fritkots/#{fritkot.id}",
          :"marker-color" => "#FFFFFF",
          :"marker-size" => "medium",
          :"marker-symbol" => "circle", #fast_food
        }
      }
    geojson
  end
end

map.js

// ERROR 1 - Unable to see the map ** FIXED 14/10 **
// ERROR 2 - Unable to see the markers on the map ** FIXED 14/10 **
// ERROR 3 - Uncaught ReferenceError: fritkots is not defined map.self-274295e507a1b3b755a21370cbd50928cff58792175dd07e8e25695b873f38aa.js?body=1:29
// Public gist with all relevant files : https://gist.github.com/dantesolis/29a6d23f3ceba4043746/

$(document).on("ready", function() {
  L.mapbox.accessToken = "pk.eyJ1IjoiZHNvbGlzIiwiYSI6ImViNzgwOGZmZmVlMmVjYzg5ZjZhNzYxNDE3MWE0ZTFhIn0.0E-Z_FCmS8VHPRY07tVSEQ";
  var map = L.mapbox.map("map", "dsolis.ni76oel2", { zoomControl: false }).setView([50.846026, 4.3491641], 13);

    getEvents(map);

    // var featureLayer = L.mapbox.featureLayer({
    //   type: "FeatureCollection",
    //   features: ['fritkots'] //['geojson']
    // }).addTo(map);

    // map.featureLayer = featureLayer;
  });

  function getEvents(map) {
    var $loading_wheel = $("#spinning-wheel")
    $loading_wheel.show();
    $.getJSON('/fritkots.json', {
      // [FIX]: Error Message appearing on <success> and <error> as being undefined.
      // Problem with the loading wheel or the way I'm calling the functions?
      success:function(geojson) {

        var featureLayer = L.mapbox.featureLayer({
          type: "FeatureCollection",
          features: fritkots //['geojson']
        }).addTo(map);

        map.featureLayer = featureLayer;

        $loading_wheel.hide();
        map.featureLayer.setGeoJSON({
          type: "FeatureCollection",
          features: fritkots //['geojson']
        });

        addEventPopups(map);
      },
      error:function() {
        $loading_wheel.hide();
        alert("Oops something went wrong.");
      }
    });
  }

  function addEventPopups(map) {
    map.featureLayer.on("layeradd", function(e){
      var marker = e.layer;
      var properties = marker.feature.properties;
      var popupContent = '<div class="marker-popup">' + '<h3>' + properties.title + '</h3>' +
                         '<h4>' + properties.address + '</h4>' + '</div>';
      marker.bindPopup(popupContent, {closeButton: false, minWidth: 300});
    });
  }