3

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>
Improve this question

2 Answers 2

Reset to default
5

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.

Improve this answer
1
  • Cool, somehow, I managed to implement it :)
    – normis
    Commented Nov 8, 2013 at 11:35
0

You need to understand JavaScipt syntax and JSON Syntax, to understand the Issue.

In JavaScript, you usually declare variables like this:

var count=4;

If the variable is an object, you declare it like this:

var person={age:45, name:"John Doe"}

GeoJSON is a special format of JSON, which in turn is almost JavaScript. SO when you get the some GeoJSON Data, be it from GeoJSON.io, or some other source, you get the actual object, which can be represented as: { "type": "Point", "coordinates": [100.0, 0.0] }

But when you are using it your JavaScript code, as a literal variable, you need the deceleration, like this:

var pt={ "type": "Point", "coordinates": [100.0, 0.0] };

Improve this answer

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.