xml からデータを取得してjavascript の中にある関数の中でGeoJSONの形式にしてオブジェクトを作ったのですが、そのオブジェクトのそれぞれのデータにアクセスをしてleafletを使いマップを作りそのデータをマーカーでマップに表示させようとしているのですが、うまく言っていません。わからないことはどうやったらそのGeoJSON のデータ(id, name, capacityにそれぞれアクセスできるのでしょうか?
javascript
1var Convert = (function(){ 2 var pub={}; 3 4 function onEachFeatureImpl(feature, layer) { 5 var popupContent = "<b>Point of Interest</b> <br/>" + feature.properties.description; if (feature.properties && feature.properties.popupContent) { 6 popupContent += feature.properties.popupContent; } 7 layer.bindPopup(popupContent); 8 } 9 10 function loading(){ 11 var file = "libraries.xml"; 12 $.ajax({ 13 type:"GET", 14 url:file, 15 cache:false, 16 // if it receives the file 17 success:function(data){ 18 console.log("i got it"); 19 // need a function to convert 20 // testing 21 convert(data); 22 }, 23 error:function(){ 24 // fail to get it 25 console.log("Failed to get it"); 26 } 27 28 }); 29 30 function convert(data){ 31 // find info in xml 32 $(data).find("library").each(function(){ 33 // xml data i need 34 var address = $(this).find("address")[0].textContent; 35 var lat = $(this).find("lat")[0].textContent; 36 var lng = $(this).find("lng")[0].textContent; 37 var id= $(this).find("id")[0].textContent; 38 var description = "Little_Library"; 39 var capacity = $(this).find("capacity")[0].textContent; 40 // GeoFormat object 41 var geojson = 42 { 43 "type":"FeatureCollection", 44 "features":[ 45 { 46 "type":"Feature", 47 "geometry":{ 48 "type":"Point", 49 "coordinates":[ 50 lng, 51 lat 52 53 ] 54 }, 55 "properties":{ 56 "id": id, 57 "description":description, 58 "name": address, 59 "capacity": capacity, 60 "numBooks": 0 61 } 62 } 63 ] 64 }// end geojson 65 66 67 68 //console.log(geojson); 69 L.geoJSON(geojson, { 70 onEachFeature: onEachFeatureImpl 71 }).addTo(mymap); 72 73 }); 74 }// end convert 75 76 77 }// end converting 78 79 80 81 82 pub.setup = function(){ 83 84 window.onload = Convert.convert; 85 } 86 return pub; 87}()); 88 89$(document).ready(Convert.setup);
html
1<!-- Assignemnt 1 Tomofumi Kimura COSC212 --> 2 3<!DOCTYPE html> 4 5<html> 6 <head> 7 <meta charset ="UTF-8"> 8 <link rel="stylesheet" type="text/css" href="style.css"> 9 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 10 11 <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /> 12 13 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" integrity="sha512-wcw6ts8Anuw10Mzh9Ytw4pylW8+NAD4ch3lqm9lzAsTxg0GFeJgoAtxuCLREZSC5lUXdVyo/7yfsqFjQ4S+aKw==" crossorigin="" /> 14 <script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js" integrity="sha512-mNqn2Wg7tSToJhvHcqfzLMU6J4mkOImSPTxVZAdo+lcPlk+GhZmYgACEe0x35K7YzW1zJ7XyJV/TT1MrdXvMcA==" crossorigin=""></script> 15 16 <title>Lilliput Libraries</title> 17 <script src = "jquery-3.2.1.min.js"></script> 18 <script src ="data.js"></script> 19 20 </head> 21 22 <body> 23 <div id="mapid" style = "width: 1200px; height:1200px;"></div> 24 <script> 25 //first view in map 26 var mymap = L.map('mapid').setView([-45.866891,170.518202], 18); 27 28 L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { 29 maxZoom: 18, 30 attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 31 '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 32 'Imagery © <a href="http://mapbox.com">Mapbox</a>', 33 id: 'mapbox.streets' 34 }).addTo(mymap); 35 36 var customOption = { 37 'maxWidth' : 'auto' 38 } 39 40 L.geoJSON(Convert.points).addTo(mymap); 41 42 // create a marker at given coordinates 43 44 var popup = L.popup(); 45 function onMapClick(e) { 46 popup 47 .setLatLng(e.latlng) 48 .setContent("You clicked the map at " + e.latlng.toString()) 49 .openOn(mymap); 50 } 51 52 mymap.on('click', onMapClick); 53 </script> 54 55 56 <div class = "map-home"> 57 <p class = "aho"></p> 58 59 60 61 62 </div> 63 64 65 66 </body> 67</html>