This is just a simple test, if topojson is directly able to compute tiles, when some rectangles are added to the TopoJSON-file!
The presented rectangles are randomly produced and are not related to any Tiling-Shema!
Result = NO, IT DOES NOT SPLIT DATA TO 'TILES'!!!
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Testing Simple Tiling</title> | |
| <meta charset="utf-8" /> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.js"></script> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <style> | |
| @import url(http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.css); | |
| #overlay{ | |
| fill:None; | |
| stroke:#ff00ff; | |
| stroke-width:1.5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map" style="width: 960px; height: 600px"></div> | |
| <script> | |
| var map = L.map('map').setView([52.52,13.384], 5); | |
| var data_attrib = " | Data: <a href='http://www.geodatenzentrum.de/geodaten/gdz_rahmen.gdz_div?gdz_spr=eng&gdz_akt_zeile=5&gdz_anz_zeile=1&gdz_unt_zeile=18&gdz_user_id=0' target='_blank'>© GeoBasis-DE / BKG 2013</a> | <a href='http://d3js.org/'>D3.js</a> | <a href='https://github.com/mbostock/topojson/wiki'>TopoJSON</a>" | |
| var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: "Map: <a href='http://www.openstreetmap.org/'>© OpenStreetMap </a>contributers" + data_attrib}); | |
| var esri = L.tileLayer('http://services.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer/tile/{z}/{y}/{x}.png', {attribution: "Map: <a href='http://www.arcgis.com/home/item.html?id=c4ec722a1cd34cf0a23904aadf8923a0'>ArcGIS - World Physical Map</a>" + data_attrib}); | |
| var stamen = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {attribution: "Map: <a href='http://maps.stamen.com/#toner/12/37.7706/-122.3782'>Stamen Design</a>" + data_attrib}).addTo(map); | |
| var baseLayers = {"stamen": stamen, "OpenStreetMap":osm, "World Physical Map":esri}; | |
| L.control.layers(baseLayers).addTo(map); | |
| d3.json("tiledtest_topo.json", function(error, topology) { | |
| topology.arcs.map(function(arc,i){ | |
| //GET THE Feature OF THE ARC | |
| var arcFeature = topojson.feature(topology, {type: 'LineString', arcs:[i]}); | |
| //D'OH...CHANGE THE COORDINATES TO FIT FOR LEAFLET-POLYLINE | |
| arcFeature.geometry.coordinates = arcFeature.geometry.coordinates.map(function(d){return [d[1],d[0]]}) | |
| //MAKE A POLYLINE USING THE ARCFEATURE | |
| //DEFINE THE COLOR...NEEDS A MORE COMPLICATED SOLUTION FOR COMPLETELY AUTOMATIC ATTRIBUTION | |
| var polyline = L.polyline(arcFeature.geometry.coordinates, {color: '#f00', weight: 2, opacity:1}) | |
| .bindPopup('hello') | |
| .addTo(map); | |
| //console.log(arcFeature.geometry.coordinates[0][0]) | |
| //1st POINT | |
| L.circle([arcFeature.geometry.coordinates[0][0], arcFeature.geometry.coordinates[0][1]], 200, {color: '#00f', weight: 2, opacity:0.5}).addTo(map); | |
| //LAST POINT | |
| L.circle([arcFeature.geometry.coordinates[arcFeature.geometry.coordinates.length-1][0], arcFeature.geometry.coordinates[arcFeature.geometry.coordinates.length-1][1]], 200, {color: '#0f0', weight: 2, opacity:0.5}).addTo(map); | |
| }) | |
| }) | |
| </script> | |
| </body> | |
| </html> |