1

I was trying to add a GeoJSON feature implementing leadlet, but with no avail. Cannot figure out what is going on?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Leaflet Demo</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"/>
    <style type="text/css"></style>
</head>
<body>

<div id="map" style="width: 100%; height: 630px"></div>

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script type="text/javascript">
    var map = L.map('map').setView([12.989517999999999,77.66344159999994],18);
    var osm = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
    L.tileLayer(osm).addTo(map);


    //Json Feature (Point)
    var jsonFeature = {
        "type": "Feature",
        "properties": {
            "name": "Gainsights",
            "amenity": "Building",
            "popupContent": "someplace!"
        },
        "geometry": {
            "type": "point",
            "coordinates": [ 77.66344159999994,12.989517999999999]
        }
    };
    //End Json Feature calling

    var popup = L.popup();
    var marker = L.marker();

/*    function onMapClick(e) {
        popup
                .setLatLng(e.latlng)
                .setContent("You clicked the map at " + e.latlng.toString())
                .openOn(map);

        var myMarker = L.circleMarker(e.latlng,500,
                { title: 'selected' })
                .addTo(map);
    }
    map.on('click', onMapClick);*/

    L.geoJson(jsonFeature).addTo(map);


</script>

</body>
</html>
Improve this question

1 Answer 1

Reset to default
2

You have two issues. First, it is Point not point in the GeoJSON, ie, it is case sensitive. You can always use GeoJSONlint to check for the validity of GeoJSON, though it also shows up as an error in the developer console. Second, your link the cdn for the leaflet.css, needs to have the http: in front, ie, http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js -- this is why your tiles looked a bit strange.

Functioning page:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Leaflet Demo</title>
 <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"/>
 <style type="text/css"></style>
</head>
<body>

<div id="map" style="width: 100%; height: 630px"></div>

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script type="text/javascript">
var map = L.map('map').setView([12.989517999999999,77.66344159999994],18);
var osm = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
L.tileLayer(osm).addTo(map);


//Json Feature (Point)
var jsonFeature = {
    "type": "Feature",
    "properties": {
        "name": "Gainsights",
        "amenity": "Building",
        "popupContent": "someplace!"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [77.66344159999994, 12.989517999999999 ]
    }
 };
 //End Json Feature calling

 var popup = L.popup();
 var marker = L.marker();

 /*    function onMapClick(e) {
    popup
            .setLatLng(e.latlng)
            .setContent("You clicked the map at " + e.latlng.toString())
            .openOn(map);

    var myMarker = L.circleMarker(e.latlng,500,
            { title: 'selected' })
            .addTo(map);
  }
  map.on('click', onMapClick);*/

  L.geoJson(jsonFeature).addTo(map);


</script>

</body>
</html>
Improve this answer
1
  • Thanks this helped, I'm new to geoJSON and leaflet. Thanks a lot for your help and ill be sure to use GeoJSONlint.
    – smurthy1996
    Commented Jun 26, 2015 at 6:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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