[GIS] GeoJSON formatting for Leaflet

geojsonleaflet

I am using http://GeoJSON.io as the source for my data, which is then to be displayed via Leaflet.js.

I found that leaflet neads the file to include "var name = {" but GeoJSON.io doesn't like it, and doesn't load the file if it starts with this.

To edit the file, I need to remove this part, edit, then add it back in. I am a beginner, so could anyone help me to avoid doing this? Can I declare the vairable some other way?

This is my HTML:

<!DOCTYPE html>

<html>
<head>
    <title>Vietas</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" href="dist/leaflet.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="dist/leaflet.ie.css" /><![endif]-->
    <link rel="points" type="application/json" href="dati1.geojson">
    <style type="text/css">
    html,body {padding: 0; margin: 0}
    #map {position:absolute; top:0; bottom:0; width:100%; margin:0; padding:0}
    </style>
    </head>
<body>
    <div id="map"></div>

    <script src="dati1.geojson" type="text/javascript"></script>
    <script src="dist/leaflet.js"></script>

    <script>
        var map = L.map('map').setView([56.74739, 24], 9);

        L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2012 CloudMade',
            key: 'BC9A493B41014CAABB98F0471D759707'
        }).addTo(map);

        function onEachFeature(feature, layer) {
        var popupContent =  '<div class="'+ feature.properties.samaksa +'"><b>' + feature.properties.title + '</b><br/>' +
                        '<p>' + feature.properties.description + '</p>' +
                        '<img src="img/' + feature.properties.image + '"/>' +
                        '<p><em style="font-size: 0.8em"><a href="http://sapnis.com/vietas/#14/'+ feature.geometry.coordinates +'">' + feature.geometry.coordinates +'</a></em></p></div>';
            layer.bindPopup(popupContent);
        }

        L.geoJson([punkti], {
            style: function (feature) {
                return feature.properties && feature.properties.style;
            },
            onEachFeature: onEachFeature,
            pointToLayer: function (feature, latlng) {
                return L.circleMarker(latlng, {
                    radius: 6,
                    fillColor: "#e1e1e1",
                    color: "#888",
                    weight: 2,
                    opacity: 1,
                    fillOpacity: 0.7
                });
            }
        }).addTo(map);
    </script>
</body>
</html>

And here is the current GeoJSON file: http://sapnis.com/vietas2/dati1.geojson

As you see, it starts with "var" which is unacceptable per JSON syntax

I marked the question as answered, but will add the solution for future visitors of this page. Solved like this:

<!DOCTYPE html>
<html>
<head>
    <title>Vietas</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" href="dist/leaflet.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="dist/leaflet.ie.css" /><![endif]-->
    <link rel="points" type="application/json" href="dati1.geojson">
    <style type="text/css">
    html,body {padding: 0; margin: 0}
    #map {position:absolute; top:0; bottom:0; width:100%; margin:0; padding:0}
    </style>
    </head>
<body>
    <div id="map"></div>
    <script src="dist/leaflet.js"></script>

    <script>
        var map = L.map('map').setView([56.74739, 24], 9);

        L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2012 CloudMade',
            key: 'BC9A493B41014CAABB98F0471D759707'
        }).addTo(map);

        function onEachFeature(feature, layer) {
        var popupContent =  '<div class="'+ feature.properties.samaksa +'"><b>' + feature.properties.title + '</b><br/>' +
                        '<p>' + feature.properties.description + '</p>' +
                        '<img src="img/' + feature.properties.image + '"/>' +
                        '<p><em style="font-size: 0.8em"><a href="http://sapnis.com/vietas/#14/'+ feature.geometry.coordinates +'">' + feature.geometry.coordinates +'</a></em></p></div>';
            layer.bindPopup(popupContent);
        }

          $.getJSON("dati1.geojson", function(data) {
            var geojson = L.geoJson([data], {
            style: function (feature) {
                return feature.properties && feature.properties.style;
            },
            onEachFeature: onEachFeature,
            pointToLayer: function (feature, latlng) {
                return L.circleMarker(latlng, {
                    radius: 6,
                    fillColor: "#e1e1e1",
                    color: "#888",
                    weight: 2,
                    opacity: 1,
                    fillOpacity: 0.7
                });
            }
            });
            geojson.addTo(map);
        });
    </script>
</body>
</html>

Best Answer

Instead of loading your GeoJSON as a JavaScript variable, you could load your GeoJSON with jQuery’s getJSON method or with the help of leaflet-ajax-plugin within your Leaflet map. Both ways are described here.

And there's a third way with Link Relations.

With these ways you don't need to add or remove the var statement to your GeoJSON data.

Related Question