Ho cercato di fare una mappa molto semplice su Leaflet negli ultimi due giorni e sto sbattendo contro un muro.Come posso ottenere un livello topojson da mostrare nel volantino usando d3?
Ho un file topoJSON con due strati creati da file geoJSON precedenti: codici postali statunitensi per 5 stati e i poligoni dei 5 stati.
Voglio visualizzarli su Leaflet ed è importante utilizzare topoJSON invece di geoJSON a causa delle dimensioni del file più piccole con il livello dei codici di avviamento postale.
Il problema è che non riesco, per tutta la vita, a ottenere anche il livello di stati più piccoli nel mio file topoJSON da visualizzare sulla mappa. Ho esaminato molti esempi sul web e ho seguito l'esempio di Mike Bostock: https://github.com/mbostock/bost.ocks.org/blob/gh-pages/mike/leaflet/index.html#L131-171.
Posso ottenere il file da visualizzare in un browser Web utilizzando solo d3, quindi il file va bene. Sto usando v1 di topoJSON insieme al metodo topojson.feature nello script. Il codice è sotto Non riesco a rendere disponibile il file topoJSON, ma suppongo che vada bene perché l'ho già usato con d3. Se qualcuno riuscisse a individuare qualcosa di strano con la sceneggiatura, sarebbe fantastico.
Grazie.
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://d3js.org/d3.v2.min.js?2.9.3"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<title>Gulf Zip Codes</title>
</head>
<div id="map"></div>
<style type="text/css">
#map {
height: 800px;
}
path {
fill: #000;
fill-opacity: .1;
stroke: #fff;
stroke-width: 1.5px;
}
path:hover {
fill: #1f77b4;
fill-opacity: .4;
}
</style>
<body>
<script>
var map = L.map('map').setView([32.546813, -88.374023], 6);
L.tileLayer('http://{s}.tile.cloudmade.com/1a1b06b230af4efdbb989ea99e9841af/998/256/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var svg = d3.select(map.getPanes().overlayPane).append("svg"),
g = svg.append("g").attr("class", "leaflet-zoom-hide");
d3.json("states_and_codes.json", function(error, states_and_codes) {
var bounds = d3.geo.bounds(states_and_codes);
path = d3.geo.path().projection(project);
var feature = g.selectAll("path")
.data(topojson.feature(states_and_codes, states_and_codes.objects.claim_states).features)
.enter().append("path")
.attr("class", "path")
.attr("d",path);
map.on("viewreset", reset);
reset();
// Reposition the SVG to cover the features.
function reset() {
var bottomLeft = project(bounds[0]),
topRight = project(bounds[1]);
svg .attr("width", topRight[0] - bottomLeft[0])
.attr("height", bottomLeft[1] - topRight[1])
.style("margin-left", bottomLeft[0] + "px")
.style("margin-top", topRight[1] + "px");
g .attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");
feature.attr("d", path);
}
// Use Leaflet to implement a D3 geographic projection.
function project(x) {
var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
return [point.x, point.y];
}
});
</script>
</body>
Avete ispezionato l'output della chiamata 'topojson.feature()'? Sembra giusto? Sei sicuro che la chiave 'claim_states' sia corretta e disponibile? – nrabinowitz