CODEWITHSUNDEEP
jquerygisleafletgeojson
user3902997
user3902997

Reputation: 3

Cannot get GeoJSON to Render

I'm a novice with both javascript and leaflet. I have recently been trying to create an interactive map using leaflet, using the map located here as a template: http://palewi.re/posts/2012/03/26/leaflet-recipe-hover-events-features-and-polygons/

While I am successfully able to import tiling, I am continually running into problems in importing geojson layers into the map, and cannot get them to render.I have posted both scripts below:

HTML:

<!DOCTYPE html>`enter code here`
<html>
<head>
    <title>Leaflet GeoJSON example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- All the stuff you need to install from Leaflet -->
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.ie.css" /><![endif]-->
    <script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
     <!-- My external GeoJSON file with the City Council boundaries in it -->
    <script src="geokrcs.geojson" type:"text/javascript"></script>
    <!--These are google maps extensions:-->
     <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
    <script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>
    <!-- jQuery so we can easily make our popup -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body style="margin:0; padding:0;">
    <!-- The <div> where we're put the map -->
    <div id="map" style="width: 500px; height: 500px;"></div>
    <script type="text/javascript">
        // Initialize the map object
        var map = new L.Map('map', {
            // Some basic options to keep the map still and prevent 
            // the user from zooming and such.

        });
        // Prep the background tile layer graciously provided by stamen.com
        //Enter Google maps layer background tiles:
        var googleLayer = new L.Google('TERRAIN');
        //Load Google Maps Layer:
        map.addLayer(googleLayer);
        // Set the center on our city of angels
        var center = new L.LatLng(1.260912,35.07835);
        map.setView(center, 9);
        //Now, we insert our qgis layer:
        var featureLayer = new L.GeoJSON();
        // Set a default style for out the polygons will appear
        var defaultStyle = {
            color: "#2262CC",
            weight: 2,
            opacity: 0.6,
            fillOpacity: 0.1,
            fillColor: "#2262CC"
        };
        var highlightStyle = {
            color: '#2262CC', 
            weight: 3,
            opacity: 0.6,
            fillOpacity: 0.65,
            fillColor: '#2262CC'
        };

        var featureLayer = L.geoJson(aidpoints, {

        });

        map.addLayer(featureLayer);
    </script>
</body>
</html>
>

geoJSON:

