Problems with viewing geojson data on map

Help and support
1

Hi,
I have troube with viewing geojson Data.

My Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CQ Zones on OpenStreetMap</title>
    <style>
        body { margin: 0; }
        #map { height: 100vh; }
    </style>
</head>
<body>
    <div id="map"></div>

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-ajax/dist/leaflet.ajax.js"></script>

    <script>
        var map = L.map('map').setView([0, 0], 2);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        // Replace the URL with the actual URL to your CQ Zones GeoJSON file
        var cqZoneLayer = new L.GeoJSON.AJAX("https://gist.githubusercontent.com/amazingproducer/15fc079dcd3c1bad9f78ef245ededafd/raw/cq_zones.geojson", {
            onEachFeature: function (feature, layer) {
                layer.bindPopup('CQ Zone: ' + feature.properties.CQ_ZONE);
            }
        }).addTo(map);
    </script>
</body>
</html>

This ist my geojson Data:

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "cq_zone_name": "Northeastern Zone of Africa", "cq_zone_number": 34 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 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 ], [ 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.0 ], [ 37.188720000000103, 21.01885 ], [ 36.96941, 20.837440000000129 ], [ 37.114700000000141, 19.80796 ], [ 37.481790000000103, 18.61409 ], [ 37.86276, 18.36786 ], [ 38.410089959473225, 17.998307399970315 ], [ 37.90400000000011, 17.42754 ], [ 37.16747, 17.263140000000135 ], [ 36.852530000000115, 16.95655 ], [ 36.75389, 16.29186 ], [ 36.32322, 14.82249 ], [ 36.42951, 14.42211 ], [ 36.27022, 13.563330000000121 ], [ 35.86363, 12.57828 ], [ 35.26049, 12.08286 ], [ 34.831630000000132, 11.318960000000118 ], [ 34.731150000000127, 10.910170000000107 ], [ 34.25745, 10.63009 ], [ 33.96162, 9.58358 ], [ 33.963392794971185, 9.464285229420625 ], [ 33.97498, 8.68456 ], [ 33.825500000000147, 8.37916 ], [ 33.294800000000123, 8.35458 ], [ 32.95418, 7.784970000000101 ], [ 33.568290000000104, 7.71334 ], [ 34.0751, 7.22595 ], [ 34.25032, 6.82607 ], [ 34.70702, 6.594220000000121 ], [ 35.298007118233102, 5.506 ], [ 34.620196267853942, 4.847122742082036 ], [ 34.005, 4.249884947362148 ], [ 33.3900000000001, 3.79 ], [ 32.68642, 3.79232 ], [ 31.881450000000143, 3.55827 ], [ 31.24556, 3.7819 ], [ 30.83385, 3.50917 ], [ 29.95349, 4.1737 ], [ 29.71599531425602, 4.600804755060153 ], [ 29.159078403446642, 4.389267279473245 ], [ 28.696677687298802, 4.455077215996994 ], [ 28.428993768026999, 4.287154649264608 ], [ 27.979977247842953, 4.408413397637389 ], [ 27.374226108517632, 5.233944403500175 ], [ 27.213409051225256, 5.550953477394614 ], [ 26.465909458123292, 5.946717434101856 ], [ 26.21341840994512, 6.546603298362129 ], [ 25.796647983511264, 6.97931590415817 ], [ 25.124130893664812, 7.500085150579423 ], [ 25.114932488716875, 7.825104071479245 ], [ 24.567369012152199, 8.229187933785454 ], [ 23.886979580860668, 8.619729712933065 ], [ 23.805813429466752, 8.666318874542526 ], [ 23.459012892355986, 8.954285793489021 ], [ 23.394779087017298, 9.265067857292252 ], [ 23.557249790142919, 9.68121816653877 ], [ 23.554304233502194, 10.08925527591532 ], [ 22.977543572692753, 10.71446259199854 ], [ 22.864165480244253, 11.142395127807617 ], [ 22.87622, 11.384610000000123 ], [ 22.50869, 11.67936 ], [ 22.49762, 12.26024 ], [ 22.28801, 12.64605 ], [ 21.93681, 12.588180000000136 ], [ 22.03759, 12.95546 ], [ 22.29658, 13.37232 ], [ 22.18329, 13.78648 ], [ 22.51202, 14.09318 ], [ 22.30351, 14.32682 ], [ 22.56795000000011, 14.944290000000137 ], [ 23.024590000000103, 15.68072 ], [ 23.886890000000108, 15.61084 ], [ 23.837660000000142, 19.580470000000105 ], [ 19.84926, 21.49509 ], [ 15.86085, 23.40972 ], [ 14.8513, 22.862950000000126 ], [ 14.143870883855243, 22.491288967371133 ], [ 13.581424594790462, 23.040506089769281 ], [ 11.999505649471701, 23.471668402596435 ], [ 11.560669386449035, 24.097909247325617 ], [ 10.771363559622955, 24.562532050061748 ], [ 10.303846876678449, 24.379313259370974 ], [ 9.948261346078027, 24.936953640232616 ], [ 9.910692579801776, 25.365454616796796 ], [ 9.31941084151822, 26.094324856057483 ], [ 9.716285841519664, 26.512206325785655 ], [ 9.629056023811074, 27.140953477481048 ], [ 9.756128370816782, 27.688258571884205 ], [ 9.683884718472882, 28.144173895779318 ], [ 9.859997999723476, 28.959989732371071 ], [ 9.805634392952356, 29.424638373323376 ], [ 9.482139926805417, 30.307556057246188 ], [ 9.970017124072967, 30.539324856075382 ], [ 10.056575148161699, 30.961831366493527 ], [ 9.950225050505196, 31.376069647745283 ], [ 10.636901482799487, 31.761420803345686 ], [ 10.944789666394513, 32.081814683555365 ], [ 11.432253452203781, 32.368903103152832 ], [ 11.488787469131012, 33.136995754523241 ], [ 12.66331, 32.79278 ], [ 13.08326, 32.87882 ], [ 13.91868, 32.71196 ], [ 15.24563, 32.26508 ], [ 15.71394, 31.37626 ], [ 16.61162, 31.18218 ], [ 18.02109, 30.76357 ], [ 19.08641, 30.26639 ], [ 19.57404, 30.52582 ], [ 20.05335, 30.98576 ], [ 19.82033, 31.751790000000142 ], [ 20.13397, 32.2382 ], [ 20.85452, 32.7068 ], [ 21.54298, 32.8432 ], [ 22.89576, 32.63858 ], [ 23.2368, 32.19149 ], [ 23.609130000000107, 32.18726 ], [ 23.9275, 32.01667 ], [ 24.92114, 31.89936 ], [ 25.16482, 31.56915 ] ] ] ] } },
{ "type": "Feature", "properties": { "cq_zone_name": "Eastern Zone of Africa", "cq_zone_number": 37 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 49.72862, 11.5789 ], [ 50.25878, 11.67957 ], [ 50.73202, 12.0219 ], [ 51.1112, 12.02464 ], [ 51.13387, 11.74815 ], [ 51.04153, 11.16651 ], [ 51.04531, 10.6409 ], [ 50.83418, 10.27972 ], [ 50.55239, 9.19874 ], [ 50.07092, 8.08173 ], [ 49.4527, 6.80466 ], [ 48.59455, 5.33911 ], [ 47.74079, 4.2194 ], [ 46.56476, 2.85529 ], [ 45.56399, 2.04576 ], [ 44.06815, 1.05283 ], [ 43.13597, 0.2922 ], [ 42.04157, -0.91916 ], [ 41.81095, -1.44647 ], [ 41.58513, -1.68325 ], [ 40.88477, -2.08255 ], [ 40.63785, -2.49979 ], [ 40.26304, -2.57309 ], [ 40.12119, -3.27768 ], [ 39.80006, -3.68116 ], [ 39.60489, -4.34653 ], [ 39.20222, -4.67677 ], [ 38.74054, -5.90895 ], [ 38.79977, -6.47566 ], [ 39.44, -6.839999999999861 ], [ 39.470000000000141, -7.1 ], [ 39.19469, -7.7039 ], [ 39.25203, -8.00781 ], [ 39.18652, -8.48551 ], [ 39.53574, -9.112369999999885 ], [ 39.9496, -10.0984 ], [ 40.316586229110847, -10.317097752817499 ], [ 40.316588576017189, -10.317096042525698 ], [ 40.478387485523029, -10.765440769089993 ], [ 40.437253045418686, -11.761710707245015 ], [ 40.560811395028573, -12.639176527561027 ], [ 40.59962039567975, -14.201975192931862 ], [ 40.775475294768995, -14.691764418194241 ], [ 40.477250604012603, -15.406294447493972 ], [ 40.089263950365222, -16.10077402106446 ], [ 39.452558628097051, -16.72089120856694 ], [ 38.538350864421517, -17.101023044505958 ], [ 37.411132846838882, -17.586368096591237 ], [ 36.281279331209362, -18.659687595293448 ], [ 35.896496616364061, -18.842260430580637 ], [ 35.198399692533144, -19.552811374593894 ], [ 34.786383497870048, -19.784011732667736 ], [ 34.701892531072843, -20.497043145431011 ], [ 35.176127150215365, -21.254361260668411 ], [ 35.373427768705739, -21.840837090748877 ], [ 35.385848253705404, -22.14 ], [ 35.562545536369086, -22.09 ], [ 35.533934767404304, -23.070787855727758 ], [ 35.371774122872381, -23.535358982031699 ], [ 35.607470330555628, -23.706563002214683 ], [ 35.458745558419622, -24.122609958596549 ], [ 35.040734897610662, -24.478350518493805 ], [ 34.215824008935471, -24.816314385682659 ], [ 33.013210076639012, -25.357573337507738 ], [ 32.574632195777866, -25.727318210556092 ], [ 32.660363396950089, -26.148584486599447 ], [ 32.915955031065693, -26.215867201443466 ], [ 32.830120477028885, -26.742191664336197 ], [ 32.071665480281069, -26.733820082304909 ], [ 31.985779249811969, -26.291779880480227 ], [ 31.83777794772806, -25.843331801051349 ], [ 31.752408481581881, -25.484283949487413 ], [ 31.930588820124253, -24.369416599222539 ], [ 31.670397983534656, -23.658969008073864 ], [ 31.191409132621288, -22.251509698172399 ], [ 32.244988234188014, -21.116488539313693 ], [ 32.508693068173443, -20.395292250248307 ], [ 32.65974327976258, -20.304290052982317 ], [ 32.772707960752626, -19.715592136313298 ], [ 32.611994256324891, -19.419382826416275 ], [ 32.654885695127149, -18.672089939043495 ], [ 32.849860874164392, -17.979057305577179 ], [ 32.847638787575846, -16.713398125884616 ], [ 32.328238966610229, -16.392074069893752 ], [ 31.852040643040599, -16.319417006091378 ], [ 31.636498243951195, -16.071990248277885 ], [ 31.17306399915768, -15.860943698797874 ], [ 30.338954705534544, -15.880839125230246 ], [ 30.27425581230511, -15.507786960515213 ], [ 30.17948123548183, -14.796099134991529 ], [ 33.214024692525214, -13.971860039936153 ], [ 32.688165317523129, -13.712857761289277 ], [ 32.991764357237884, -12.783870537978274 ], [ 33.306422153463075, -12.435778090060218 ], [ 33.114289178201915, -11.607198174692314 ], [ 33.315310499817286, -10.796549981329697 ], [ 33.485687697083591, -10.525558770391115 ], [ 33.231387973775298, -9.676721693564801 ], [ 32.759375441221323, -9.23059905358906 ], [ 32.759375530156952, -9.23059907051266 ], [ 32.75937544122138, -9.230599053589003 ], [ 32.191864861791942, -8.930358981973257 ], [ 31.556348097466639, -8.762048841998649 ], [ 31.157751336950071, -8.594578747317314 ], [ 30.74, -8.34 ], [ 30.2, -7.08 ], [ 29.62, -6.52 ], [ 29.419992710088309, -5.939998874539299 ], [ 29.51998660657307, -5.419978936386258 ], [ 29.339997592900374, -4.499983412294114 ], [ 29.753512404099865, -4.452389418153302 ], [ 30.11632, -4.09012 ], [ 30.50554, -3.56858 ], [ 30.75224, -3.35931 ], [ 30.74301, -3.03431 ], [ 30.52766, -2.80762 ], [ 30.46967, -2.41383 ], [ 30.758308953583139, -2.287250257988376 ], [ 30.816134881317851, -1.698914076345375 ], [ 30.419104852019302, -1.134659112150416 ], [ 29.821518588996128, -1.443322442229771 ], [ 29.579466180141026, -1.341313164885605 ], [ 29.587837762172171, -0.587405694179381 ], [ 29.8195, -0.2053 ], [ 29.875778842902434, 0.597379868976361 ], [ 30.086153598762792, 1.062312730306417 ], [ 30.468507521290292, 1.583805446779706 ], [ 30.85267011894814, 1.849396470543752 ], [ 31.17414920423596, 2.204465236821306 ], [ 30.77332, 2.339890000000139 ], [ 30.83385, 3.50917 ], [ 31.24556, 3.7819 ], [ 31.88145, 3.55827 ], [ 32.68642, 3.79232 ], [ 33.3900000000001, 3.79 ], [ 34.005, 4.249884947362148 ], [ 34.005, 4.249884947362088 ], [ 34.620196267853878, 4.847122742081988 ], [ 35.298007118232981, 5.506 ], [ 35.298007118233102, 5.506 ], [ 34.70702, 6.594220000000121 ], [ 34.25032, 6.82607 ], [ 34.075100000000191, 7.22595 ], [ 33.568290000000104, 7.71334 ], [ 32.954180000000235, 7.784970000000101 ], [ 33.294800000000123, 8.35458 ], [ 33.825500000000147, 8.37916 ], [ 33.97498, 8.684560000000147 ], [ 33.96162, 9.58358 ], [ 34.25745, 10.63009 ], [ 34.731150000000127, 10.910170000000107 ], [ 34.831630000000132, 11.318960000000118 ], [ 35.26049, 12.08286 ], [ 35.863630000000171, 12.57828 ], [ 36.27022, 13.563330000000121 ], [ 36.42951, 14.42211 ], [ 36.32318891779812, 14.822480577041063 ], [ 36.753860304518582, 16.291874091044292 ], [ 36.852530000000115, 16.95655 ], [ 37.16747, 17.263140000000135 ], [ 37.90400000000011, 17.42754 ], [ 38.410089959473225, 17.998307399970315 ], [ 38.990622999840014, 16.840626125551694 ], [ 39.26611006038803, 15.922723496967251 ], [ 39.814293654140215, 15.435647284400318 ], [ 41.179274936697652, 14.491079616753211 ], [ 41.734951613132353, 13.921036892141558 ], [ 42.276830682144862, 13.343992010954423 ], [ 42.589576450375262, 13.000421250861905 ], [ 43.081226027200159, 12.699638576707116 ], [ 43.317852410664671, 12.390148423711025 ], [ 43.286381463398925, 11.974928290245884 ], [ 42.715873650896526, 11.735640570518342 ], [ 43.145304803242141, 11.462039699748857 ], [ 42.776851841000962, 10.92687856693442 ], [ 42.55876, 10.57258000000013 ], [ 42.92812, 10.021940000000143 ], [ 43.296990000000108, 9.540480000000173 ], [ 43.67875, 9.18358000000012 ], [ 46.94834, 7.99688 ], [ 47.78942, 8.003 ], [ 48.486735874226952, 8.837626247589995 ], [ 48.938129510296449, 9.451748968946617 ], [ 48.938232863161033, 9.973500067581512 ], [ 48.938491245322496, 10.982327378783467 ], [ 48.942005242718352, 11.394266058798138 ], [ 48.948204758509739, 11.410617281697963 ], [ 49.26776, 11.43033 ], [ 49.72862, 11.5789 ] ] ] ] } },

