1

I'm just starting to work with leaflet and have a basic question about showing a geoJSON file. First, I found this excellent article with example code:

http://bl.ocks.org/lxbarth/4019660

However I have a more basic/beginner question, in that example the set the JSON file through this url:

http://polymaps.appspot.com/county/{z}/{x}/{y}.json

However, the file I converted (from shapefile to geojson using quantum gis) is just a .geojson extension. I'm clearly missing something here, perhaps a way to convert the geojson file into a tile format? Can someone elaborate as to how I'm supposed to do this or what my missing step is? Do I need to be hosting the geoJSON file on a server in order to do this?

If my file is called polygons.geojson, how would I go about using it in the above reference code? Thanks!

2
  • Can you elaborate on what you're looking for? Is your geojson layer overlaying a base map such as OpenStreetMap? If so, make sure your layer is saved with projection 4326(WGS84) You can store you're layer within your file structure. Check out these references: leaflet-ajax and this leaflet tutorial
    – geomajor56
    Jul 10, 2013 at 14:55
  • Yes, my goal is to overlay municipality areas over an OSM basemap in Leaflet. I'm doing almost the same exact thing in this link: bl.ocks.org/lxbarth/4019660 Except my file is called "areas.geojson" but in that example they set the geojson file with a url that ends in "county/{z}/{x}/{y}.json" It appears as though they want XYZ coordinates and not a file name there.. I'm unsure as to how to set the path correctly.
    – Chad
    Jul 10, 2013 at 16:03

1 Answer 1

4

I guess your question is a bit confused because you mixed 2 notions which are not necessarily associated. To be clear :

  • on one part, you can read and display geojson files with leaflet (geojson is a format). Following this URL, you will find basics examples : http://leafletjs.com/examples/geojson.html
  • on the other part, leaflet is also able to understand and display tiles through the TileLayer object. Tiles are a way to optimize the map rendering (independently of the format).

On the given example, the map displays geojson polymaps tiles, mixing both geojson format and tiles mechanism.

According to your needs you can choose to :

  1. display the full geojson file (easy to implement, ok for small size files),
  2. create your own tiles with TileStache. Regarding geojson tiles creation a question was asked before, you may refer to the accepted answer and given links.
3
  • Thanks for the response. Indeed, my question was confused, I was unclear if there is a relationship between GeoJSON and tiles. I had seen on several sites references to a "GeoJSON tiles" & based on the url in the sample I thought this may be necessary. I assume creating tiles from GeoJOSN is a vector to raster conversion? Does the "{z}/{x}/{y}.json" indicate a tile conversion has taken place? I just don't understand the naming convention.. my file is called "areas.geojson" but the example says "{z}/{x}/{y}.json". How do I correctly indicate my file name when it is looking for coordinates?
    – Chad
    Jul 10, 2013 at 15:52
  • 1
    Geojson is a vector format and there is no raster conversion. Regarding x, y, z you find more information on the given link, see URL template section : {z} — zoom level, {x} and {y} — tile coordinates. See also that in this example, the geojson file is called globally without tiles. If you want to go for a simple solution, just call your areas.geojson file.
    – simo
    Jul 10, 2013 at 19:54
  • Thanks, got it to work after realizing the data was in fact in state plane and the code I had was working perfectly fine.. just had to reproject the data.
    – Chad
    Jul 13, 2013 at 4:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.