foursquare フィードから座標を取得し、それらをマップで使用して Web サイトに表示しようとしています。ほとんどの場合、javascript と Mapbox を学習するための演習として - 私はこれが初めてです。
mapbox は KML を受け入れないため、mapbox の「単一マーカーの追加」コードとその他のコードを使用して、KML を循環させて座標を見つけました。
どういうわけか、私はそれを機能させることができません。どんなヒントでも大歓迎です！
<!-- Foursquare map -->
<script>
// get coordinates and place from Foursquare feed
$(document).ready(function(){
$.get("https://feeds.foursquare.com/history/6a46a109e06aa6d74d34b42b397806d5.kml?count=1", function(data){
$(data).find("Placemark").each(function(index, value){
coords = $(this).find("coordinates").text();
place = $(this).find("name").text();
pos = coords.split(",")
var features = [{
"geometry": { "type": "Point", "coordinates": pos[0], pos[1]},
"properties": { "place": place }
}];
});
});
});
// start Mapbox
var map = mapbox.map('map-canvas').zoom(5).center({
lat: 0,
lon: 0
});
map.addLayer(mapbox.layer().id('rikwuts.map-0i5jiwdn'));
// Create an empty markers layer
var markerLayer = mapbox.markers.layer().features(features);
// Add interaction to this marker layer. This
// binds tooltips to each marker that has title
// and description defined.
mapbox.markers.interaction(markerLayer);
map.addLayer(markerLayer);
// Add a single feature to the markers layer.
// You can use .features() to add multiple features.
markerLayer.add_feature({
geometry: {
// The order of coordinates here is lon, lat. This is because
// we use the GeoJSON specification for all marker features.
// (lon, lat is also the internal order of KML and other geographic formats)
coordinates: [ pos.lng, pos.lat ]
},
properties: {
// these properties customize the look of the marker
// see the simplestyle-spec for a full reference:
// https://github.com/mapbox/simplestyle-spec
'marker-color': '#00ff00',
'marker-symbol': 'star-stroked',
title: place,
description: 'This is a single marker.'
}
});
// Attribute map
map.ui.attribution.add()
.content('<a href="http://mapbox.com/about/maps">Thanks to Mapbox</a>');
</script>
<div id="map-canvas"></div>
<!-- END map -->