0

さまざまな建物の年齢を色で示すマップを TileMill で作成しています。4 つのデータ レイヤー (それぞれ 50 年の建築歴があるため、オン/オフを切り替えることができます) とベース レイヤーがあります。

TileMill 内でシェープファイルにカーソルを合わせると、ツールチップが表示されます。カーソルが置かれている建物の築年数が表示されるようにカスタマイズしました。ただし、Web サイトに統合するために MBTiles にエクスポートして MapBox にアップロードすると、ホバー機能がなくなり、凡例が表示されません。

MapBox の Web サイトと API で何時間もヘルプを探しました。私はマーカーを使用していないので、それを解決策として使用することはできません (800,000 以上の建物があります)。これを行う方法はありますか？

var map = L.mapbox.map('map', 'jacobs74.xoonovka', {
    legendControl: {
        // any of the valid control positions:
        // http://leafletjs.com/reference.html#control-positions
        position: 'bottomleft'
    }, zoomControl: false
})
    .setView([41.8928, -87.6491], 14),
    markerLayer = L.mapbox.markerLayer().addTo(map);
    map.gridControl.options.follow = true;
    new L.Control.Zoom({ position: 'topright' }).addTo(map);

        var gridLayer = L.mapbox.gridLayer('jacobs74.xoonovka');
    map.addLayer(gridLayer);
    map.addControl(L.mapbox.gridControl(gridLayer, {follow: true}));

L.control.layers({

     }, {
        'Thru 1899': L.mapbox.tileLayer('jacobs74.s37bpdgq'),
        '1900-1949': L.mapbox.tileLayer('jacobs74.fi084ush'),
        '1950-1999': L.mapbox.tileLayer('jacobs74.yh8prbfi'),
        '2000-Now': L.mapbox.tileLayer('jacobs74.awsw2ji1')
    }).addTo(map);
4

1 に答える 1

0

あなたの問題がどこにあるかは少し不明です。コードのコピーを含めてください。タイルとマーカー レイヤーのツールチップの作成について。followオプションをtrueに設定するだけですmap.gridControl

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Movetip</title>

  <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.5.2/mapbox.js'></script>
  <link href='//api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.css' rel='stylesheet' />

  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>
<div id='map'></div>
<script>
var map = L.mapbox.map('map', 'examples.map-8ced9urs');
map.gridControl.options.follow = true;
</script>
</body>
</html>
于 2013-12-09T17:01:23.983 に答える