1

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:

JeoJson layer on google earth

Please any help?

5
  • If you can post an image of the output that you are getting, it might help us understand your issue better. Feb 11 '15 at 15:41
  • @devdatta-tengshe I posted an image and thanks for your attention :)
    – mapper
    Feb 11 '15 at 16:05
  • What is the Spatial Reference of your GeoJSON? Could you post a small snippet of it? Feb 11 '15 at 16:07
  • I posted some of geojson file . you can see the full json file at the link I provided in the question .
    – mapper
    Feb 11 '15 at 16:20
  • @devdatta-tengshe Any help or idea I can start from
    – mapper
    Feb 12 '15 at 16:27
1

I don't think there is any problem with the geojson countries, it works fine on Open Street Map tiles

enter image description here

I would check the source and projection of your tile layer, or perhaps start again without defining a crs. I notice you are using what seems to be a locally hosted tile layer: http://localhost/maps/z{z}/x{x}/y{y}.jpg. You can also use Google Satellite tiles as a basemap as described in this answer

Complete example (image above):

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>
<body>
    <div id="map" style="width: 600px; height: 400px"></div>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script>
    // geojson snippet copied from https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json
    var egypt = {"type":"FeatureCollection","features":[
        {"type":"Feature","id":"EGY","properties":{"name":"Egypt"},"geometry":{"type":"Polygon","coordinates":[[[34.9226,29.50133],[34.64174,29.09942],[34.42655,28.34399],[34.15451,27.8233],[33.92136,27.6487],[33.58811,27.97136],[33.13676,28.41765],[32.42323,29.85108],[32.32046,29.76043],[32.73482,28.70523],[33.34876,27.69989],[34.10455,26.14227],[34.47387,25.59856],[34.79507,25.03375],[35.69241,23.92671],[35.49372,23.75237],[35.52598,23.10244],[36.69069,22.20485],[36.86623,22],[32.9,22],[29.02,22],[25,22],[25,25.6825],[25,29.238655],[24.70007,30.04419],[24.95762,30.6616],[24.80287,31.08929],[25.16482,31.56915],[26.49533,31.58568],[27.45762,31.32126],[28.45048,31.02577],[28.91353,30.87005],[29.68342,31.18686],[30.09503,31.4734],[30.97693,31.55586],[31.68796,31.4296],[31.96041,30.9336],[32.19247,31.26034],[32.99392,31.02407],[33.7734,30.96746],[34.26544,31.21936],[34.9226,29.50133]]]}},
        ]}
    </script>

    <script>
        var mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
                '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                'Imagery © <a href="http://mapbox.com">Mapbox</a>',
            mbUrl = 'https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png';

        var grayscale   = L.tileLayer(mbUrl, {id: 'examples.map-20v6611k', attribution: mbAttr}),
            streets  = L.tileLayer(mbUrl, {id: 'examples.map-i875mjb7',   attribution: mbAttr});

        var map = L.map('map', {
            center: [27.25, 29.44],
            zoom: 5,
            layers: [grayscale]
        });

        var baseLayers = {
            "Grayscale": grayscale,
            "Streets": streets
        };
        L.control.layers(baseLayers).addTo(map);

        // Add geojson snippet to map
        L.geoJson(egypt,{}).addTo(map);

    </script>
</body>
</html>
4
  • Hi @toms yes offcourse it works fine on open street because open street map has the projection Mercator (EPSG 3857) while google earth uses WGS84 (EPSG 4326). I wonder if there is a way in leaflet to use 2 layers with different projection. Until now I think it is not possible because leaflet allows just to set the projection to the map but not to the layers
    – mapper
    Feb 16 '15 at 14:21
  • Attribution for that link? It looks just like gist.github.com/crofty/2197042
    – jon_two
    Dec 12 '16 at 14:02
  • @jon_two Not sure how you attribute a link. I've not seen that gist until now. As already noted in the answer, I found it here: psha.org.ru/leaflet/Google.js
    – toms
    Dec 12 '16 at 17:17
  • @toms just making sure the right person gets the credit - the psha page looks like someone's personal project page where they've reposted content they've found elsewhere. Ideally they should be providing attribution.
    – jon_two
    Dec 13 '16 at 9:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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