2013-08-26 2 views
0

Я новичок в рельсах.включают json-файл в режиме просмотра рельсов?

Я пытаюсь добавить этот код:

$.ajax({ 
    url: "states.geojson", 
    dataType: 'json', 
    success: function load(d) { 
     var states = L.geoJson(d).addTo(map); 
     L.marker([38, -102], { 
      icon: L.mapbox.marker.icon({ 
       'marker-color': '#f22' 
      }), 
      draggable: true 
     }).addTo(map) 
     .on('dragend', function(e) { 
      var layer = leafletPip.pointInLayer(this.getLatLng(), states, true); 
      document.getElementById('state').innerHTML = layer.length ? 
       layer[0].feature.properties.name : ''; 
     }); 
    } 
}); 

, который я получил здесь: http://www.mapbox.com/mapbox.js/example/v1.0.0/point-in-polygon/

это мой index.html.erb:

<!DOCTYPE html> 
<html> 
<head> 
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' /> 
    <script src='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.js'></script> 
    <link href='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css' rel='stylesheet' /> 
    <!--[if lte IE 8]> 
    <link href='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.ie.css' rel='stylesheet' > 
    <![endif]--> 
    <style> 
    body { margin:0; padding:0; } 
    #map { position:absolute; top:0; bottom:0; width:100%; } 
    </style> 
</head> 
<body> 
<style> 
#state { 
    position:absolute; 
    top:10px; 
    right:10px; 
    background:#fff; 
    font-size:30px; 
    padding:10px; 
    z-index:999; 
} 
</style> 

<!-- <script src="leaflet-pip.min.js"></script> --> 
<div id='map'></div> 
<div id='state'></div> 
<script type='text/javascript'> 
var map = L.mapbox.map('map', 'lizozomro.map-6yvs8g1g') 
    .setView([38, -102.0], 5); 

$.ajax({ 
    url: "states.geojson", 
    dataType: 'json', 
    success: function load(d) { 
     var states = L.geoJson(d).addTo(map); 
     L.marker([38, -102], { 
      icon: L.mapbox.marker.icon({ 
       'marker-color': '#f22' 
      }), 
      draggable: true 
     }).addTo(map) 
     .on('dragend', function(e) { 
      var layer = leafletPip.pointInLayer(this.getLatLng(), states, true); 
      document.getElementById('state').innerHTML = layer.length ? 
       layer[0].feature.properties.name : ''; 
     }); 
    } 
}); 
</script> 
</body> 
</html> 

Я получаю ресурс не найден ошибка (404) on states.geojson

Я не уверен, где именно я ould поместите его или как ссылаться, используя правильные пути.

Прямо сейчас у меня есть копия файла в моей корневой папке приложения, один, на мой взгляд папку (так называемые карты), в непосредственной близости от index.html.erb

Как я могу ссылаться на этот ресурс правильно?

ответ

0

положите его в папку my_project/public/. Вы также хотите переименовать файл в states.geojson.json

Смежные вопросы