Foursquare签到地图

这个foursquare的地图折腾好几次了，最早是手动导入google maps，然后用了foursquare的api和mapbox的地图。现在第三次折腾了。还是用的foursquare的api，但是地图由mapbox换成mapquest.com。

mapbox的免费账户每月有3000次访问量的限制，而且没有ssl和卫星地图。最便宜的ssl地图要每个月149美刀 Orz
mapquest.com和mapbox同样使用的是openstreetmap的数据，但却是免费的，而且有ssl和卫星地图，虽然美国以外地区的卫星地图放大倍数极其有限，但总好过没有吧。而且mapquest.com的地图甚至不需要注册。良心啊。

添加地图和图层的工作仍然是leaflet。只是貌似leaflet更新了，0.5.1版，所以要稍微修改下。因为leaflet的cdn没有使用ssl，所以保存到自己服务器上。先去leaflet下载必要的文件，然后解压，/dist目录下就是所需要的文件了。建立一个map.php文件，加载刚才下载的css和js文件，然后就可以建立地图了。

<div id="map" style="width: 1000px; height: 600px"></div> //Set up div with id of "map" and define width and height
<script type="text/javascript">
var mapquestosmUrl = 'https://{s}-s.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png',
    mapquestsatUrl = 'https://{s}-s.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png',
    subDomains = ['otile1','otile2','otile3','otile4'],
    mapquestAttrib = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors | &copy; Tiles Courtesy of  <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img style="vertical-align:middle;" src="https://developer.mapquest.com/content/osm/mq_logo.png"> | &copy; Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency'; //Required copyright disclaim
var osm = L.tileLayer(mapquestosmUrl, {attribution: mapquestAttrib, subdomains: subDomains, maxZoom: 18}), //Openstreetmap
    sat = L.tileLayer(mapquestsatUrl, {attribution: mapquestAttrib, subdomains: subDomains, maxZoom: 11}); //Satellite map. Maximum zoom level outside of the US is 11
var map = L.map('map', {
    center: new L.LatLng(27.502, 155.264), //Initial position when page loaded
    zoom: 2, //Initial zoom level when page loading
    layers: [osm, sat]
});
var baseMaps = {
    "Map": osm,
    "Satellite View": sat
};
L.control.layers(baseMaps).addTo(map);
</script>
<?php
$access_token='XXXXXXXXXX'; //Access token obtained from foursquare
$url = 'https://api.foursquare.com/v2/users/self/checkins?v=20140101&oauth_token='.$access_token;
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,"$url");
curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);
$data=curl_exec($ch);
curl_close($ch);

$data=json_decode($data,true);
$data=$data['response']['checkins']['items'];

$features=array();
foreach($data as $checkin){
    if (array_key_exists('location',$checkin)) {
        $name=$checkin['location']['name'];
        $lat=$checkin['location']['lat'];
        $lng=$checkin['location']['lng'];
        $coordinates=array($lng,$lat);
        $geometry=array(
                    "type" => "Point",
                    "coordinates" => $coordinates
                   );
        $properties=array(
                    "name" => $name
                    );
        $item=array(
                    "type" => "Feature",
                    "geometry" => $geometry,
                    "properties" => $properties
               );
        array_push($features, $item);
    }
    if (array_key_exists('venue',$checkin)) {
        $name=$checkin['venue']['name'];
        $lat=$checkin['venue']['location']['lat'];
        $lng=$checkin['venue']['location']['lng'];
        $coordinates=array($lng,$lat);
        $geometry=array(
                    "type" => "Point",
                    "coordinates" => $coordinates
                   );
        $properties=array(
                    "name" => $name
                    );
        $item=array(
                    "type" => "Feature",
                    "geometry" => $geometry,
                    "properties" => $properties
               );
        array_push($features, $item);
    }
}
$data="var geojsonFeature = ".json_encode(array(
                "type" => "FeatureCollection",
                "features" => $features
           )).";";
echo '<script type="text/javascript">'.$data.'</script>';
?>
<script type="text/javascript">
var geojsonLayer = L.geoJson().addTo(map);
geojsonLayer.addData(geojsonFeature);
function onEachFeature(feature, layer) {
    if (feature.properties && feature.properties.name) {
        layer.bindPopup(feature.properties.name);
    }
}
L.geoJson(geojsonFeature, {
    onEachFeature: onEachFeature
}).addTo(map);
</script>

填好foursquare的access token就行。我的地图：https://xjpvictor.info/map/

Update: 2014-02-09
根据https://developer.foursquare.com/overview/versioning添加v参数