See original Data: cq-zones.geojson · GitHub

See my Test on: CQ Zones on OpenStreetMap

please help me
Conny

2

Here’s the fixed version:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CQ Zones on OpenStreetMap</title>
    <style>
      body {
        margin: 0;
      }
      #map {
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
      crossorigin=""
    ></script>

    <script>
      var map = L.map("map").setView([0, 0], 2)

      L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: "© OpenStreetMap contributors",
      }).addTo(map)

      fetch("https://raw.githubusercontent.com/amazingproducer/cq-zone-world-map/master/cq-zones.geojson").then(
        async (resp) => {
          const data = await resp.json()
          L.geoJSON(data)
            .bindPopup(function (layer) {
              const props = layer.feature.properties
              return `CQ Zone ${props.cq_zone_name}: ${props.cq_zone_number}`
            })
            .addTo(map)
        }
      )
    </script>
  </body>
</html>

I have:

  • Added missing leaflet stylesheet file
  • Fixed GeoJSON file URL (was 404 not found)
  • Fixed GeoJSON property name: CQ_ZONE → cq_zone_name + cq_zone_number
  • Upgraded tiles URL from {s}.tile.openstreetmap.org to just tile.openstreetmap.org
3 Likes
3

Hi @NorthCrab,
you are my hero, tnx for your great help.
Now it works fine !!!

Conny

2 Likes