I started working with leaflet and google earth tiles. I want to add borders on my map so I tried to use the countries geoJson Data as a layer on the map.
The problem is that the json borders created does not meet my map borders exactly.
Note: that at the south part of my map (South Africa, South America, Australia,...) the json borders meet the map borders, while at north part of the map the borders are far away from where they should be exactly.
After googling about my problem, I found that it may be a projection problem.
So I tried proj4leaflet plugin. I think I should set the values for CRS in order to meet my map in some way but I don't know.
This is a snippet of code:
var crs = new L.Proj.CRS('EPSG:3857', '+proj=sterea +lat_0=0+lon_0=0+k_0=1.0 +x_0=0 +y_0=0', { resolutions: [39062.5, 19531.25, 9765.625, 4882.8125, 2441.40625, 1220.703125], origin: [-6e6, 6e6] } ); var map = L.map('map',{ crs:crs }).setView([30, 35], 3); L.tileLayer('http://localhost/maps/z{z}/x{x}/y{y}.jpg', { attribution: '.....', maxZoom: 22, minZoom: 0 }).addTo(map); var jeoLayer = null; var geoOpt = {}; geoOpt.style = { "color": "#ff7800", "weight": 1, "opacity": 0.65 } $.getJSON("world-countries.json", function (data) { $(data.features).each(function (key, data) { jeoLayer = L.geoJson(data, geoOpt).addTo(map); }); }) GeoJson snipet:
{ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [[[-163.71289063, -78.59559631], [-163.1056366, -78.22330475], [-161.24511719, -78.38008118],.......,[180, -90], [180, -90]]] }, "properties": { "name": "Antarctica" }, "id": "AQ" }, { "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[74.92, 37.24], [74.57, 37.03],......,[73.31, 37.46], [74.92, 37.24]]]] }, This is the image:
Please any help?
أكثر...
The problem is that the json borders created does not meet my map borders exactly.
Note: that at the south part of my map (South Africa, South America, Australia,...) the json borders meet the map borders, while at north part of the map the borders are far away from where they should be exactly.
After googling about my problem, I found that it may be a projection problem.
So I tried proj4leaflet plugin. I think I should set the values for CRS in order to meet my map in some way but I don't know.
This is a snippet of code:
var crs = new L.Proj.CRS('EPSG:3857', '+proj=sterea +lat_0=0+lon_0=0+k_0=1.0 +x_0=0 +y_0=0', { resolutions: [39062.5, 19531.25, 9765.625, 4882.8125, 2441.40625, 1220.703125], origin: [-6e6, 6e6] } ); var map = L.map('map',{ crs:crs }).setView([30, 35], 3); L.tileLayer('http://localhost/maps/z{z}/x{x}/y{y}.jpg', { attribution: '.....', maxZoom: 22, minZoom: 0 }).addTo(map); var jeoLayer = null; var geoOpt = {}; geoOpt.style = { "color": "#ff7800", "weight": 1, "opacity": 0.65 } $.getJSON("world-countries.json", function (data) { $(data.features).each(function (key, data) { jeoLayer = L.geoJson(data, geoOpt).addTo(map); }); }) GeoJson snipet:
{ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [[[-163.71289063, -78.59559631], [-163.1056366, -78.22330475], [-161.24511719, -78.38008118],.......,[180, -90], [180, -90]]] }, "properties": { "name": "Antarctica" }, "id": "AQ" }, { "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[74.92, 37.24], [74.57, 37.03],......,[73.31, 37.46], [74.92, 37.24]]]] }, This is the image:
Please any help?
أكثر...