Skip to content

Instantly share code, notes, and snippets.

@pkorac
Last active December 16, 2018 07:43
Show Gist options
  • Save pkorac/5287314 to your computer and use it in GitHub Desktop.
Save pkorac/5287314 to your computer and use it in GitHub Desktop.
A really simple GeoJSON tile layer in Leaflet solution The original idea belongs to Koko A. but this is a really simple and minimal piece of code I found if you want to use tiled json layers in leaflet.js Read more about it below (in the script) and be sure that your coordinates are good in the geojson files (i.e. in the right projection).
/*
# GEOJSON TILE LAYER IN LEAFLET.JS
The original idea for this gist comes from Koko A.'s post on leaflet-js google groups
(https://groups.google.com/forum/#!msg/leaflet-js/d7ur-evSz7Q/p_B4ea_0K1AJ)
Use it at your own peril (•
## The basic concept
- setup the map and the tiles as usual
- respond to the "tileload" event with a function that loads the json file (that has the same name - z, x, y - as the tile)
- add the json data to the tile layer
- when zooming clear the tile layer (this allows for different json data on different zoom levels)
*/
// 1. Include all the LEAFLET FILES (css, js)
// 2. Include jQuery (it simplifies the ajax request a great deal)
// SETUP THE MAP
var map = new L.map("map", {
center: [46.2255, 14.5459],
zoom: 6
});
// ADD THE TILE LAYER
var pngTiles = new L.tileLayer( "http://yourserveraddress/{z}/{x}/{y}.png" ,
{
attribution: "Nice people at CloudMade/OSM/MapBox"
} ).addTo(map);
// CREATE THE JSON LAYER AND ADD IT TO THE MAP
// For now it will be empty
// here you could define extra bits for it like styles and interactivity
var jsonLayer = L.geoJson().addTo(map);
// WHEN EACH TILE LOADS, LOAD THE CORRESPONDING JSON FILE
pngTiles.on("tileload", function( event ){
// split the url (such as: http://yourserver.com/maps/lovelymap/6/34/22.png) at each "/"
// z is the third value (from the back) in the array
// x is the second one (from the back)
// y is the last one,
// which we split at the "." so we get only the number, not the png
var title = event.url.split("/");
var z = title[title.length-3];
var x = title[title.length-2];
var y = title[title.length-1].split(".")[0];
// Construct the json string out of the z, x and y
var jsonString = "http://yourserveraddress/" + z + "/" + x + "/" + y + ".json";
//console.log( jsonString ); // print it if you want to check
// Get jQuery to make the ajax request for the file
$.getJSON( jsonString, function(json){
// if there is json data, it will be loaded, otherwise we just get nothing
// Add this data to the jsonLayer
jsonLayer.addData(json);
} );
} );
// SETUP THE "CLEAR" FUNCTION
// When you zoom in/out you want the json layer to get cleared
// and repopulated with new (relevant) json data
// this means you can have different data for each layer
map.on("zoomend", function(){
jsonLayer.clearLayers();
});
// Have Fun
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment