CODEWITHSUNDEEP
javascriptjqueryleafletgeojson
Hanan AlMashhadani
Hanan AlMashhadani

Reputation: 13

Leaflet map not displaying external GeoJSON data

Leaflet Map not Visible .... What I am trying to do is creating a map and add external GeoJSON file I already created through QGIS app using SPH file from http://naturalearthdata.com somehow my map is not visible there i also tried to use mapbox and google API key with leaflet library and sill having same issue anyone knows the solution ?? I couldn't add my GeoJSON file in here because it's a huge file

Here is my HTML file:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="biewport" content="width=device-width, initial-scale=1" />
    <title>GeoJSON</title>
    <!-- leflet links -->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

</head>
<body>

    <div id="map"></div>
    <!-- <script src="CA_Bulletin_118_Groundwater_Basins.geojson"></script> -->
    <script src="test.geojson"></script>                            
    <!-- script file -->
    <script src="js/script.js"></script>

</body>
</html>

My script.js file:

//creating a new map
 var map = new L.Map('map').setView([51.505, -0.09], 13);

//create a new Geojason layer and set it up to basins var ....
// var test;
var test = L.tileLayer('basins');
var basinslayer = L.geoJson(basins).addTo(map);

And here is my CSS file:

/*General CSS */
html, body, #map {
    height: 100%;
    width: 100%;
    font-family: sans-serif;
}

#map {
    width: 50%;
    height: 50%;
}

Upvotes: 0

Views: 2292

Answers (1)

J. Jonah Jameson
J. Jonah Jameson

Reputation: 67

I'm also importing a geojson file to generate the points on my map. I used the $.getJSON from jquery to import the geojson file, load the data, and create the points.

If you want to try this method, you have to add jQuery in the head of your html, like this (also found here for the latest cdn):

<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>

My $.getJSON looks like this:

var getjson = $.getJSON("map-v2.geojson",function(data){
  var bev = L.geoJson(data,{
    pointToLayer: function(feature,latlng){
      var marker = L.marker(latlng);
      marker.bindPopup('<p align=center>' + '<strong>Title: </strong>' + feature.properties.Title + '<strong>Date: </strong>' + feature.properties.Date + '<br/>' + '<strong>Creator: </strong>' + feature.properties.Creator);
      return marker;
    }
  });
  bev.addTo(map);
});

First, I set a variable that calls $.getJSON, which takes a few arguments, the first one is the name of the geoJSON file in quotes, and the second is function(data) which acts to say we are going to use the data found in this file. The second line I assign my variable bev to invoke the L.geoJson function, passing the argument data (which will use the data from the geoJSON file). Then I point to a new layer using pointToLayer and assigning it the value of the function(feature,latlng). feature allows me to name certain properties from my geoJSON file to display in the popups, latlng extracts the coordinates from the geoJSON file to generate the locations for the markers(latlng is mandatory). I then assign another variable called marker, and here's where you generate your markers on your map, simply by using L.marker(latlng). After that, the marker.bindPopup binds all the content I want to display on popups from the properties data I have in each of my points in the geoJson file. Here's an example of my geoJSON:

{
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.714055,
          38.440429
        ]
      },
      "properties": {
        "Title": "Santa Rosa. Sonoma County. California. 1885.",
        "Date": "1885",
        "Creator": "W.W. Elliot & Co., lithographer."
      }
    },

I then return the marker, add the variable bev to the map, and there they are!

*I'm not an expert on JavaScript or Leaflet, so if my wording is off, I will gladly make edits to make it clearer.

Upvotes: 0

Related Questions