geojsonデータからチラシマップにマーカーを描画

（2000以上の座標を持つ）geoJsonデータをリーフレットマップにインポートするにはどうすればいいですか？これは私が試した地理JSONの短いサンプルgeojsonデータからチラシマップにマーカーを描画

{ 
    "type": "FeatureCollection", 
    "features": [ 
    { 
    "type": "Feature", 
    "geometry": { 
     "type": "Point", 
     "coordinates": [ 44.8242557024,20.4048512901 ] 
    }, 
    "properties": { 
    } 
    }, 
    { 
    "type": "Feature", 
    "geometry": { 
     "type": "Point", 
     "coordinates": [ 44.8242557024,20.4048512901 ] 
    }, 
    "properties": { 
    } 
    },...]

コード：

<!doctype html> 
<html> 
<head> 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" /> 
    <!--[if lte IE 8]> 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.ie.css" /> 
    <![endif]--> 
    <style type="text/css"> 
    body { 
     padding: 0; 
     margin: 0; 
    } 

    html, body, #cmap { 
     height: 100%; 
    } 

    </style> 
    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script> 
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> 
</head> 
<body> 
    <div id="cmap"></div> 
    <script> 
    var cupcakeTiles = L.tileLayer('https://api.mapbox.com/v4/mapbox.emerald/page.html?access_token=cj5h2mqa63sc92srx3bu62e2j', { 
    maxZoom: 18 
    }); 

    $.getJSON("convertcsv.geojson", function(data) { 
    var geojson = L.geoJson(data, { 
     onEachFeature: function (feature, layer) { 
     layer.bindPopup(feature.properties.name);cj5h2mqa63sc92srx3bu62e2j 
     } 
    }); 

var map = L.map('map', { 
    center: [44, 20], 
    zoom: 7 
}); 

L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {  
    id: 'examples.map-20v6611k' 
}).addTo(map); 

new L.GeoJSON(meta1nJson).addTo(map); 
    }); 
    </script> 
</body> 
</html>

しかし、何も、起こらないそれだけで灰色の背景です。間違いがどこにあるのかは分かりませんが（おそらく複数あります）、geojsonデータとマップトークンをインポートするのは間違いでしょう。私はこれで総初心者です。少し早いですがお礼を。

出典

2017-09-25 jovicbg

あなたのコードには多くの問題があるようです。まず、idが 'map'の要素がhtmlに存在しないため、マップレイヤーを配置することはできません。下のコードでは、 'cmap'をIDとして追加する必要があります。

var map = L.map('cmap', { 
    center: [44, 20], 
    zoom: 7 
});

また、meta1nJsonはコード内に定義されていないようですので、以下のコードは機能しません。

new L.GeoJSON(meta1nJson).addTo(map);

層cupcakeTilesが定義されているように見えるが、マップに追加されることはありません。また、下のコードには、削除すべき迷子文字列があります。

$.getJSON("convertcsv.geojson", function(data) { 
var geojson = L.geoJson(data, { 
    onEachFeature: function (feature, layer) { 
    layer.bindPopup(feature.properties.name); //cj5h2mqa63sc92srx3bu62e2j 
    } 
});

出典

2017-09-25 10:32:02

geojsonデータからチラシマップにマーカーを描画

答えて

関連する問題