I have been trying to make a very simple map on Liflet for the last two days and am on the wall.
I have a topoJSON file with two layers made from previous geoJSON files: US zipcodes for 5 states and 5 state polygons.
I want to display them in the Flyer, and it is important to use topoJSON instead of geoJSON due to the smaller file size using the zip layer.
The problem is that for my life I can’t even get a layer of smaller states in my topoJSON file for display on the map. I went through many examples on the Internet and followed the example of Mike Bostok: https://github.com/mbostock/bost.ocks.org/blob/gh-pages/mike/leaflet/index.html#L131-171 .
I can get the file to display in a web browser using only d3, so the file is fine. I am using v1 topoJSON along with the topojson.feature method in a script. The code is below. I cannot make the topoJSON file available, but I assume this is good because I used it with d3 before. If someone could notice something from outside with a script, that would be great.
Thanks.
<!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(); </script> </body>
antarctica77
source share