Last active
December 16, 2018 07:43
-
-
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).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
# 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