var aidpoints = {
"type": "FeatureCollection",

"features": [
{ "type": "Feature", "properties": { "OJD": 1, "KRCS-MNCH": "Kopro", "ACTED": "Kokwotendwo", "Proposed": "Kopro ", "Partner": "ACTED\/ KRCS", "N": 1.37851, "E": 35.41787, "Elevation": 1410, "ACTED Community groups": "VPCs, APFS & VICOBA ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.41787, 1.37851 ] } },
{ "type": "Feature", "properties": { "OJD": 2, "KRCS-MNCH": "Nyangaita", "ACTED": "Nyangaita", "Proposed": "Nyangaita", "Partner": "ACTED\/ KRCS", "N": 1.48371, "E": 35.67432, "Elevation": 957, "ACTED Community groups": "VPCs, APFS & VICOBA ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.67432, 1.48371 ] } },
{ "type": "Feature", "properties": { "OJD": 3, "KRCS-MNCH": "Akiriamet", "ACTED": "Akiriamet", "Proposed": "Akiriamet", "Partner": "KRCS", "N": 1.60502, "E": 35.4913, "Elevation": 8178, "ACTED Community groups": "None ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.4913, 1.60502 ] } },
{ "type": "Feature", "properties": { "OJD": 4, "KRCS-MNCH": "Mbara", "ACTED": "Mbara", "Proposed": "Mbara", "Partner": "ACTED\/ KRCS", "N": 1.59418, "E": 35.3976, "Elevation": 2054, "ACTED Community groups": "VPCs, APFS & VICOBA ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.3976, 1.59418 ] } },
{ "type": "Feature", "properties": { "OJD": 5, "KRCS-MNCH": "Chepkpndol", "ACTED": "Chepkondol", "Proposed": "Chepkondol", "Partner": "ACTED\/ KRCS", "N": 1.67887, "E": 35.42537, "Elevation": 1814, "ACTED Community groups": "VPCs, APFS & VICOBA ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.42537, 1.67887 ] } },
{ "type": "Feature", "properties": { "OJD": 6, "KRCS-MNCH": "Sostin", "ACTED": "Sostin", "Proposed": "Sostin", "Partner": "ACTED\/ KRCS", "N": 1.59189, "E": 35.40917, "Elevation": 1967, "ACTED Community groups": "VPCs, APFS & VICOBA ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.40917, 1.59189 ] } },
{ "type": "Feature", "properties": { "OJD": 7, "KRCS-MNCH": "Orwa", "ACTED": "Orwa", "Proposed": "Orwa", "Partner": "ACTED\/ KRCS", "N": 1.65612, "E": 35.48684, "Elevation": 883, "ACTED Community groups": "VPCs, APFS & VICOBA ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.48684, 1.65612 ] } },
{ "type": "Feature", "properties": { "OJD": 8, "KRCS-MNCH": "Porkoyu", "ACTED": "Parek", "Proposed": "Porkoyu ( KRCS)", "Partner": "KRCS", "N": 1.80412, "E": 35.420852, "Elevation": null, "ACTED Community groups": "None ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.420852, 1.80412 ] } },
{ "type": "Feature", "properties": { "OJD": 9, "KRCS-MNCH": "Mosop", "ACTED": "Kokwoptorir", "Proposed": "Kokwoptorir \/Mosop", "Partner": "ACTED\/ KRCS", "N": 1.38609, "E": 35.52468, "Elevation": 1588, "ACTED Community groups": "VPCs, APFS & VICOBA ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.52468, 1.38609 ] } },
{ "type": "Feature", "properties": { "OJD": 10, "KRCS-MNCH": "Cheptulel", "ACTED": "Kokwositot &Lebei", "Proposed": "Kokwositot \/Cheptulel", "Partner": "ACTED\/ KRCS", "N": 1.33488, "E": 35.62769, "Elevation": 999, "ACTED Community groups": "VPCs, APFS & VICOBA ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.62769, 1.33488 ] } },
{ "type": "Feature", "properties": { "OJD": 11, "KRCS-MNCH": "Ptokou", "ACTED": "Ptokou", "Proposed": "Ptokou", "Partner": "ACTED\/ KRCS", "N": 1.4544, "E": 35.47972, "Elevation": 997, "ACTED Community groups": "VPCs, APFS & VICOBA ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.47972, 1.4544 ] } },
{ "type": "Feature", "properties": { "OJD": 12, "KRCS-MNCH": "Sangat", "ACTED": "Sangat", "Proposed": "Sangat", "Partner": "ACTED\/ KRCS", "N": 1.44543, "E": 35.4677, "Elevation": 1011, "ACTED Community groups": "VPCs, APFS & VICOBA ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.4677, 1.44543 ] } },
{ "type": "Feature", "properties": { "OJD": 13, "KRCS-MNCH": "Takar", "ACTED": "Takar", "Proposed": "Takar", "Partner": "ACTED\/ KRCS", "N": 1.4312, "E": 35.62, "Elevation": 1046, "ACTED Community groups": "VPCs, APFS & VICOBA ", "KRCS Community groups": "Health facility " }, "geometry": { "type": "Point", "coordinates": [ 35.62, 1.4312 ] } }

I have tried reformatting the file to a .js. In addition, I have tried to load the geoson file using different methods here: http://leafletjs.com/examples/geojson.html. I have also tried switching the positions of latitude and longitude in the geojson file.

However, I just can't seem to figure out what is wrong.Does anyone have any ideas of what I'm doing wrong?

`

Upvotes: 0

Views: 650

Answers (1)

sabas
sabas

Reputation: 743

Your GeoJSON is missing two brackets at the end. Add ]} and it should work. I suggest to check with http://jsonlint.com/ and http://geojsonlint.com/ the geojson validity.

Upvotes: 3

Related Questions